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, предварительно подготовить для размещения в статической среде или развернуть на бессерверных и пограничных провайдерах.

This entry was posted in Популярное