Логотип

Логотип взят без спроса с сайта nalichniki.com. Надеемся, что автор простит, особенно с учётом того, что если щёлкнуть на логотипе на главной странице, то как раз попадаем на этот сайт.

Исходные тексты сайта

https://bitbucket.org/budden/ppr. Мы используем не github, а bitbucket, потому что у него есть русскоязычный интерфейс. Да и вообще, мы против монополий.

Постановка задачи

Сайт переделывается для того, чтобы поупражняться в веб-разработке и заодно предоставить публике возможность без труда опробовать наши разработки. На данный момент сайт статический, но мы планируем добавить приложение для работы со словарём терминологии. Формат Google Docs далеко не выглядит удобным, разные вики-движки тоже подходят не лучшим образом.

Используемые технологии

• jquery - популярная библиотека кросс-браузерной совместимости. Использована для реализации "Яроклавы". За основу был взят чужой код, который уже использовал jquery. Многие считают, что jquery устарела.
• bootstrap 3 - набор стилей для адаптивного дизайна. Пока есть сомнения в его качестве, хотя его популярность всё ещё высока.
• node.js - javascript на серверной стороне. Пока мы используем его только для сборки, сам сайт - статический
• webpack - модный сборщик серверной стороны для node.js. Его мы используем для генерации файлов нашего сайта
• vue.js - является модным веб-фреймворком. Пока что его использование скорее разочаровывает. Многие простые вещи он делает сложными. Но в нём есть некоторые очень здравые идеи, прежде всего это идея переиспользуемых однофайловых компонент
• webstorm - среда разработки. В ней я редактирую файлы. Есть подсветка синтаксиса, подсказки, вызов линтеров и т.п. Наладить удалённую отладку серверной части пока не получилось, но и browser://inspect пока устраивает.
• browser://inspect - такой URL в Хроме (и в Яндекс-браузере тоже) открывает средства для отладки серверной части node.js. С его помощью удалось решить проблему маршрутизации файлов .vue с именами в кириллице. Для этого в node_modules/bin/nuxt.cmd поменял строчку запуска node, добавив в неё после слова "node" подстановку %NODE_DEBUG_OPTION%. Далее запускаем сайт так:
  

  set NODE_DEBUG_OPTION=--inspect-brk
  npm run dev
  

О vue.js

Составные части экосистемы vue

Здесь я просто разместил шпаргалку, чтобы разобраться в том, какие составные части экосистемы vue за что отвечают. Будем двигаться сверху вниз по иерархии и давать ссылку на наиболее важную часть документации (или хоть какую-то ссылку).

• nuxt.js - шаблон и набор настроек для создания приложений vue.js. Его смысл в том, что он собирает разные части экосистемы vue.js в единое целое и интегрирует их с webpack. Реализует в уже готовом виде SSR (пре-генерацию динамических страниц на стороне веб-сервера) и генерацию статических сайтов (статические страницы создаются в виде уже готовых веб-страниц). Эти возможности нужны для SEO. С другой стороны, он скрывает от понимания то, какой инструмент отвечает за ту функцию, которая в данный момент используется, поэтому иногда тяжело найти документацию.
• vue-loader - отвечает за обработку однофайловых компонентов, файлов "vue", которые определяют разметку, стиль и поведение одного "компонента" веб-приложения. Например, хлебные крошки на данном сайте реализованы в виде компонента. На самом деле это не очень хорошо, т.к. у нас не одностраничное приложение, соответственно хлебные крошки могут быть сгенерированы статически. К сожалению, по своей идеологии vue не занимается статической генерацией. Вроде бы её можно поддерживать в nuxt с помощью
• vue-router - отвечает за то, по каким путям будут отображаться файлы. В том числе, в рамках nuxt обезпечивает отображение шаблонов из директории ~/pages и ~/static (кто именно отвечает за эту возможность - я не знаю)
• vue.js - я не могу чётко определить, что это. Попробую сказать, что это скрипт, позволяющий создавать многократно используемые веб-компоненты, декларативно сопоставлять элементы пользовательского интерфейса с данными. Но, наверное, такое определение недостаточно точное. Во всяком случае, это центральная часть всей экосистемы.
• vue-head - самая загадочная часть. Похоже, отвечает за поле head в настройках компонента vue. Другая (более официальная) ссылка на описание - здесь: vue-meta
• vue-devtools - плагин для браузера Хром, поддерживающий отладку Vue в браузере.
• npm install http-server - веб-сервер для node.js. Позволяет запускать сгенерированный с помощью npm run generate статический сайт локально. Команда для запуска: node_modules\.bin\http-server.cmd .\dist

Недостатки vue

Всё это - моё скромное мнение неопытного веб-разработчика

• Проблемы с авторизацией. Эту проблему решить не удалось, поэтому приложение словаря будет написано без использования vue. Просмотрев три примера, stack overflow и систему учёта ошибок vue, я так и не смог составить свой удовлетворительно работающий пример авторизации. Суть проблемы сводится к семантике SSR (на сервер не попадает клиентский токен безопасности) и к тому, что после обновления страницы состояние приложения, хранящееся в переменных JS, теряется. Ещё один вариант той же проблемы: рекомендуется безопасный подход подход с httponly cookie, но тогда приложение принципиально не может правильно нарисовать себя на клиенте - оно не может надёжно показать имя пользователя, который залогинен. Это может сделать только сервер.
• Неверно отрезано. Vue в принципе - это фронтенд для одностраничных приложений. Однако к этому добавили SSR и генерацию статических сайтов. Получился гибрид фронтенда и статического шаблонизатора. Но нельзя (или слишком сложно для меня) указать, что "вот этот компонент статический и всегда генерируется только на сервере". Поэтому, даже если я использую генерацию статического сайта и компонент полностью статический (как мои "хлебные крошки"), всё равно он несёт в себе лишний функционал, связанный с возможностью перерендерить его на клиенте. В этом смысле обычные серверные шаблоны проще, легче и удобнее.
• Нет путеводителя. Есть множество частей, из которых состоит приложение nuxt, и часто непонятно, где искать документацию на конкретный элемент конфигурации. Более того, даже существование некоторых библиотек само по себе не так легко осознать. Пример тому - vue-meta/vue-head. Нужна хотя бы обзорная статья, подобная моей шпаргалке, но написанная авторами.
• Мало примеров по nuxt. Если мы знаем, как сделать что-то в vue без nuxt, то нам нужно ещё потрудиться, чтобы сделать то же самое для nuxt в однофайловых компонентах. Может быть, это и тривиально, но в начале освоения это вовсе не тривиально (для меня - до сих пор сложно).