Думая до конца

Разработка программного обеспечения, возможно, является одной из самых, если не самой, динамично меняющихся областей в мире: каждый божий день все больше и больше решений и методов появляются от ярких умов, публикуются удивительные фреймворки/библиотеки и постоянно расширяются границы. оптимальный баланс между производительностью, масштабируемостью и опытом разработки. По мере того, как наши задачи развиваются и усложняются, наши методы их решения следуют их примеру.

В этом почти хаотичном потоке бесконечной спешки я встретил относительно новый фреймворк React из-за одной из моих задач при запуске: Remix. JavaScript почти печально известен из-за бесконечных выпусков фреймворков и библиотек, да, но на этот раз, я думаю, я столкнулся с явно корускантным нововведением.

На самом элементарном уровне мы знаем, что современное веб-приложение в основном состоит из трех основных структур:

  • Сзади база данных, такая как MongoDB или PostgreSQL, для хранения всех постоянных данных и размещения моделей.
  • В браузере фреймворки SPA (такие как React, Vue) для создания продвинутых интерфейсов и обеспечения плавного взаимодействия с пользователем,
  • И, наконец, RESTful API, который стоит между браузером и базой данных; постоянно прислушиваясь к запросам и проводя рабочий процесс между этими двумя концами в соответствии с определенной логикой.

Давайте сделаем это еще более ясным, рассмотрев простейшее CRUD-приложение, которое мы можем сделать со стеком MERN. Представьте себе простую панель, где мы управляем пользователями в нашей системе: вы закодировали эту страницу с помощью React. Когда вы заполните необходимую информацию и нажмете кнопку «Создать нового пользователя», вы, скорее всего, отправите запрос POST на маршрут /user в вашем API, работающем с сервером Express.

Действуя как регулировщик трафика между MongoDB и запросами вашего пользователя, контроллер проверяет и проверяет данные, которые вы отправляете из внешнего интерфейса, и добавляет их в коллекцию пользователей в базе данных.

На другой странице, когда вы хотите получить доступ ко всем пользователям в вашей системе, вы, вероятно, делаете запрос GET к тому же маршруту /user, и снова контроллер удовлетворит ваш запрос; проанализируйте его, и если запрос может пройти необходимые проверки, на этот раз контроллер извлекает данные всех пользователей из базы данных и возвращает их во внешний интерфейс, чтобы вы могли их использовать.

Поскольку подключение интерфейса напрямую к базе данных без использования какого-либо промежуточного контроллера бэкенда считается серьезным недостатком безопасности (из-за раскрытия учетных данных), в этой системе, где мы привыкли писать код интерфейса и код бэкенда в совершенно разных репозиториях, вы устанавливаете промежуточный уровень API для выполнения даже самых простых действий.

Для фронтенд-разработчика, проработавшего по этой схеме на протяжении всей своей карьеры, в основном повторяется один и тот же цикл:

1. Скорее всего, подготовьте mock data,

2. Закодируйте, как будет выглядеть страница, ее анимация и функциональность,

3. Если серверная часть готова, отправьте необходимые запросы в соответствующую конечную точку, чтобы получить данные, которые вы будете использовать (или POST, PATCH, PUT и т. д., чтобы изменить существующие данные).

4. Отредактируйте свой код для работы с реальными данными.

Здесь вы почти никогда не погружаетесь глубоко в PostgreSQL или MongoDB: вы сосредотачиваетесь на правильном использовании того, что приходит к вам в готовом виде.

Так что же меняет ремикс?

Remix позволяет вам писать внутренний код и запрашивать вашу базу данных непосредственно рядом с вашим знакомым кодом React, в котором вы указываете, как ваша страница будет отображаться на стороне браузера. Это позволяет вам писать код Node.js, как если бы вы находились в бэкэнд-репозитории, с инструментами ORM, такими как Mongoose или Prisma!

Для достижения этой среды полного стека используются две структуры: функции «Действие» и «Загрузчик». Функция загрузчика — это та, которую вы используете для извлечения данных из внешних источников. Это может быть запрос к другому API, но что более интересно, как я уже сказал, вы также можете использовать ORM, подключившись к самой своей базе данных. Кроме того, Remix предлагает отличную поддержку, чтобы быть в курсе всего, что происходит по этим запросам. В самом примитивном случае, при работе с внешним API, мы вручную определяем и управляем такими состояниями, как isLoading или isError. Библиотека React Query, написанная Таннером Линсли, также очень удобна в этом отношении; Он также успешно сохраняет состояние запросов и обеспечивает эффективный кеш. По нашему опыту, поскольку RQ было достаточно для управления всем состоянием сервера, нам даже не нужно было использовать Redux благодаря этому механизму кэширования всего приложения: за исключением нескольких состояний на стороне клиента, вся тяжесть легла на плечи RQ. Теперь Remix может пойти еще дальше. Хотя он предлагает аналогичную поддержку состояния, предлагаемую RQ, это также означает, что вы можете напрямую подключаться к базе данных и писать бэкэнд. Во внешней части вашего кода вы берете данные, возвращенные с помощью useLoaderData(), и используете их, как обычно:

export const loader: LoaderFunction = async ({ params}) => {
return json(                                 // query your db here
await db.product.findMany({
where: { categoryId: params.categoryId }}));
};
export default function ProductCategory() {
const products = useLoaderData();            // get the result
return (
<div>
<p>{products.length} Products</p>            // use it
</div>
);
}

Если вы собираетесь куда-то записывать данные, а не получать их, на этот раз вы используете действие. Изучите, как данные, переданные через форму, записываются в базу данных:

export action: ActionFunction = async ({request}) => {

  const formData = await request.formData()  // catch the sent data
  const amount = Number(formData.get('amount')) // get the fields
  .
  . // use them however you like with or ORM or sth
  return json({ amount})
}
<Form method="post">
      <input type="number" name="amount"/>
      <button>Create Cart</button>
</Form>

Конечно, в случае слишком длинных кодов, вместо того, чтобы писать все в один файл, вы можете открыть отдельные файлы, которые вы называете с суффиксом .server.js, и посвятить их только внутреннему коду.

Remix разрабатывается командой React Router и содержит десятки интересных нововведений/функций во всех отношениях. Цель этой статьи не в том, чтобы научить Remix, а в том, чтобы показать, как он может изменить процессы разработки программного обеспечения. Потому что в этом сценарии нет фронтенда, который строго запрашивает и использует данные сзади, или бэкэнда, который просто пишет API. Ремикс подталкивает вас к тому, чтобы стать фулстеком. В том же файле вы запрашиваете PostgreSQL с помощью Prisma и выполняете анимацию с помощью Framer-Motion ниже. :)

Я спрашиваю себя: не буду ли я больше использовать чистые бэкэнд-API, если полностью приму Remix? В этот момент на ум приходят другие современные технологии, такие как Golang и gRPC.

Я могу полностью справиться со своими обычными операциями CRUD в полнофункциональном ремиксе под одной крышей. Помимо этого, для моих конкретных услуг, которые должны быть адаптированы для очень высокой вычислительной эффективности, я, возможно, могу использовать другие специализированные серверные решения. Когда я смотрю на то, как высокотехнологичные компании используют Go, я вижу похожие критические задачи. Настройка движка аналитики мощности графического процессора Uber, системы с малой задержкой Twitch… В любом другом сценарии я считаю, что написание бэкенда с помощью Remix более чем подходит для ситуаций, когда комфорт разработчика и скорость разработки являются главным приоритетом.

Remix — это гораздо более новое решение по сравнению с Next.js, с которым его сравнивают как с SSR. Со временем будут обновления, и улучшения будут выполняться с растущими отзывами. Тем не менее, несмотря ни на что, привыкание к этому типу фреймворка полного стека означает избавление от более монотонной рутины и возможность мыслить сквозным образом.

В этом отношении я считаю, что взгляд на Remix может улучшить любого разработчика программного обеспечения.