«Как вы создаете приложения React?» Это вопрос, который часто возникает у разработчиков приложений, когда они начинают новые проекты. Люди склонны тяготеть к тому, что они знают, но правильный ли это выбор? И как сегодня с таким количеством вариантов узнать, какой правильный выбор?
Хотя многие из нас начали свое путешествие в React с помощью инструмента Create React App, лучшие дни уже позади. Пришло время оценить новые инструменты. В этом сообщении в блоге рассказывается, почему пришло время выйти за рамки создания приложения React, и рассказывается о новых инструментах, включая Next.js и Vite, которые могут помочь вам лучше создавать приложения React.
Ограничения создания приложения React
Создать приложение React было разработано с одной целью: предоставить доступный способ для любого, у кого есть терминал, создать приложение React. Инструмент с открытым исходным кодом идеально подходил для изучения или знакомства с React.
Преимущество этого инструмента заключалось в том, что разработчики могли сразу приступить к разработке без необходимости изучать сложные инструменты сборки, такие как webpack, или настраивать множество инструментов, таких как Babel, ESlint или TypeScript.
«[Создать приложение React] было намеренно минимальным и ограниченным по объему (без конфигурации, без системы плагинов) по двум причинам. Одна из причин заключалась в том, что чем больше функций, тем сложнее будет обновление. Другая причина заключалась в том, что я знал, что сам React займет большую часть нашего времени, и я не смогу время от времени посвящать CRA больше нескольких недель».
~ Создать соавтор приложения React
Из-за этой ненужной необходимости изучать инструменты разработчики пропускали изучение базовых инструментов, на которых так сильно строились их приложения, в результате чего они стали полагаться на этот подход без настройки. Эта проблема становится очевидной, когда командам необходимо вырваться из сети безопасности, которую предоставляет CRA.
Разработчики CRA знали, что им в конечном итоге потребуется включить функции, выходящие за рамки предоставленного набора функций, поэтому они создали кнопку извлечь для команд. Функция извлечения удалила зависимость от react-scripts и скопировала моментальный снимок, актуальную версию файлов конфигурации, используемых в проекте. Моментальные версии этих сложных файлов конфигурации в сочетании с отсутствием индивидуальных знаний об инструментах заставляли проекты либо останавливать свои обновления, либо вводить беспорядочные обновления, когда это необходимо. CRA даже предлагает разветвить react-scripts вместо извлечения для несколько более простых обновлений, но это также может быть сложной задачей в зависимости от вашего варианта использования или знакомства с инструментами.
Таким образом, вместо того, чтобы полностью управлять этими файлами конфигурации, команды стали использовать такие инструменты, как Craco, для переопределения конфигураций. Эти инструменты также имеют свои ограничения: они не обновлялись так быстро, как CRA, поэтому внедрение новых функций всегда отставало, и они добавляли дополнительный уровень сложности к существующим инструментам за счет переопределений и дополнительных инструментов.
«На самом деле CRA по своей природе очень ограничен. Он не следует рекомендациям по производительности, поскольку создает приложения только на стороне клиента. Это означает, что он не выигрывает от оптимизации, которая сегодня является обычным явлением для других фреймворков, таких как статическая генерация или рендеринг на стороне сервера. Если не будет радикального редизайна, он не получит преимуществ от перспективных функций, таких как серверные компоненты. Поэтому, если вы заботитесь об обеспечении наилучшего пользовательского опыта, я не думаю, что CRA — это правильный инструмент в первую очередь. У него есть свои варианты использования, но теперь существует множество других инструментов, которые лучше справляются с этой задачей. CRA по-прежнему отлично подходит для начального варианта использования, но вы не должны рассматривать его как лучшую настройку приложения React. Это не так и не должно быть».
~ Создать соавтор приложения React
Все еще не убеждены, что нужно отказаться от приложения Create React? Даже React Docs больше не рекомендует Create React App для начальной загрузки нового проекта.
Next.js как альтернатива Create React App
Next.js, как и приложение Create React, представляет собой фреймворк без/низкой конфигурации, позволяющий быстро запустить и запустить проект с помощью React. Next.js предлагает более широкий набор функций и возможность изначально переопределять конфигурации инструментов сборки в зависимости от ваших потребностей.
Преимущества Next.js
React изначально отображает контент в браузере посредством рендеринга на стороне клиента. Это означает, что конечный пользователь загружает все ресурсы и код, необходимые браузеру для преобразования кода React в собственный вывод DOM для отображения в браузере. Next.js, с другой стороны, позволяет использовать как рендеринг на стороне клиента, так и рендеринг на стороне сервера, что означает, что сервер интерпретирует код и создает элементы DOM, необходимые для отображения в браузере.
Используя рендеринг на стороне сервера (SSR), сервер может оптимизировать доставку фрагментов JavaScript, CSS и других ресурсов, чтобы браузер мог отображать результаты быстрее при начальной загрузке. Я не буду тратить время на погружение в нюансы этого, так как многие другие люди уже сделали это. Если вам интересно, ознакомьтесь с этой статьей, демонстрирующей сравнение различий в производительности CRA и Next.js.
В дополнение к SSR, Next.js предоставляет дополнительные параметры для выборки данных, предоставляя альтернативные варианты рендеринга в зависимости от варианта использования приложения.
Next.js обеспечивает встроенную поддержку TypeScript, требующую подхода с нулевой конфигурацией для использования TypeScript в ваших проектах. Next.js также включает встроенный маршрутизатор без необходимости включать дополнительные библиотеки, такие как React Router. В целом, существует длинный список функций, предоставляемых Next.js, таких как:
- оптимизация изображений и шрифтов
- встроенная поддержка CSS
- построить кэширование
- настройка линтера
- поддержка страницы и макета
Обязательно посетите страницу документации Next.js, чтобы узнать больше.
Теперь вы можете подумать про себя: «Кажется, Next.js не решает проблему, связанную с тем, что команда разработчиков не изучает набор инструментов, на котором построено приложение». И, вы правы.
Несмотря на то, что Next.js предоставляет дополнительные параметры конфигурации и возможность переопределить большую часть используемых инструментов, он по-прежнему маскирует сложность базовой цепочки инструментов. Во многих случаях это приемлемо, потому что вы можете получить доступ к инструментам для модификации, если это необходимо, и при этом не воссоздавать колесо каждый раз, когда вы хотите сделать что-то относительно простое.
Недостатки Next.js
- Next.js имеет относительно плохую экосистему плагинов.
- Настройка маршрутизации может быть сложной
- Чрезвычайно самоуверен (также может быть преимуществом)
Сверните свое собственное с Vite
А как насчет того, чтобы прокатиться самостоятельно? Большинство людей, которые когда-либо использовали только CRA, Next.js или подобные инструменты, подумают, что это слишком много работы. В прошлом обычно требовалось немного знаний о webpack, так что вы не ошиблись. Но инструменты прошли долгий путь, и такие инструменты, как Parcel, NX и Razzle, упростили процесс. Еще недавно Vite завоевала все большую долю рынка.
"Почему?" Вы можете спросить. Vite построен на основе esbuild, сборщика для Интернета на основе Go, который в 10–100 раз быстрее, чем другие сборщики, такие как webpack. Vite также не зависит от платформы, поэтому вы можете изучить этот инструмент и использовать его для многих приложений.
У Vite отличная экосистема плагинов, потому что он использует тот же интерфейс плагинов, что и Rollup, что означает, что большинство плагинов Rollup также совместимы с Vite. Руководство Vite предлагает больше причин, по которым вы можете захотеть проверить Vite.
У него также есть хороший инструмент create-vite, который помогает в создании проекта с использованием набора предопределенных шаблонов, как это делает CRA. На момент написания этой статьи в настоящее время поддерживаются следующие шаблоны:
- ваниль
- ваниль-тс
- вью
- vue-ts
- реагировать
- реакция-тс
- реагировать-swc
- реагировать-swc-ts
- действовать заранее
- preact-ts
- горит
- лит-тс
- стройный
- стройный-тс
Vite не совсем работает самостоятельно, но становится намного ближе к цепочке инструментов, чем предыдущие варианты.
Другие альтернативы?
Очевидно, что существует множество других доступных вариантов помимо перечисленных выше, но я хотел продемонстрировать естественное развитие, которое разработчики могут использовать в рамках экосистемы React. Ниже приведены некоторые ссылки на дополнительные популярные опции, которые другие разработчики используют для создания и объединения своих приложений React:
- Посылка: гордится подходом с нулевой конфигурацией.
- Nx: наиболее известен как набор инструментов монорепозитория с обширной экосистемой плагинов.
- Razzle: я никогда не использовал его лично, но, судя по тому, что я могу сказать, это попытка улучшить концепцию создания приложения React, включая CSR / SSR, а также хорошо работающую с библиотеками, отличными от React.
- Гэтсби: отлично справляется с созданием статических сайтов и использует GraphQL для управления данными.
Что дальше?
Приятно видеть так много вариантов, доступных как для новых, так и для старых разработчиков. Кажется, что каждые несколько месяцев в пространстве появляется еще один игрок, стремящийся бросить вызов и разрушить экосистему React. Из-за этого постоянно меняющегося ландшафта лучше не тратить слишком много времени и ресурсов на один инструмент, а вместо этого полагаться на экспертов в сообществах, таких как Next, Parcel и т. д., для несколько самоуверенного подхода к решению подобных проблем.
Заглядывая вперед, некоторые другие проекты, которые я считаю, имеют действительно большой потенциал в подходе, который они используют для упрощения набора инструментов, — это Remix и Astro.
- Remix: веб-фреймворк, созданный с учетом веб-стандартов и прогрессивного улучшения. Посетите их страницу проекта для получения дополнительной информации.
- Astro: это веб-фреймворк, который поощряет использование островной архитектуры и более подробную информацию о проверке их страницы проекта.
