10 трендов веб-разработки в 2023 году

SSR фреймворки

Одностраничные приложения (SPA) и соответствующие им фреймворки (например, React.js, Vue.js, Svelte.js) прошли через более или менее громкие циклы и существуют уже много лет. Однако с появлением мета-фреймворков поверх этих решений мы можем наблюдать четкую тенденцию перехода приложений от рендеринга на стороне клиента (CSR) к рендерингу на стороне сервера (SSR). В наши дни SSR повсеместно используется при работе с JavaScript-фреймворками. Самый популярный SSR фреймворк под названием Next.js работает поверх React.js. Эндрю Кларк, core разработчик React, назвал его "настоящим релизом React 18" в 2022 году, потому что он поставляется со всеми встроенными возможностями (например, Suspense, streaming SSR), которые команда React предоставляет в качестве фундаментальных строительных блоков на нижнем уровне библиотеки. И Vercel (компания, стоящая за Next.js), и основная команда React.js работают в тесном сотрудничестве, обеспечивая отличный опыт для разработчиков.

Хотя многие разработчики смотрят на тесную связь между Next.js и React.js с опаской, для React.js есть альтернативы, такие как Remix (недавно приобретенная Shopify). Remix использует другой подход к превращению React.js в SSR-фреймворк, но есть и функции, которые схожи (например, вложенная маршрутизация) в обоих фреймворках из-за их конкуренции. Несмотря на то, что Next.js уже является признанным лидером в современной SSR разработке и превратил многих фронтенд-разработчиков в фуллстек разработчиков, другие фреймворки тоже должны быть в вашем списке внимания: SvelteKit (построенный на Svelte.js) с его недавним релизом 1.0 при поддержке Vercel и SolidStart (построенный на Solid.js) с его улучшенным DX по сравнению с React.js.

Виды рендеринга

В то время как в последнее десятилетие (2010 - 2020) доминировали одностраничные приложения (SPA) с их клиентским рендерингом (CSR), начиная с Knockout.js и Ember.js и заканчивая Angular.js, React.js и Vue.js, в последние годы наблюдается растущий интерес к рендерингу на стороне сервера (SSR) с SSR-фреймворками. Со стороны кажется, что цикл снова замыкается, потому что мы уже давно (с 2005 по 2010 год) используем SSR с внедрением JavaScript (например, jQuery, MooTools, Dojo.js) в многостраничных приложениях (MPA). Однако, если раньше использовилась Java (например, JSP) или позже Ruby on Rails, то в этот раз все по-другому, потому что вместо этого мы полагаемся на JavaScript. В течение нескольких лет Next.js был движущей силой этой тенденции, однако, другие SSR-фреймворки, такие как SvelteKit, догоняют. SSR довольно долго конкурировал со статической генерацией сайтов (SSG) за идеальную производительность, хотя оба паттерна служат совершенно разным целям. В то время как последний паттерн используется для статического контента (например, веб-сайты типа блога), первый используется для динамического контента (например, веб-приложения). Если SEO имеет значение, то и SSR, и SSG могут иметь смысл. Однако при необходимости создания динамичного контента или контента, ориентированного на пользователя, с аутентификацией, разработчики не могут выбрать SSG (один раз собрать перед развертыванием, поэтому статичен) и вынуждены выбирать между SSR (сборка по требованию для каждого запроса с индивидуальными данными на сервере) и CSR (выборка индивидуальных данных по требованию на клиенте).

Однако CSR, SSR, SSG - это не самые последние тенденции в технике рендеринга. В то время как SSR и SSG начали тенденцию оптимизации производительности несколько лет назад, появились иные техники рендеринга, такие как Incremental Static Regeneration (ISR) и Streaming SSR. ISR берет за основу SSG, поскольку позволяет статически перестраивать сайт на основе отдельных страниц (например, перестраивать страницу X каждые 60 секунд) вместо того, чтобы перестраивать весь сайт. Кроме того, On-Demand ISR, также называемая On-Demand Revalidation, может быть использована для пересборки через API (например, при обновлении данных CMS). Потоковый SSR, с другой стороны, оптимизирует однопоточное узкое место рендеринга на стороне сервера. В то время как обычный SSR должен ждать от сервера данных, чтобы отправить отрисованный контент клиенту сразу, потоковый SSR позволяет разработчикам разделить приложение на фрагменты, которые могут быть отправлены параллельно от сервера к клиенту.

В последние годы модели рендеринга были довольно прямолинейными с SSG и SSR в SPA/MPA. Однако в наши дни в моду входят более тонкие варианты. Но не только ISR и SSR стриминг становятся более актуальными, но и частичная гидратация (например, React Server Components), которая позволяет гидратировать только некоторые компоненты на клиенте, прогрессивная гидратация (Progressive Hydration), которая дает более тонкий контроль над порядком гидратации, Island Architectures (островные архитектуры) (например, Astro) для изолированных приложений или компонентов в MPA, а также использование возобновляемости вместо гидратации (например, Qwik с его SSR-фреймворком Qwik City) становятся актуальными подходами в наши дни.

Serverless (бессерверные функции)

Технологии рендеринга, такие как SSR и SSG, очень коррелируют с тенденцией serverless at the edge, потому что обе они ориентированы на производительность с целью обеспечения бесшовного пользовательского опыта в браузере. По сути, стремление обслуживать пользователей быстрее веб-сайтов и веб-приложений вызвало интерес к serverless edge. Но давайте начнем с самого начала: Бессерверность, также известная как бессерверные функции, бессерверные вычисления (например, AWS Lambda) или облачные функции (например, Google/Firebase Cloud Functions), уже несколько лет является большой тенденцией в облачных вычислениях. Хотя бессерверность по-прежнему означает наличие работающего (удаленного) сервера, разработчику не нужно управлять сервером и связанными с ним задачами (например, масштабирование инфраструктуры по требованию). Вместо этого необходимо развернуть одну функцию как бессерверную функцию, о которой позаботится облачный провайдер.

Бессерверные функции открывают еще одно преимущество, поскольку вместо развертывания сервера приложений в одном (или нескольких) центре (центрах) обработки данных, их могут быть десятки по всему миру. Поэтому в идеальном мире бессерверные функции должны работать как можно ближе к пользователям, так как это означает кратчайший путь клиент-сервер и, следовательно, улучшенный пользовательский опыт. Развертывание бессерверных функций как можно ближе к пользователю привело к появлению терминов edge computing и edge functions. Многие облачные провайдеры (например, Cloudflare с Cloudflare Workers, Vercel со своей Edge Network, Deno с Deno Deploy) конкурируют в этом пространстве, где каждый оптимизирует для достижения наилучшего времени интерактивности (TTI) для своих конечных пользователей. Пограничные функции не только быстрее обслуживают контент SSG/SSR (поскольку провод до конечного пользователя короче), но и могут кэшировать свои результаты ближе к пользователю. Но не только производительность имеет значение, хотя она и является основным фактором, другие преимущества, такие как снижение стоимости, также связаны с вычислениями, которые происходят ближе к пользователю. Например, часто не все данные, передаваемые между клиентом и сервером (здесь функция edge), должны вычисляться в главном центре обработки данных. В IoT существует множество нерелевантных данных (например, видеозаписи без изменений в каждом кадре), которые отправляются в главный центр обработки данных и могут быть просто отфильтрованы на границе. В конце концов, пограничные функции - это только начало.

Возрождение баз данных

С появлением бессерверных функций (на границе) базы данных также переживают ренессанс. При использовании бессерверных функций разработчики быстро столкнулись с проблемой открытия слишком большого количества соединений с базой данных, поскольку существует не один сервер, который держит открытым одно соединение, а множество бессерверных функций с соединением 1:1 с базой данных. Решением этой проблемы стало объединение соединений, но об этом приходится заботиться либо самостоятельно, либо с помощью стороннего сервиса. Популярными соперниками в области бессерверных баз данных являются PlanetScale (MySql), Neon (PostgreSQL) и Xata (PostgreSQL), которые имеют множество функций, таких как разветвление баз данных, дифферинцирование схем и мощный поиск/аналитика/инсайты. Когда речь заходит о бессерверных системах, они предоставляют краевое кэширование или распределенную базу данных только для чтения, чтобы переместить данные ближе к пользователям с минимальной задержкой. Если сторонний сервис должен распространять не только вашу базу данных, но и ваше приложение, Fly.io упаковывает все в одну платформу. Что выводит нас за рамки только баз данных, где также происходит много движений. Railway, рассматриваемый как преемник Heroku, предлагает все для платформы как услуги (PaaS) для развертывания вашего технологического стека. Если вы хотите продвинуться на один шаг вверх по цепочке услуг в сторону Backends as a Service (BaaS), вы получите альтернативу Firebase с открытым исходным кодом - Supabase, которая поставляется с хостингом приложений/баз данных, аутентификацией и пограничными функциями.

Среды выполнения JavaScript

Все началось с того, что Райан Дал объявил о Node.js на конференции в 2009 году. То, что начиналось как эксперимент, который отделил JavaScript от браузера и сделал его доступным на сервере, стало одним из самых больших факторов успеха JavaScript за последнее десятилетие. По сути, Райан Дал использовал JavaScript Engine под названием V8 (реализованный в Chrome) для Node.js без самого браузера. Таким образом, и браузер Chrome, и Node.js используют один и тот же JavaScript Engine, но имеют свои собственные JavaScript Runtimes (например, Browser APIs vs Node APIs) для взаимодействия с ним. Десятилетие спустя Райан Дал объявил Deno преемником Node с обещанием предоставить разработчикам более безопасную и быструю среду, которая поставляется с похожими API браузера, TypeScript и стандартной библиотекой из коробки. Однако Deno, который также работает на V8, является лишь одним из многих JavaScript Runtimes в наши дни.

В конкурирующей стране краевых функций многие облачные провайдеры внедряют свои собственные JavaScript Runtime (например, Cloudflare Workers), которые оптимизированы для их собственной инфраструктуры (например, Cloudflare). Таким образом, бизнес-модель Deno также становится облачным провайдером с Deno Deploy и их SSR-фреймворком для рендеринга на границе (который начинался как доказательство концепции) под названием Deno Fresh. Независимые от облачных провайдеров решения, такие как Bun (работающий на JavaScriptCore Engine), недавно стали еще одним вирусным хитом в гонке за самый быстрый JavaScript Runtime. Если что-то пойдет не так, мы окажемся в той же ситуации, что и с фрагментированной поддержкой JavaScript в браузерах в течение многих лет, но на этот раз на сервере, где не весь JavaScript может поддерживаться одинаково во всех средах выполнения при развертывании на различных облачных провайдерах. Поэтому все заинтересованные стороны (например, Deno, Vercel, Cloudflare) присоединились к WinterCG, чтобы сотрудничать в области совместимости API между их JavaScript Runtimes.

Монорепо

В прошлом монорепо использовалось в основном для крупномасштабных приложений, где один проект содержит более мелкие проекты в одном репозитории с контролем версий. Каждый из этих небольших проектов может быть чем угодно - от отдельного приложения (например, SPA, MPA) до пакета многократного использования (например, функции, компоненты, сервисы). Практика объединения проектов восходит к началу 2000 годов, когда это называлось общей кодовой базой. Однако в наши дни монорепозитории используются не только крупными приложениями, но и небольшими компаниями и проектами с открытым исходным кодом, которые, несомненно, извлекут из них пользу. Например, компания может иметь различные пакеты в монорепозитории, начиная от общих компонентов пользовательского интерфейса, общей системы проектирования (например, многоразовое совместное проектирование) и заканчивая широко используемыми полезными функциями для соответствующей области.

Эти пакеты могут быть импортированы в различные приложения: реальное приложение (например, app.mywebsite.com с рендерингом на стороне клиента), которое использует все эти общие пакеты, домашняя/продуктовая/лендинговая страница (например, mywebsite.com с рендерингом на стороне сервера или генерацией статического сайта) с учетом SEO использует только пакет общей системы дизайна, а страница технической документации (например, docs.mywebsite.com) использует общие компоненты пользовательского интерфейса и пакеты общей системы дизайна. Turborepo (приобретенная компанией Vercel) вновь подняла шумиху о монорепо в JavaScript/TypeScript. Turborepo позволяет командам создавать конвейеры сборки для всех своих приложений и пакетов в рамках монорепо. Самое привлекательное: кэширование сборок в рамках конвейера на локальной машине или в облаке для всех команд. Turborepo в сочетании с другими жизненно важными инструментами монорепо, такими как npm/yarn/pnpm workspaces (управление зависимостями) и changesets (версионирование), делает этот инструментарий местом, за которым стоит следить в этом году. Конкурентами Turborepo являются Nx, Rush и Lerna (некоторое время не поддерживался, затем был приобретен компанией Nx - Nrwl).

CSS на утилитах

Разработчики либо любят, либо ненавидят его: Tailwind CSS является примером CSS с утилитами. В то время как одна сторона разработчиков ненавидит его за многословность в коде пользовательского интерфейса, другая сторона разработчиков любит его за его великолепный DX. Как разработчик, вы настраиваете его один раз в своем проекте и сразу же используете его готовый CSS в HTML. Этому разделению любви и ненависти к CSS, ориентированному на утилиты, может прийти конец с недавним ростом рендеринга на стороне сервера (SSR). В течение нескольких лет CSS-in-JS решения, такие как Styled Components (SC) и Emotion, были преобладающей силой для стилизации современных веб-приложений на основе компонентов. Однако, если производительность в мире SSR является одной из основных целей, CSS-in-JS имеет негативные последствия: увеличение размера пакета (SC - 12,7 кБ, Emotion - 7,9 кБ) и, что более важно, накладные расходы во время выполнения из-за сериализации CSS перед вставкой в DOM.

Поэтому мы можем наблюдать миграцию разработчиков в сторону более дружественных SSR решений, таких как utility-first-CSS (например, Tailwind CSS, UnoCSS) в паре с предварительно определенным UI компонентом (например, DaisyUI), других не менее популярных альтернатив, таких как CSS Modules, или так называемых без ранатаймовых (без компиляции) CSS-in-JS (например, vanilla-extract, linaria, astroturf, compiled).

TypeScript

Эволюция от JavaScript к TypeScript неостановима. В этой большой миграции веб-разработки безопасность типов E2E для фулстек приложений, безусловно, является важной тенденцией. Реализация этой концепции зависит от коммуникационного уровня (API), который необходим для передачи типизированных сущностей (например, тип User, тип BlogPost) от сервера к клиентскому приложению. Обычными подходами в веб-разработке для связи клиент-сервер являются REST и GraphQL. Оба этих языка можно использовать с OpenAPI для REST и GraphQL Code Generator для GraphQL для создания типизированного файла схемы для фронтенд приложения. Однако появилась новая восходящая звезда типобезопасных API под названием tRPC, которая может быть использована в качестве замены REST/GraphQL. Если вы работаете в монорепо TypeScript, где фронтенд и бэкенд совместно используют код, tRPC позволяет экспортировать все типы из бэкенда во фронтенд-приложение без промежуточной генерации типовой схемы. Впоследствии фронтенд может вызывать API бэкенда, просто используя типизированные функции, которые под капотом соединены HTTP для обеспечения фактического взаимодействия между клиентом и сервером. Общая тенденция, безусловно, направлена на использование большего количества таких типобезопасных решений для фулстек приложений, таких как tRPC, Zod, Prisma и TanStack Router, которые обеспечивают типобезопасность приложения.

Инструменты сборки

В React несколько лет доминировал create-react-app (CRA). В свое время это была небольшая революция, поскольку начинающие разработчики получали готовый стартовый проект React без необходимости настраивать Webpack с React. Однако за последний год Webpack довольно быстро устарел. Vite - это новый инструмент в блоке, когда речь идет об одностраничных приложениях (SPA), поскольку он работает со всеми популярными фреймворками (например, React.js) для создания стартового проекта. Разработанный Эваном Ю, создателем Vue.js, он называет себя фронтенд-инструментом нового поколения. Под капотом он получает свою мощь от esbuild, который по сравнению с другими JavaScript бандлерами написан на Go, и поэтому собирает зависимости в 10-100 раз быстрее, чем его конкуренты (например, Webpack). В то время как экосистема Vite процветает благодаря таким дополнениям, как Vitest (альтернатива Jest для тестирования), совсем недавно появились другие конкуренты, такие как Turbopack от Vercel. Turbopack называют преемником Webpack, потому что его создателем является Тобиас Копперс, создатель Webpack. Поскольку Next.js все еще использует Webpack, а Turbopack разработан той же компанией, мы можем ожидать, что Next.js и Turbopack будут идеально сочетаться в будущем.

Разработка с использованием искусственного интеллекта

Заменит ли ИИ в конечном итоге работу разработчика? На этот вопрос пока нет ответа, однако разработка с использованием ИИ стала реальностью в 2022 году. С выходом GitHub Copilot разработчики получили возможность работать в паре с ИИ-программистом в своей любимой IDE. Это так же просто, как написать код (или написать комментарий с указанием того, что вы хотите написать), и GitHub Copilot автоматически заполнит детали реализации в соответствии со своим пониманием. Но на этом все не заканчивается: ChatGPT от OpenAI - это более общая языковая модель, которая также заботится о задачах программирования. Хотя вы можете задавать ChatGPT вопросы в свободной форме, он также способен выполнять задачи по кодированию. Многие разработчики уже заметили, что используют ChatGPT в качестве замены StackOverflow. Во многих ситуациях ChatGPT давал полезные ответы (хотя и не всегда безупречные), когда использовался в качестве замены поисковой системы. Поскольку последнему приходится иметь дело с большим количеством SEO-спама (не только для контента, связанного с разработкой), ChatGPT рассматривается как жизнеспособная альтернатива на данный момент. Для того чтобы правильно формулировать и задавать запросы в системе ChatGPT для получения наиболее точных и информативных ответов, рекомендую прочитать Как написать запрос к ChatGPT. От промпта к результату.

Однако "в настоящее время" - это важный термин. С высоты птичьего полета созданный искусственным интеллектом контент может (и будет) также вредить всемирной паутине. Если раньше созданный вручную SEO-контент уже был проблемой, то теперь никто не мешает кому-то производить больше автоматически генерируемого SEO-контента с помощью ChatGPT. Будет ли ChatGPT в конечном итоге тренироваться на собственном генерируемом контенте?

Ещё

Есть несколько заслуживающих внимания упоминаний, но которые не попали в список трендов: Tauri как альтернатива Electron для настольных приложений, реализованных на JavaScript/CSS/HTML, Playwright как альтернатива Cypress для E2E тестирования, Warp и Fig как терминалы нового поколения, CSS Container Queries как альтернатива CSS Media Queries для отзывчивого дизайна, и, наконец, htmx как обогащенный HTML для создания интерактивных пользовательских интерфейсов без JavaScript.

Сопровождаемость является важным аспектом любой системы. Он определяет, насколько легко система может быть обновлена. Система будет работать оптимально только в том случае, если все компоненты хорошо обслуживаются. Если ваш проект имеет хорошо поддерживаемую архитектуру, разработчики могут легко понять проект и внести точечные изменения, чтобы повысить производительность при одновременном сокращении циклов разработки, тестирования и выпуска. Архитектура проекта является ключевым фактором, определяющим простоту обслуживания компонентов проекта. Многоуровневая архитектура является одной из лучших архитектур для написания поддерживаемых компонентов для UI фреймворков, таких как React. Поэтому в этой статье мы обсудим, как использовать многоуровневую архитектуру для написания простых в обслуживании компонентов на React и каких ошибок следует избегать.

Что такое многоуровневая архитектура и зачем ее использовать?

Многоуровневая архитектура — это шаблон проектирования программного обеспечения, который организует приложение на несколько уровней, каждый из которых имеет определенный набор обязанностей. Эти слои организованы иерархически, при этом уровни более высокого уровня полагаются на слои более низкого уровня. Большинство многоуровневых архитектур имеют три или четыре стандартных уровня. Каждый слой может быть разработан и протестирован независимо в многоуровневой архитектуре, и изменения в одном слое не влияют на другие. Такое разделение позволяет разработчикам создавать организованные, модульные и масштабируемые системы, которые легче поддерживать и обновлять. Кроме того, такой подход позволяет вносить изменения в приложение без необходимости переписывать большие участки кода, снижая риск внесения ошибок или нарушения существующей функциональности. Давайте рассмотрим трехуровневую архитектуру в качестве примера, чтобы увидеть, как она может улучшить процесс разработки.

Трехуровневая архитектура

Вот эти три основных слоя: Презентационный слой (уровень представления, presentation layer) Уровень бизнес-логики (business logic layer, BLL) Уровень доступа к данным (data access layer, DAL) Уровень представления управляет взаимодействием с пользователем и представляет данные пользователю. Этот слой может представлять собой форму веб-интерфейса, десктопного или мобильного приложения. Он взаимодействует с уровнем бизнес-логики для выполнения действий и извлечения данных. Уровень бизнес-логики отвечает за реализацию бизнес-правил и рабочих процессов приложения. Этот уровень должен быть полностью независимым от уровня представления и не иметь представления о пользовательском интерфейсе. Он должен содержать всю логику и алгоритмы приложения и взаимодействовать с уровнем доступа к данным для получения необходимых данных. Уровень доступа к данным отвечает за взаимодействие с источниками данных приложения. Этот уровень отвечает за извлечение и хранение данных и должен быть отделен от уровня бизнес-логики. Он должен включать весь код, связанный с доступом к базе данных, вызовами API и другими внешними источниками данных.

Как использовать трехуровневую архитектуру в React

Давайте теперь рассмотрим, как мы можем применить принцип многоуровневой архитектуры к нашим React приложениям.

Уровень доступа к данным

Этот слой обычно реализуется в виде набора служебных функций (утилит), которые могут быть повторно использованы различными кастомными хуками. Рассмотрим следующую служебную функцию fetchData(), которая используется для получения данных из API.

export default async function fetchData() {
  const response = fetch('https://jsonplaceholder.typicode.com/users/1').then(
    (res) => {
      if (res.ok) return res.json();
      return Promise.reject(res);
    }
  );
  return response;
}

Эту функцию можно использовать на уровне бизнес-логики всякий раз, когда вам нужно получить данные API без написания дублирующегося кода. Вы можете передавать URL-адрес через аргумент и изменять функцию по мере роста проекта. При тестировании вызовов API вы можете вызвать эту функцию с фиктивными данными, чтобы упростить процесс.

Уровень бизнес-логики

Этот слой обычно реализуется в виде набора пользовательских хуков, которые можно повторно использовать в разных компонентах. Рассмотрим следующий пользовательский хук seUserData(), который используется для получения данных о пользователе.

import React from "react";
import fetchData from "../util/fetchData";

const useUserData = () => {
  const [userData, setUserData] = useState([]);
  useEffect(() => {
    fetchData()
      .then((data) => setUserData(data))
      .catch((res) => console.error(res.status));
  }, []);
  return [userData];
};

export default useUserData;

Как видите, здесь вызывается функция fetchData() из слоя доступа к данным. Чтобы сделать этот хук более переиспользуемым, передайте путь URL-адреса в качестве аргумента кастомному хуку и передайте его в функцию fetchData().

Презентационный слой

Уровень представления должен содержать все компоненты пользовательского интерфейса, отвечающие за отрисовку данных и реагирование на действия пользователя в приложении React. В этих компонентах не должно быть бизнес-логики или кода запроса данных. Взглянем на пример компонента UserProfile ниже.

import React from "react";
import useUserData from "./customHooks/useUserData";

const UserProfile = () => {
  const [userData] = useUserData();
  return (
    <div>
      {userData.id ? (
        <div>
          <ul> {userData.name} </ul>
          <ul> {userData.email} </ul>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default UserProfile;

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

Ошибки, которых следует избегать при использовании многоуровневой архитектуры

• Переусложнение — поддерживайте простую и масштабируемую архитектуру и отказывайтесь от использования подходов, которые не соответствуют шаблонам React, таких как подходы на основе наследования.
• Сильная связанность — когда слои плотно связаны, то заменить один, не затрагивая другие, может быть стать сложной задачей. Уменьшите связанность, используя соответствующие шаблоны и методы, такие как внедрение зависимостей и интерфейсы.
• Игнорирование производительности — при неправильной реализации многоуровневая архитектура может повлиять на производительность приложения. При оптимизации архитектуры для повышения производительности учитывайте такие факторы, как разделение кода, отложенная загрузка и кэширование.
• Плохие соглашения об именах — используйте четкие и согласованные соглашения об именах для слоев, компонентов и функций. В противном случае разработчикам будет сложно понять и поддерживать код в долгосрочной перспективе.
• Отсутствие тестирования — каждый слой должен быть тщательно протестирован, чтобы убедиться, что он работает должным образом. Неспособность протестировать каждый слой может привести к ошибкам и другим проблемам в приложении.
• Отсутствие связности — каждый слой должен иметь высокую степень связности. Связность относится к тому, насколько тесно связаны функции и обязанности внутри слоя. Низкая связность может привести к тому, что код будет трудно понять и поддерживать.

Итоги

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