17 ноября вышла стабильная версия Nuxt 3.0 (теперь без JS) - популярного фреймворка для построения фронтенд-приложений на Vue 3.

Поэтому публикую тут самые важные, на мой взгляд, новые фичи + некоторые мысли насчёт увиденного.

В последнее время уже было под вопросом, кто кого опередит с третьей версией - Себастьян Шопэн (создатель NuxtJS) или Гейб Ньюэлл (папа Half-Life). Шутка ли:

• работа над третьей версией Нукста началась около 2.5 лет назад

• первая бета вышла практически год назад, в октябре 2021 года

• было выпущено 14 релиз-кандидатов

И вот 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, потому что текущая ситуация наводит меня на некоторые мысли.

Ещё команда Vue (в частности github.com/posva) переписала state-management с нуля, выкинув Vuex и сделав Pinia.

Ну ладно, Эван и ребята провели титаническую работу, а что же команда 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. Хех, как будто вам нужно было на это разрешение, да?