Nuxt.js: 28 килобайт пользы для веб-разработчика

В эту пятницу на Хабре я прочитал вводную статью ^[1] про Nuxt.js, но в комментариях резюмировали, что маловато будет. Так случилось, что мы в Voximplant используем эту штуку и она приносит большую пользу. Под катом я расскажу про «киллер фичу» этого микро-фреймворка и где он может пригодиться.

Что такое Nuxt.js? Кратко и для программеров

Это надстройка над Webpack. Все, что делает Nuxt — это конфигурирует Webpack таким образом, что тот ищет определенные файлы в определенных директориях, использует преконфигурированные библиотеки и собирает одностраничное приложение.

Зачем это нужно, если можно взять «голый» Vue.js, «голый» Webpack, написать несколько строчек конфигурации и на выходе тоже получить одностраничное приложение? По той простой причине, что на выходе мы не получим никакого приложения. Мы получим здоровый кусок JavaScript, который, если его каким-то образом добавить в веб страницу, создаст там интерфейс с помощью Vue. Откуда берется эта страница, как туда попадет JavaScript — это нам нужно будет делать самим. А еще нам нужно будет конфигурировать работу с картинками и css, добавлять и настраивать роутер, что-нибудь для управления состоянием и так далее. В общем, не на пару минут задача.

Nuxt делает за нас довольно много. Достаточно поместить в директорию «pages» файл «index.vue» с компонентом — и у нас готово одностраничное приложение. Которое можно запустить в отладочном режиме командой «nuxt» и открыть на «localhost». Почти то же самое может «голый» Vue с Webpack, но даже в таком минимальном примере Nuxt уже начинает помогать нам «под капотом»: из коробки включен Hot Reloading, для страниц настроены кодировки, заголовки и все прочее.

Полезные мелочи

Отладочное «Hello world» на Nuxt мало отличается от него же на «голом» Vue плюс Webpack. Польза увеличивается по мере того, как проект перестает быть hello world и обрастает страницами с кодом. Все, что делает Nuxt, можно самому реализовать в несколько строк, но несколько десятков раз по нескольку строк кода, плюс отладка — это не так мало времени, как кажется. Какую пользу приносит Nuxt:

1. Routing

В проекте уже настроен vue-router ^[2], все что нужно — это поместить .vue-файлы в корневую директорю проекта. Каждый файл будет доступен в дев сервере по url, соответствующему его имени, то есть «pages/foo.vue» будет отдаваться как «localhost ^[3]:3000/foo». Для прода, как и положено с vue-router, все это превратится либо в хеши, либо нужно будет настроить сервер отдавать приложние с любого url.

Из коробки поддерживаются динамические пути: поддиректории и файлы, начинающиеся с подчеркивания, будут обслуживать страницы с любыми строками вместо подчеркнутых элементов, а значение этих строк будут переданы компонентам. Например, компонент «pages/objects/_id.vue» будет отображать и «localhost/objects/100 ^[4]» и «localhost/objects/bar ^[5]». Что именно отображается, доступно внутри компонента через $route.params, это делает vue-router. А Nuxt добавляет еще метод validate, с помощью которого компонент может проверить валидность переданного ему пути.

2. Работа со статикой

Nuxt конфигурирует Webpack искать изображения и другую статику в корневой директории «assets» и во время сборки складывает в специальную директорию "_nuxt", откуда это все будет забирать веб-страница. Из кода статика доступна с помощью альяса "~assets", Nuxt конфигурирует Webpack, чтобы "~" указывало на корень проекта.

3. Работа с мета-информацией

Создаваемые Nuxt HTML-страницы полностью конфигурируемы разработчиком: с помощью nuxt.config.js можно задать название страницы, мета информацию, подключить дополнительные стили, шрифты и так далее. Удобно, что это все делается в одну строку кода:

4. ES2017 из коробки

Одна из фичей Vue — возможность использовать «single file components» с почти любыми языками для шаблона, стилей и кода. Обычно я использую PUG для рисования HTML, Stylus для модульных стилей (да, как старый питонист я люблю отступы) и TypeScript для кода. В проекте Nuxt это точно так же настраивается, но JavaScript «из коробки» транспайлится с помощью Babel из синтаксиса ES2017. Что очень удобно для большинства мелких задач.

И, наконец, киллер фича

Все описанное выше не тянет на использование еще одной технологии. По-хорошему, это вопрос собственного шаблона для vue-cli с теми настройками Webpack и структурой папок, которые вы предпочитаете. Но есть у Nuxt одна фишка, которая делает его использование более чем целесообразным. Встречайте: nuxt generate!

Эта команда делает Server Side Rendering «из коробки». После ее выполнения мы получим директорию «dist», в который будут лежать «index.html» и та самая директория "_nuxt" со сгенерированными изображениями, css, джаваскриптом — в общем, всем тем, что нужно для нашего сайта. И это все статика. То есть можно раздавать с CDN или выкладывать на GitHub Pages.

Server Side Rendering — непростая в конфигурировании штука. В отличие от мелких удобств, которые предлагает Nuxt, правильно настроить SSR – это вопрос отнюдь не одного часа. А Webpack простой только для простых проектов, SSR к таким не относится. Nuxt делает все за нас — правильные настройки, правильные плагины, разбиение кода на подгружаемые модули и много всего еще. HTML-страница со стилями и изображениями грузится с CDN очень быстро, после чего неторопливо забирает JavaScript и выполяет его. При выполнении кода происходит процесс «дегидрации»: Vue, построив в памяти дерево компонентов, изучает имеющийся DOM из HTML, видит, что тот соответствует имеющимся компонентам, ничего не меняет и приложение просто «оживает». Как раз за те одну-две секунды, которые нужны пользователю, чтобы захотеть куда-то кликнуть.

Где применим Nuxt

Мы используем его для быстрого прототипизирования интерфейсов: вообще, ничего лишнего, настроенный Hot Reloading, результаты можно за несколько секунд переложить в GitLab Pages (у нас локальный GitLab с CI, очень удобно) и кому-нибудь показать.

Nuxt очень хорош для страниц проектов на GitHub и GitLab — в отличие от Jekyll и других статических генераторов вы используете полноценный фреймворк Vue, у вас есть JavaScript, роутинг — можете хоть аналог Photoshop сделать и раздавать его с GitHub Pages или CloudFlare.

Сами авторы намекают, что Nuxt можно использовать для ускорения проектов, где чтение информации более часто, чем ее изменение. Возьмем, к примеру, главную Хабра. Ее можно генерировать Nuxt и отдавать мгновенно. А в фоне постоянно пересобирать статику, чтобы раз в несколько секунд обновлялись статьи, комментарии и прочая «динамическая» информация. Nuxt позволяет сконфиругировать генератор статики для динамических путей: вы отгружаете ему список элементов, а он создает столько отдельных html-файлов, сколько нужно. Да, статика для интерент-магазина с миллионом товаров будет генериться полчаса. Но ведь и товары добавляются туда не каждую минуту! Зато страницы будут отдаваться мгновенно. Любому количеству пользователей, если использовать CDN. Ситуация «сервер не справился с нагрузкой» просто перестанет быть. Ну, за исключением backend, конечно. Но там своя атмосфера.

Картинка для привлечения внимания взята с сайта vitaminius.ru

Автор: eyeofhell

Источник ^[6]