10 Декабря 2019

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

Руководитель отдела frontend разработки Николай о том, почему сайты на фреймворке Nuxt лучше, а разрабатывать их проще

Почему NUXT?

В iMedia Solutions начали работать с Nuxt полтора-два года назад. Nuxt предназначен для упрощения работы на фреймворке Vue, а наши клиенты иногда просили разрабатывать сайт именно на нём. Я был знаком с Vue довольно давно, поэтому овладеть Nuxt не составило особого труда — всего пару дней на чтение документации и можно приступать к работе. Правда, если разработчик не знаком с Vue, то процесс обучения работе на Nuxt может занять дольше времени.



Как Nuxt облегчает жизнь веб-разработчика

Автоматическая генерация страниц. Nuxt выполняет много работы за разработчика. Фреймворк делает так, что JavaScript «отрабатывает» на сервере и собирает для браузера готовые HTML-страницы. Разработчику не нужно самому прописывать и настраивать каждую страницу сайта. Автоматическая генерация не только улучшает индексацию поисковиками, но и значительно увеличивает скорость загрузки страницы. Это хорошо для бизнеса — сайт загружается в два раза быстрее, чем при обычной сборке.

Статистические файлы. В Nuxt прописаны настройки для статистических файлов — например, для картинок. Без фреймворка разработчику пришлось бы прописывать настройки вручную и устанавливать плагины для обработки изображений.

Комфортная работа с метаданными. Такая информация, как названия, описания товаров, open graph-теги (всплывающие подпись и изображение сайта при отправке ссылки на него в мессенджерах), при обычной работе заполняется вручную в шапке сайта. Nuxt позволяет вписать метаданные в один файл. Это удобно.

Использование привычных инструментов. Разработчики привыкли использовать CSS для ускорения. В Nuxt использование СSS прописано изначально — «из коробки». Иногда удобнее стандартный JavaScript писать на более детализированном TypeScript. Nuxt компилирует его в обычный JavaScript. Без этой функции пришлось бы крутить настройки и устанавливать отдельные плагины. На такие подготовительные работы уходит много времени.

Многочисленное и активное коммьюнити. Большое преимущество Nuxt как open-source проекта — это наличие большого сообщества (почти 24 тыс пользователей на GitHub). Всегда можно получить быстрый совет в любой проблемной ситуации. Довольно частая ситуация — ошибки в работе фреймворка при установке сторонних плагинов. Члены сообщества буквально в течение получаса расскажут, как исправить ошибку. Кроме того коммьюнити собственными силами создаёт для Nuxt множество готовых решений.

Чем разработка на Nuxt хороша для заказчика сайта?

СЕО. Если сайт сделан на фреймворке как одностраничный, а остальные страницы прописывает разработчик, то поисковики (Google или Яндекс) не считывают все данные корректно. Автоматическая генерация страниц с помощью Nuxt значительно улучшает индексацию сайта поисковиками. То есть сайт с бОльшей вероятностью попадёт на высокие места в поиске по ключевым запросам.

Масштабируемость. Часто клиент заказывает разработку сайта с ограниченным функционалом и предпочитает улучшать его постепенно. С Nuxt расширение функций сайта делать проще и в разы быстрее.

Оптимизация и скорость. При обновлении страниц фреймворк не загружает одинаковые компоненты, что значительно увеличивает скорость работы сайта — иногда в несколько раз по сравнению с веб-приложением не на базе Nuxt.

Для каких проектов Nuxt подходит лучше всего?

Фреймворк можно использовать для любых сайтов, даже для обычных блогов.

Особенно эффективно Nuxt работает с веб-приложениями с большим количеством динамических данных. Это могут быть сайты с изменяющейся графикой или сообщениями в реальном времени, а также интернет-магазины с описаниями товаров, личными кабинетами и корзинами с покупками. Мы используем Nuxt для разработки почти всех таких проектов с нуля. В некоторых случаях, когда в уже существующий сайт нужно добавить какой-нибудь динамический элемент (например, калькулятор цен), то можно это сделать без Nuxt — при помощи одного фреймворка Vue.

Nuxt позволяет генерировать статические сайты. Это очень удобно: по одной команде «Cгенерировать» фреймворк создаёт уже готовые HTML-страницы. Таким образом создаются, например, многостраничные блоги. Сгенерированные HTML-страницы можно хранить на GitHub Pages и обращаться к ним по мере необходимости.

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

Какие проекты в iMedia уже были созданы с помощью Nuxt?

Их много. Например, портал для грузоперевозок. Это как раз пример сайта с большим объёмом динамических данных. На нём размещены заявки на грузоперевозки, обрабатываются платежи, пользователи обмениваются сообщениями. Кроме интернет-магазинов на Nuxt удобно разрабатывать туристические сайты. Такой опыт у iMedia Solutions тоже есть. Туристические порталы — это сложные приложения с большим количеством данных, личными кабинетами, онлайн-заявками от клиентов.

О росте популярности Nuxt среди белорусских разработчиков

За последние пару лет фреймворк Vue стал очень популярен, и его активно используют. Кто использует Vue, тот рано или поздно обращается и к Nuxt. Поэтому последний тоже увеличивает свою популярность.

Знаю, что в нескольких белорусских веб-студиях его уже активно используют. Всё чаще и в описаниях вакансий веб-разработчиков появляется требование — «знание фреймворка Nuxt».

Другие статьи по теме:
Статья
Google Tag Manager: настройка и ведение

Чтобы начать использование систем веб-аналитики, нужно добавить их скрипты в код своего сайта.

Статья
Требования к хостингу для использования Битрикс

Выбранный вами хостинг должен соответствовать требования, которые представлены ниже.