Более года я ежедневно работаю с Nuxt.js.

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

TL;DR

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

Преимущества

  • Исполнитель
  • Состав
  • Сообщество
  • Документация (руководства по тестированию, руководства по развертыванию)
  • Модули (i18n, карта сайта, SVG, Apollo, Axios, PWA, Sentry, GA, GTM)

Предостережения

  • Проблема с общим состоянием (проблема узла)
  • is-https и Heroku (мультидомены i18n, карта сайта)
  • this везде
  • Слабая rx.js поддержка

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

Проект

Прежде всего, я хочу дать небольшое введение в проект.

Год назад, в октябре 2018 года, мой друг рами альсалман (доктор философии по машинному обучению) подошел ко мне и поделился с вами болью от использования в настоящее время веб-сайтов с вакансиями (т. Е. Вы пытаетесь найти программное обеспечение для внутреннего инженера PHP, и вы получите список предложений с Python, C #, ASP.net и т. д.).

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

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

Так родилась идея clusterjobs.de. Я отвечал за веб-приложение и стал техническим директором стартапа, а рами алсалман стал генеральным директором и инженером по поисковой системе машинного обучения.

Почему именно Nuxt?

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

Еще одним важным моментом было наличие SSR, потому что мы хотели, чтобы устойчивое SEO было основным каналом трафика. Наличие PHP на бэкэнде для SSR привело бы к дублированию всех шаблонов и удвоению работы, что мы не могли себе позволить, потому что команда разработчиков - это только я.

Я начал исследовать решения JavaScript SSR, и Nuxt оказался явным победителем. Был основной выпуск 2.0.0 и хорошая документация, и мы решили рискнуть с новой технологией в новом проекте. Итак, мы взяли Nuxt как основу для кластерных заданий.

Развертывание и компакт-диск с Nuxt

Чтобы сэкономить время на развертывании вручную, я потратил пару дней на настройку правильного конвейера GitLab для развертывания приложения на Heroku.

Nuxt docs - отличный ресурс по развертыванию на Heroku. Вот отличная статья о том, как развернуть Vue на Heroku »в конвейере GitLab.
Объедините их вместе - и бум! Вот что у меня есть на данный момент:

Год Развития

После того, как среда была готова, на подготовку MVP и запуск в эксплуатацию ушло примерно 2–3 месяца. После многочисленных итераций и улучшений я до сих пор не жалею о том, что выбрал Nuxt.

Так почему это хорошо? Я подумал о лучших моментах, которые пережил, и вот они:

Представление

Это работоспособно. Несмотря на то, что это полноценный JS-фреймворк, который должен доставлять все файлы библиотеки клиенту, он по-прежнему изо всех сил пытается сделать это наименее опасным способом.

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

Кроме того, webpack для производства расширяется, и вы можете поиграть с ним самостоятельно или использовать конфигурацию по умолчанию, которая сама по себе довольно эффективна.

Структурирование

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

Единственное, что меня раздражало, это то, что Nuxt поощряет вас использовать ~/component/blah-blah виды материалов для импорта по всему приложению.
IDE JetBrains, которая любит всем сердцем, не могла распознать эти пути.

Обходной путь для этого довольно прост:

Сообщество

Сообщество процветает. Огромная благодарность Себастьяну Шопену, который создал сам Nuxt и продолжает управлять им до настоящего момента. Еще одна огромная благодарность основной команде и всем ее участникам за такой замечательный продукт.

Если вы пробовали Nuxt, то, вероятно, знаете эти ресурсы, но я все равно помещу их сюда:

Модули

Это то, что действительно заставляет вас любить Nuxt.

Исходя из такого замечательного сообщества, Nuxt скорректировал модули Vue, новые модули и модули для всего. Нашли какой-нибудь не охваченный вариант использования в Nuxt? Напишите модуль и сделайте его открытым исходным кодом сообщества Nuxt!
Вот список модулей, которые я использовал в производстве:

  • i18n
    Интернационализация, с несколькими доменами для каждого языка, работающими из коробки. Разве это не круто? Языки и отдельные домены имеют решающее значение для SEO и могут значительно улучшить ваше присутствие в списке результатов Google. И здесь вам просто нужно добавить модуль, интегрировать его со своим пользовательским интерфейсом и все.
  • карта сайта
    Очень важная вещь, необходимая для каждого продакт-сайта. Этот модуль сгенерирует карту сайта на основе ваших маршрутов. Вы также можете использовать Axios для запроса вашего API и получения всех динамических маршрутов (или чего угодно).
  • svg
    Используйте SVG во всем приложении, но загружайте их из автоматически сгенерированных спрайтов.
  • apollo
    GraphQL потрясающий
  • pwa
    PWA - это наше будущее. Попробуйте изучить эту тему, если вы еще этого не сделали! Samsung начала показывать приложения PWA в магазине Galaxy.
  • Страж
    Узнайте о проблемах своего пользователя с помощью этого замечательного сервиса, который будет регистрировать все производственные ошибки за вас.
  • GA, GTM
    Необходимое зло для отслеживания производительности вашего приложения.

Предостережения

Конечно, за год работы с Nuxt возникли некоторые проблемы.
Теперь я постараюсь дать контекст для каждой из них и помочь вам избежать их в будущем:

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

Это связано с тем, как работает Node.js. Если у вас есть глобальная переменная, она будет перезаписана при одновременном запросе. Некоторые идеи приведены в этом Вопросе о переполнении стека.

Проблема, с которой я столкнулся, была связана с функцией fetch на моей странице со списком предложений (результаты поиска).

Я делал призыв к действию вроде:

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

Но когда это делается внутри действия, например action - ›commit -› store, то по какой-то причине эти данные смешиваются.

Признаюсь, я не исследовал истинную причину этого - может быть, какой-то глобальный объект хранилища Vuex или что-то в этом роде, но проблема была в том, что
пока мое приложение работало для первого запроса, каждый следующий запрос получил свое состояние. Таким образом, вы можете попасть на страницу с предложениями о работе для разработчиков полного цикла и получить результаты инженера по машинному обучению.

Исправление для этого было:

Итак, действие - ›возврат к выборке -› фиксация - ›состояние. Действие должно возвращать обещание, которое разрешено с правильными данными, которые вы могли бы использовать обратно в функции выборки.

После этого commit вызовы, вероятно, будут ближе к концу fetch, и на странице будут правильные данные, но общая проблема может остаться.

Heroku и is-https

Я размещаю приложение, используя Cloudflare для DNS и Heroku в качестве сервера. Указание домена на Heroku осуществляется через CNAME, что вызывает у меня некоторые проблемы.

Несколько модулей Nuxt (карта сайта, i18n) используют библиотеку is-https для определения на стороне сервера типа запроса. К Cloudflare отправляется запрос по протоколу HTTPS, но проксирование, вероятно, не выполняется. Я получил несколько советов по CMTY по этому поводу.

Включение x-forwarded-proto должно помочь, но я еще не пробовал.

`this` везде

Лично мне нравится писать функциональный код на JS. Это возможно с Nuxt, но все модули заставляют вас использовать this.

Хотите перейти к текущему языку в магазине Vuex или в компоненте? this.app.i18n.locale То же самое касается переключения языкового стандарта и получения списка всех языковых стандартов.

Хотите менять страницы в Vuex? this.router.push

Я могу смириться с этим, но наличие этих объектов в качестве аргумента внутри функций также может улучшить разделение кода.

Rx.js

Мне нравится RX, и я люблю применять его, в частности, к сценариям использования с управлением состоянием.
RX может быть интегрирован во Vue - а также в Nuxt, если мы говорим о событиях DOM. Есть этот пакет.

Чтобы интегрировать его в приложение Nuxt, просто создайте такой плагин:

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

Резюме

В общем, я люблю Nuxt. Я даже подготовил семинар для своих коллег и сделал его пару раз, чтобы распространить знания и побудить их попробовать.

Я считаю, что это очень зрелый и развитый инструмент для любых нужд. Вы можете использовать его для чего угодно, от простых статических целевых страниц и личных веб-сайтов до сложных веб-приложений и платформ электронной коммерции.

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