NuxtJS получил тройку, потерял JS и меняет фронтенд
17 ноября вышла стабильная версия Nuxt 3.0 (теперь без JS) — популярного фреймворка для построения фронтенд-приложений на Vue 3.
Поэтому публикую тут самые важные, на мой взгляд, новые фичи + некоторые мысли насчёт увиденного.
В последнее время уже было под вопросом, кто кого опередит с третьей версией — Себастьян Шопэн (создатель NuxtJS) или Гейб Ньюэлл (папа Half-Life). Шутка ли:
работа над третьей версией Нукста началась около 2.5 лет назад
первая бета вышла практически год назад, в октябре 2021 года
было выпущено 17 релиз-кандидатов
И вот 17 ноября, во время Nuxt Nation (конференция, посвящённая фреймворку — на ней даже выступает Эван Ю!) было торжественно объявлено, что больше никаких критичных изменений API не будет, фреймворк готов к работе на ответственных проектах и адаптации бизнес-пользователями.
Я приведу здесь важные ссылки, после чего расскажу что такое Nuxt вообще и почему выпуск третьей версии на мой взгляд важен не только для любителей Vue, но и для всего фронтенд-сообщества в целом.
Новый вебсайт: Nuxt.com
Ссылка на конференцию: Nuxt Nation 2022
Что вообще такое NuxtJS?
Это небольшое предисловие для начинающих. Если хотите скакнуть к новым фишкам в Nuxt 3 — вам сюда.
Если коротко — это Next.js, но для Vue. А что такое Next?
Зачем нам вообще эти штуки, нам просто Vue и React недостаточно?
Оказывается, недостаточно — Vue и React это просто библиотеки для реактивности данных. Чтобы облегчить нам разработку полноценных приложений — появились «универсальные фреймворки». По сути всё началось с одной прекрасной маленькой идеи:
Делать SPA на Vue/React — здорово.
Делать SSR с Vue/React, чтобы у нас нормально работал SEO — ужасно.
SSR — это когда приложения рендерят страницы на сервере, после чего они отправляются пользователю. Это традиционный подход, которому несколько десятков лет: когда юные веб-разработчики делают своё первое echo "Hello, $username!"; на PHP — это server-side rendering.
Может тогда вебу не доставало динамики на страницах и прикольных UX-переходов, но такие страницы очень любят поисковые движки, а ещё они очень быстро загружаются.
Всё стало труднее, когда мы распробовали Single Page Application и теперь у нас даже CSS в JS. JavaScript отвечал за вывод контента, за его оформление, за динамику на странице. Разработчики столкнулись с двумя проблемами:
Поисковые движки такое не любят: им подавай HTML в чистом виде, чтобы быстренько проглотить и разметить по ключевым словам. Конечно, говорят что Google уже всё умеет рендерить вместе с JS, но тут появляется вторая проблема…
«Ааа, у нас бандл на 10 мегабайт!»: при неумелом пользовании SPA-приложения раздуваются просто невероятным образом. Каждый из нас встречал сайты, на которых крутится колёсико, пока в фоне загружаются огромные куски JS, а всё что тебе нужно — это найти нас странице подходящую марку бетона под фундамент. Вот это уже не любят ни поисковики, ни пользователи.
Это и привело к появлению Некста, а через некоторое время — Нукста. Да, Нукст взял очень много идей от Некста, но разве хорошими идеями нельзя делиться? Нукст в любом случае не занимается просто копированием, это вполне самобытный и развивающийся продукт.
То, что настроить SSR, роутинг и правильно «паковать» приложение — сложно, Эван Ю признавал сам в документации и всех отправлял на сайт Нукста.
NuxtJS (по крайней мере, второй версии) представлял из себя мета-фреймворк — он брал Vue, брал vue-router, брал vuex, держал под капотом express для серверной части, dotenv для конфигураций — и в базовой комплектации давал пользователю:
SSR и SEO из коробки — не думай об этом, просто пропиши тайтлы и мета и вперёд!
Файловый роутинг — ничего не прописывай сам, просто разложи страницы-компоненты по папочкам и папочка-Нукст сам простроит все роуты!
Гидратацию компонентов — это когда пользователь (или веб-краулер) сразу получает контент на странице, а нужный JS подгружается в фоне. Пользователь довольно урчит, краулер довольно моргает лампочками на сервере, все довольны.
А там ещё и автоимпорт компонентов, загрузка данных в хуках на странице, десятки хорошо интегрированных плагинов — и axios тебе, и авторизация с бэкендом Laravel за три строчки и ещё куча всего. С Нукст даже ваша бабушка, если она может написат SFC на Vue, станет классным веб-девелопером.
Однако на этом развитие не останавливается, поэтому Nuxt 3 шагает широко.
Vue 3, Vite, Nuxt — связываем экосистему
К Vue второй версии было много вопросов. Многим не нравилось, что код группируется по хукам жизненного цикла и свойствам, а не по логике. Многие плевались, пытаясь привязать лошадку Vue к стойлу TypeScript.
Эван Ю, спокойный и тихий, переписал практически всю логику, представив Composition API и полную поддержку TypeScript.
Да, про Composition API было много споров. Кто-то громко кричал, что не хочет и не будет этим пользоваться (хотя предыдущий вариант, Options API, никто и не убирал). Кто-то тихонько начал смотреть, что подготовил нам великодушный диктатор Ю и втянулся (ваш покорный слуга в их числе).
Я не буду приводить здесь код — если вы в теме, вы в теме. Если нет и хотите узнать больше — можете заглянуть на эту страничку
Вместе с выпуском третьей версии Vue, Эван также выпустил Vite — новый инструмент, одной из задач которого стало заменить Webpack, упростив и ускорив сборку. Да так выпустил, что Тейлор Отвелл и Джеффри Вэй выкинули из новых версий Ларавеля Laravel Mix.
Laravel — популярнейший фреймворк для PHP. Тэйлор Отвелл — его автор.
Laravel Mix — инструмент, надстройка над вебпаком, которая служит для облегчения конфигурации вебпака обычными людьми. Джеффри Вей — автор этого инструмента и великий учитель программирования. Поддерживал Laravel Mix лет десять.
Vite — просто пришёл и сделал Laravel Mix не нужным. Все новые версии Laravel поставляются просто с Vite.
Мы ещё вернёмся к Laravel, потому что текущая ситуация наводит меня на некоторые мысли.
Ещё Эван переписал state-management с нуля, выкинув Vuex и сделав Pinia.
«Детка, управление состоянием приложения — это просто», словно говорит нам этот ананасик. Да, это официальный логотип нового Vue Store
Ну ладно, Эван провёл титаническую работу, а что же команда Nuxt?
Новое-интересное в Nuxt 3
Полная поддержка TypeScript и Vue 3 (который сам по себе быстрее Vue 2 и потребляет меньше памяти — ссылка на Google Docs)
По дефолту бандлером выступает Vite
Мы теперь можем выбирать не только между SSR и static — там куча гибридных режимов работы приложения
Улучшенный динамический роутинг
Огромное количество плагинов, в том числе и с first-party поддержкой — от авторизации до обработки изображений. Автоматическое подключение плагинов
Новая папка «server», которая может заменить вам весь бэкенд (да-да, вы это уже видели в Next.JS, я знаю)
Новый node-сервер Nitro, о котором много рассказывать, но благодаря которому Nuxt уже приближается к определению фулстек-фреймворка и может работать, как пишут, в любой среде.
И ещё они заменили множество сторонних библиотек самописными решений, которые собраны на unjs.io — там тебе и реализация fetch вместо axios, и своя библиотека для чтения конфигураций, и микросервер для http-запросов вместо express…
Стоп, что? В мире JS кто-то старается свести к минимуму зависимости от других библиотек?
Светлой памяти Чедвика Боузмана
Признаться, меня это удивило. Я давно с интересом наблюдаю, как Laravel старается предложить как можно больше собственных решений, меняя устоявшуюся экосистему PHP — чего стоит только Pest, их новый фреймворк для тестирования. И как они стараются всё меньше полагаться на чужие пакеты (ну, кроме пакетов Symfony конечно).
Понятно, что свой пакет — это свой пакет. Таких пакетов может быть много, но этот — твой. Он удобнее, он понятнее, он лучше ложится в руку. И когда у тебя достаточно ресурсов для поддержания своего маленького зоопарка пакетов в твоей ***Labs (NuxtLabs, Tailwind Labs…) — ты, вероятно, так и сделаешь.
Кстати, заглянув на сайт Next.js, я увидел… TURBOPACK! Vercel (создатели Next.js) наняли разработчика вебпака, чтобы переписать вебпак на расте. И главное не то, что он обходит вебпак по скорости — главное, что он быстрее Vite.
Мы вступаем в интересные времена
Вероятно, Vercel/Next почуствовали угрозу от расширяющейся экосистемы Vue — что же они так всполошились? Раньше вебпак устраивал -, а теперь не устраивает? Раст ведь не вчера появился.
А думается мне вот что — фронтенд меняется. JS меняется. Наконец-то.
Фреймворки теперь большие. То есть они и раньше были большими по кодовой базе, но теперь они как будто остались единственным мужчиной в семье — на них лежит отвественность.
Они приносят деньги, они делают бизнес. От них зависят другие люди, которые делают продукты на основе фреймворков, которые приносят деньги. Им посвещают конференции.
Они приосанились, надели галстук — теперь пожалуйста обращайтесь Nuxt, да, я купил «красивый номер», нет, я не только для ssr, я «intuitive web framework» и даже больше, смотрите, какие контакты в моей визитнице: Стэковерфлоу, Апворк, ТикТок, Озон… так, а это как сюда попало?
Ну, а про Next.js и говорить нечего — чернёное серебро, словно «майбах» проехал. И он будет отвечать Нуксту тем же.
Вдалеке будет гордо стоять Svelte, и все будут изредка ходить ночью прикоснуться к нему.
Мы больше не хватаем пакеты из npm через поиск гугла. Нельзя допустить, чтобы бизнес остановился из-за того, что кто-то удалит пакет из npm (да, больше нельзя) или заразит пакет из npm майнером-стирателем (а вот это вроде можно). Люди получают деньги и готовы вкладывать их, чтобы именно их экосистема считалась самой лучшей, самой удобной, самой надёжной, самой-самой. Мы по прежнему опен-сорс, но каждый у себя в башне.
(Кстати, ситуация, когда один из самых популярных пакетов на NodeJS, на котором завязано много других приложений, много лет поддерживается одним парнем с попугаем на аватарке — мне если честно до сих пор кажется дикой)
Тут я хотел вставить тот комикс из xkcd, но мне кажется картинок и так уже много.
Нет, это не будет стагнацией. Наверное это будет… взрослением? Как вы считаете?
P.S. Также вы можете высказать автору прямо в комментариях что он не прав или что он прав, но слоупок и это было давно понятно всем уже давно.
P.P. S. Хех, как будто вам нужно было на это разрешение, да?
