Год назад я написал статью о моем любимом проекте Metal-Map.com, коллективной карте всех когда-либо существовавших металлических групп. Вы можете спросить, почему я снова пишу статью на те же темы. Дело в том, что я переписал все приложение с нуля, на этот раз используя отличный Vue JS. Поэтому я постараюсь просто обновить информацию и не повторяться.

Итак, обо всем по порядку - back-end, в данном случае API. Я очень мало изменил API. Основное отличие состоит в том, что диапазоны для страны обслуживаются в разбивке на страницы, что означает, что вместо того, чтобы извлекать список из тысяч диапазонов, API теперь обслуживает блоки по 50 диапазонов на запрос. Вы можете себе представить, как эта простая вещь значительно улучшает скорость и UX.

Однако основное отличие заключается в том, что клиентская часть приложения теперь находится на Vue JS. Почему именно Vue? Потому что это круто! Он быстрый, относительно простой в использовании, у него хороший синтаксис и архитектура.

Итак, я взял то, что у меня было в Ractive JS (шаблоны усов), и создал компоненты Vue. Конечно, основная проблема с компонентами во Vue заключается в том, как они будут взаимодействовать друг с другом. В Vue есть стандартный протокол, по которому компоненты и родительские компоненты взаимодействуют друг с другом - например, через props / event-bus или через хранилище (Vuex).

В течение последнего года у меня было несколько проектов, написанных на Vue, и я, как правило, использовал больше подходов props / event-bus, что, вероятно, лучше (просто мнение). Но на этот раз я хотел разместить Vuex в самом центре приложения, потому что если вы внимательно посмотрите на Metal-map.com, вы поймете, что все сосредоточено вокруг карты. Поэтому, чтобы иметь централизованные данные в любой момент, я решил сохранить как можно больше данных и позволить компонентам реагировать на изменения для сохранения. Конечно, это решение вызывает сомнения, и я буду рад обсудить это в комментариях ниже.

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

Помимо vue-axios, vue-router, vuex, я использовал несколько плагинов, которые мне помогли.

Вероятно, самым важным плагином здесь был vue2-google-maps, так как все приложение сосредоточено на нем. Раньше я работал с картами Google с их реализацией JS, и это всегда было довольно хлопотно, но использование этого плагина упростило задачу. Его очень легко настроить, настроить и все правильно структурировать.

Еще один замечательный плагин, который я использовал, - vue-meta. Этот плагин изменяет метаданные, поэтому у вас может быть другой заголовок страницы, метатеги, а также OG-теги для каждой страницы в вашем приложении Vue. Однако сам по себе этот плагин не может решить проблему с совместным доступом, поэтому мне нужно было найти решение, и вы можете прочитать об этом больше в моей предыдущей истории.

Я использовал vue-infinite-loading для последовательной загрузки данных, что действительно увеличило скорость и UX приложения.

Что не видно пользователю, так это аналитика, которая собирается в фоновом режиме. Для этого мне нужно было общаться с Google Analytics, поэтому я добавил плагин vue-analytics. С помощью этого плагина вы можете легко отслеживать события и отправлять их в Google Analytics.

Многие изменения происходят в части приложения, которая полностью невидима для пользователей, - в той части, которая собирает данные. Мне пришлось переписать мой краулер, чтобы он стал еще более эффективным и извлекал больше данных. К сожалению, Encyclopaedia Metallum: The Metal Archives не предоставляет никакого API, поэтому мой поисковый робот должен анализировать HTML-страницы и извлекать данные. Эта задача довольно сложная и требует много времени.

Помимо всего прочего, связанного с кодированием, я решил немного исследовать (для себя) неизведанную территорию, зайдя в Instagram и попытавшись продвигать этот проект с помощью забавных фактов / статистики, которые я могу получить из обширных данных, которые у меня есть. Так что если вы хотите услышать забавные факты о металлических группах, следите за этим проектом в Instagram.

Если вы (как и я) несколько старомодны, то можете подписаться на аккаунт этого проекта в Твиттере, где я опубликую более или менее то же самое.

В общем, мне потребовалось 2–3 дня, чтобы полностью перестроить приложение, добавить несколько новых функций и получить потрясающие вещи. Вот почему Vue JS великолепен, а результат здесь, и вы можете его увидеть.

Спасибо за чтение!