Содержание
NuxtJS получил тройку, потерял JS и меняет фронтенд / Хабр
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.
«Детка, управление состоянием приложения — это просто», словно говорит нам этот ананасик. Да, это официальный логотип нового 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. Хех, как будто вам нужно было на это разрешение, да?
Что такое NuxtJS
Назад
Что такое Nuxt.js?
Nuxt.js — это фреймворк для универсальных приложений на Vue.js.
Основной задачей этого фреймворка является рендеринг пользовательского интерфейса в условиях абстракции от клиент-серверной архитектуры.
Наша цель — создать фреймворк настолько гибкий, чтобы его можно было использовать и как основу, и как дополнение к уже существующим проектам на Node.js.
Nuxt.js содержит все необходимые конфигурационные заготовки, позволяющие сделать разработку приложений с серверным рендерингом на Vue.js лёгкой и приятной.
Кроме того, мы также предоставляем другую опцию разработки: nuxt generate. С помощью неё можно статически генерировать приложения на Vue.js. На наш взгляд, эта опция может оказаться следующим большим шагом на пути разработки микросервисных веб-приложений.
Как фреймворк, Nuxt.js привносит множество возможностей, помогающих разработке, таких как: асинхронные данные, middleware, шаблоны и др.
Как это работает
Nuxt.js использует следующие элементы для создания современных веб-приложений:
- Vue 2
- Vue-Router
- Vuex (только при использовании опции store)
- Vue-Meta
Общий размер составляет всего лишь 28kb min+gzip (31kb при использовании vuex).
Под капотом мы используем Webpack с vue-loader и babel-loader для сборки, разделения и минимизации кода.
Возможности
- Написание Vue-файлов
- Автоматическое разделение кода
- Серверный рендеринг
- Мощная система маршрутизации с асинхронными данными
- Обслуживание статических файлов
- Транспиляция ES2015+
- Сборка и минимизация JS & CSS
- Управление элементами в блоке head
- Горячая замена модулей при разработке
- Интеграция c ESLint
- Пре-процессоры: SASS, LESS, Stylus, и др.
Серверный рендеринг
Nuxt.js можно использовать как фреймворк для организации всех этапов рендеринга UI в вашем проекте.
Выполнение команды nuxt запускает сервер разработки, поддерживающий горячую замену модулей и полностью сконфигурированный серверный рендеринг вашего приложения.
Взгляните на документацию имеющихся команд, чтобы узнать больше.
Если же сервер у вас уже есть, Nuxt.js можно включить как middleware — ограничений нет никаких. См. руководство по программному использованию Nuxt.js.
Статическая генерация
Большая инновация Nuxt.js скрыта в команде nuxt generate.
Эта команда генерирует HTML-представление для каждого маршрута и сохраняет их в соответствующие файлы.
Пример:
-| pages/ ----| about.vue ----| index.vue
Будет сгенерировано:
-| dist/ ----| about/ ------| index.html ----| index.html
Таким образом, появляется возможность размещения созданного приложения на статическом хостинге!
Сам данный сайт, сгенерированный статически и размещённый на GitHub Pages, является отличным примером этого подхода:
- Исходный код
- Сгенерированный код
Генерировать HTML вручную при каждом обновлении репозитория документации мы, разумеется, не хотим, так что каждый пуш вызывает лямбда-функцию AWS, которая:
1. Клонирует репозиторий nuxtjs.org
2. Устанавливает зависимости через npm install
3. Вызывает nuxt generate
4. Пушит получившуюся папку dist в ветку gh-pages
Таким образом, у нас теперь есть безсерверное статически-генерируемое веб-приложение 🙂
Неудержимая мысль влечёт нас дальше: представьте интернет-магазин, созданный посредством nuxt generate и размещённый на CDN. Каждый раз, когда товар заканчивается на складе, мы регенерируем приложение, но если во время этого процесса кто-то использует наше приложение — всё будет актуально благодаря запросам к API интернет-магазина. Больше нет нужды во множественных серверах и кешировании!
У вас нет прав для комментирования.
Nuxt: интуитивно понятная веб-инфраструктура
Объявление о выпуске стабильной версии 3.0
Уверенно создавайте свое следующее приложение Vue.js с помощью Nuxt. Фреймворк с открытым исходным кодом под лицензией MIT, который делает веб-разработку простой и мощной.
Начало работыОткрыть на GitHub
Обеспечьте оптимизированный пользовательский интерфейс
То, как пользователь взаимодействует с вашим веб-сайтом и воспринимает его, будет определять ваше влияние. Полезность, простота использования и эффективность являются ключевыми факторами. Nuxt создан с набором функций, которые делают это возможным.
- Fast and Furious
Оптимизирован с разделением кода, встряхиванием деревьев, оптимизированным холодным запуском, предварительной выборкой ссылок, извлечением полезной нагрузки, и это лишь некоторые из них. Быстро по умолчанию, поэтому вы можете сосредоточиться на строительстве.
- Рендеринг по запросу
Определите стратегию рендеринга на уровне маршрута: SSR, SSG, CSR, ISR, ESR, SWR.
Создавайте любой веб-сайт или веб-приложение с учетом оптимизации производительности. - SEO и Web Vitals
Благодаря рендерингу на стороне сервера, формату ESM и оптимизированным изображениям веб-сайты Nuxt индексируются поисковыми системами, а конечные пользователи чувствуют себя приложением.
Нам доверяют компании мирового уровня
Ознакомьтесь с нашим выбором веб-сайтов и приложений, созданных с помощью Nuxt. Нам доверяют компании F-500, креативные агентства и фрилансеры.
Откройте для себя нашу витрину
Ecosia — поисковая система, которая сажает деревья
ecosia.org
Upwork | World’s Work Marketplace
upwork.com
Опыт GitHub с наддувом · Volta
volta.net
Моя типографская суперсила | Шрифты Adobe | Теги Игра
Game.fonts.adobe.com
NBA Rakuten 公式 — NBA の を を や や で で 楽し もう!!
NBA.Rakuten.co.jp
Tiktok для бизнеса: маркетинг EN Tiktok
Tiktok.com
Откройте для себя лучшие сайты 2020 года!
Annual.awwwards.com
Лаборатория реактивного движения НАСА (JPL) — Роботизированное исследование космоса
jpl. nasa.gov
Мероприятие Global Maintenanceers Summit 2021
globalmaintainersummit.github.com
monopo | Креативное агентство из Токио, специализирующееся на дизайне.
monopo.london
Unilever Global: Экологичный образ жизни стал обычным явлением | Unilever
unilever.com
Find A Discord
findadiscord.com
Welcome to Zernonia 🤩
zernonia.com
دهقان پور — نمایندگی مدیران خودرو 350
mvm350.ir
Charlie Joseph
charlie.sh
Расширение возможностей мира для развития технологий с помощью коллективных знаний0003
Ecosia — поисковая система, которая сажает деревья
ecosia. org
Upwork | World’s Work Marketplace
upwork.com
Опыт GitHub с наддувом · Volta
volta.net
Моя типографская суперсила | Шрифты Adobe | Tags Game
Game.fonts.adobe.com
NBA Rakuten 公式 — NBA の を を Live や 動画 で 楽し もう!
NBA.Rakuten.co.jp
Tiktok для бизнеса: маркетинг EN Tiktok
Tiktok. com
Откройте для себя лучшие сайты 2020 года!
Annual.awwwards.com
Лаборатория реактивного движения НАСА (JPL) — Роботизированное исследование космоса
jpl.nasa.gov
Мероприятие Global Maintenanceers Summit 2021
globalmaintainersummit.github.com
monopo | Креативное агентство из Токио, специализирующееся на дизайне.
monopo.london
Unilever Global: Экологичный образ жизни стал обычным явлением | Unilever
unilever.com
Find A Discord
findadiscord.com
Добро пожаловать в Zernonia 🤩
Zernonia.com
دهقان پور — نمایندگی гать مدیران خودرو 350
MVM350.IR
Чарли Джозеф
. .co
Всемирная паутина доверяет
Их мнения ценны и ими стоит поделиться со всеми.
-
Nuxt предлагает убедительное решение и отличную экосистему, которые помогут вам выпускать полнофункциональные приложения Vue, которые являются производительными и оптимизированными для SEO. Вишенкой на торте является возможность выбора между SSR и SSG.
Эван ЮСоздатель VueJS
-
Nuxt обладает выдающейся производительностью, опытом и производительностью разработчика прямо с порога!
Так много внимания уделяется деталям, что у команд всегда под рукой все необходимое для продуктивного создания всевозможных приложений.Sarah DrasnerCore Команда Vue.js
-
Nuxt — отличный выбор для команд, разрабатывающих веб-продукт промышленного уровня. Он направлен на внедрение лучших практик производительности при сохранении отличного Vue.js DX.
Эдди Османи, главный инженер Chrome
Доставка быстрее с модулями Nuxt
Nuxt создан с надежной системой плагинов. Интеграция с популярными библиотеками CMS или пользовательского интерфейса с помощью одной строки кода. Модули Nuxt с более чем 15 миллионами загрузок в месяц и 1 000 участников станут вашими повседневными компаньонами.
Изучите модули Nuxt
Сообщество веб-разработчиков
Nuxt состоит из веб-разработчиков со всего мира, которым нравится создавать красивые пользовательские интерфейсы с помощью Vue.js.
- 56M
npm downloads
- 20k
Discord members
- 55k
GitHub stars
- 76k
Twitter followers
A solution to cover all your needs
Developers deserve solutions as well designed as non- технические люди. Наша цель — дать разработчикам Vue возможность уверенно выпускать отличное программное обеспечение.
Откройте для себя наши решения
НАЧАЛО РАБОТЫ
Начните свое путешествие с Nuxt
Узнайте все, что вам нужно знать, от новичка до мастера.
Начало работыИзучить примеры
Введение · Начало работы с Nuxt
Nuxt предоставляет функции внешнего и внутреннего интерфейса, поэтому вы можете сосредоточиться на самом важном: создании веб-приложения.
Чтобы понять, что такое Nuxt, нам нужно понять, что нам нужно для создания современного приложения:
-
Фреймворк JavaScript
Фреймворк JavaScript для обеспечения реактивности и веб-компонентов, мы выбрали Vue.js.
-
Webpack и Vite
Упаковщик для поддержки горячей замены модулей при разработке и объединения вашего кода для производства. Мы поддерживаем как Webpack 5, так и Vite.
-
Последний синтаксис JavaScript
Транспилятор для написания последнего синтаксиса JavaScript при поддержке устаревших браузеров, для этого мы используем esbuild.
-
Серверная сторона
Сервер для обслуживания вашего приложения в процессе разработки, а также для поддержки рендеринга на стороне сервера или маршрутов API. Nuxt использует h4 для универсальности развертывания, такой как бессерверное, рабочее, Node.js и непревзойденной производительности.
-
Библиотека маршрутизации
Библиотека маршрутизации для управления навигацией на стороне клиента, мы выбрали vue-router.
Это только вершина айсберга, представьте, что вам нужно настроить все это для вашего проекта, заставить его работать, а затем поддерживать его в течение долгого времени. Мы занимаемся этим с октября 2016 года, настраивая все конфигурации, чтобы обеспечить наилучшую оптимизацию и производительность для любого приложения Vue.
Nuxt позаботится об этом и предоставляет функции внешнего и внутреннего интерфейса, чтобы вы могли сосредоточиться на том, что важно: создание вашего веб-приложения .
Механизм просмотра
Nuxt использует Vue.js в качестве механизма просмотра. Все возможности Vue 3 доступны в Nuxt. Вы можете прочитать о деталях интеграции Vue с Nuxt в разделе «Ключевые концепции».
Автоматизация и соглашения
Nuxt использует соглашения и продуманную структуру каталогов для автоматизации повторяющихся задач и позволяет разработчикам сосредоточиться на том, что действительно важно. Файл конфигурации по-прежнему может настраивать и переопределять поведение по умолчанию.
- Автоматический импорт
- Маршрутизация файловой системы и уровень API
- Утилиты для извлечения данных
- Поддержка TypeScript без конфигурации
- Настроенные инструменты сборки
Узнайте больше в разделе «Ключевые понятия».
Режимы рендеринга
Nuxt предлагает различные режимы рендеринга для различных вариантов использования:
- Универсальный рендеринг (рендеринг и гидратация на стороне сервера)
- Рендеринг только на стороне клиента
- Создание полного статического сайта
- Гибридный рендеринг (стратегия кэширования по маршрутам)
Узнайте больше о режимах рендеринга Nuxt.
Серверный движок
Серверный движок Nuxt Nitro открывает новые возможности полного стека.
В процессе разработки он использует рабочие процессы Rollup и Node.js для кода вашего сервера и изоляции контекста. Он также генерирует API вашего сервера, считывая файлы в server/api/
и промежуточное ПО сервера из server/middleware/
.
В процессе производства Nitro объединяет ваше приложение и сервер в один универсальный .выходной каталог
. Этот вывод легкий: минимизирован и удален из любых модулей Node.js (кроме полифиллов). Вы можете развернуть этот вывод в любой системе, поддерживающей JavaScript, из Node.js, Serverless, Workers, рендеринга на стороне Edge или чисто статического.
Узнайте больше о серверном движке Nuxt.
Готов к производству
Приложение Nuxt можно развернуть на сервере Node или Deno, предварительно подготовить для размещения в статической среде или развернуть на бессерверных и пограничных провайдерах.