С самого начала новой эры JavaScript-фреймворков я в основном был на стороне Angular и Cordova — начиная с Angular.js и Ionic v1 и вплоть до нынешних Angular 7 и Ionic 4. Оглядываясь назад, я никогда не чувствовал себя по-настоящему комфортно. с Angular.js. Частично из-за отсутствия у меня опыта — на тот момент я занимался разработкой на JavaScript всего несколько лет, а частично — из-за сложности первоначальной настройки проекта, процедур сборки и развертывания. В последнее время, с такими продвинутыми инструментами, как Node, WebPack, Babel, Lint, TypeScript, VS Code, … веб-разработка, особенно с Angular, с самого начала действительно стала приятным занятием. Мне очень нравится Angular, и я надеюсь, что он останется здесь надолго.
Тем не менее, как мы все знаем, у Angular есть по крайней мере два очень серьезных конкурента — React и Vue.js — и ведутся бесчисленные дискуссии о том, какой из них лучше всего подходит для данного типа проекта. Несмотря на то, что я твердо убежден, что лучше преуспеть в одной области, чем на среднем уровне в нескольких, очевидная популярность (на основе тенденций Google) двух других фреймворков заставляет меня любопытно посмотреть, как на самом деле себя чувствует трава по другую сторону стены. Я уже писал кое-что о своем опыте работы с React некоторое время назад, и во время этих рождественских каникул я наконец-то нашел время поработать и с Vue.js. Сначала я прошел этот курс на Udemy, который мне кажется отличной отправной точкой. После этого я искал небольшой проект, на котором я мог бы проверить свои новые навыки. В последнее время я много боролся с SEO и Angular Universal и посетил несколько митапов, на которых обсуждались эти проблемы в других фреймворках JavaScript. Одна была посвящена Vue.js и Nuxt.js — фреймворку для мобильных, PWA и серверных приложений с рендерингом.
Проект, над которым я работал, — это юридические страницы для платформы SeltronHome, и я собрал такие требования:
- Юридический контент состоит из трех основных страниц (политика конфиденциальности, условия для конечных пользователей и условия для партнеров);
- Юридический контент для каждой страницы предоставляется в структурированном виде (json), с произвольным количеством разделов и подразделов — html-код должен динамически генерироваться на основе предоставленного контента;
- Юридический контент для каждой страницы предоставляется на нескольких языках;
- Нам нужна прямая ссылка на каждую юридическую страницу и для каждого языка;
- Нам нужно быстрое время загрузки и оптимизированный SEO (html, отображаемый на стороне сервера, динамический заголовок страницы и содержимое метатегов).
Я начал с пустого проекта Nuxt.js. Помимо возможностей предварительного рендеринга и рендеринга на стороне сервера, Nuxt также обеспечивает определенный уровень структуры проекта, тем самым приближая Vue.js как «автономный» подход к библиотеке к «фреймворковому» подходу Angular. Несмотря на то, что жертвуя определенным уровнем гибкости, я считаю, что это полезно для более крупных проектов и команд, где разработчики могут понять и начать работать над новым проектом гораздо эффективнее.
Чтобы отображать юридический контент из файлов перевода на нескольких языках («en» и «sl»), я установил пакет npm «nuxt-i18n». Я также добавил модуль «vue-scrollto», чтобы включить внешние ссылки на определенные разделы на странице. Затем я создал несколько повторно используемых компонентов Vue, а именно LegalPage, LegalSection и LegalSubSection. Затем я использовал эти компоненты для создания необходимых html-страниц: «index.vue», «privacy.vue», «terms-customers.vue» и «terms-partners.vue». Мне не нужно было использовать какое-либо промежуточное ПО или функциональность магазина, хотя они также хорошо подготовлены в шаблоне проекта Nuxt.
С этой конфигурацией я смог запустить команду «npm run generate» для предварительного рендеринга html-файлов (каждой страницы для каждого языка). Это создает структуру папок для всех определенных маршрутов (страниц Vue) и языков со статическими файлами html:
- index.html
- /privacy/index.html
- /terms-клиенты/index.html
- /terms-партнеры/index.html
- /sl/index.html
- /sl/конфиденциальность/index.html
- …
Такой проект можно легко развернуть на любом статическом хостинг-провайдере, что означает минимальную стоимость и максимальную производительность. Тем не менее, клиенту всегда предоставляется полноценный html-файл для каждой страницы, что приводит к лучшей скорости загрузки страницы и, в конечном итоге, к лучшему взаимодействию с пользователем.
Последним шагом было улучшение поисковой оптимизации. Добавив конфигурацию метатегов в файл «nuxt.config.js» и на каждую конкретную страницу Vue, я смог включить содержимое динамических метаданных для каждой страницы и языка.
Окончательный результат публикуется на веб-страницах SeltronHome Platform. Я знаю, что это небольшой проект, и в нем нет больших изображений, которые могли бы повлиять на время загрузки, но я считаю, что преимущества подхода с предварительным рендерингом очевидны. Я также смог получить некоторый практический опыт работы с Vue.js. Однако пока я придерживаюсь Angular :).
