Более года я ежедневно работаю с 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 и
nuxt-community
Модули
Это то, что действительно заставляет вас любить 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. Я даже подготовил семинар для своих коллег и сделал его пару раз, чтобы распространить знания и побудить их попробовать.
Я считаю, что это очень зрелый и развитый инструмент для любых нужд. Вы можете использовать его для чего угодно, от простых статических целевых страниц и личных веб-сайтов до сложных веб-приложений и платформ электронной коммерции.
Я столкнулся с некоторыми оговорками, которые можно было исправить, но у меня также было много замечательных моментов, когда все казалось таким простым и отлично работало. Я искренне верю в эту структуру и глубоко благодарен людям, которые ее создали и продолжают поддерживать.