Vue.js — второе дыхание многостраничных приложений.

Каждый раз, когда мы начинаем работу над новым проектом, встает вопрос — SPA или Multipage. Оба подхода имеют свои плюсы и минусы. В These Guys мы придерживаемся lean-методологии и стараемся избегать accidental complexity, особенно на ранних этапах.

Для разработки MVP мы предпочитаем Ruby on Rails, потому что он позволяет развернуть онлайн-сервис в кратчайшие сроки. В большинстве случаев клиентские задачи могут быть решены в рамках Rails-way как многостраничное приложение. И как показывает наш опыт, на создание такого приложения уходит до 50% меньше времени, чем SPA.

В олдскульных Rails-приложениях клиентская логика реализовывалась при помощи jQuery, а изменение состояния интерфейса, в основном, происходило синхронно после отправки формы или перехода по ссылке. Современные приложения используют все больше и больше логики на клиенте, и если ее держать в jQuery, то код быстро превращается в кошмар — эту историю мы уже знаем.

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

Я обратил внимание на трендовый фрэймворк Vue.js. Его было несложно освоить после React.js, ведь основные принципы достаточно схожи. Но с самого начала Vue использовал шаблоны в строках и mustache interpolation. Это может выглядеть как минус на фоне бенефитов JSX, однако за этим скрывается огромное преимущество: мы можем использовать уже отрендеренный в DOM элемент как шаблон для Vue-компонента, найдя его по селектору. Таким образом, мы получим хорошо организованную Javascript-логику интерактивных компонентов страницы (прощайте, jQuery-макароны), сервер-сайд рендеринг по умолчанию и простоту разработки.

Давайте рассмотрим элементарный пример:

Пример на Github Pages.

Что произошло?

  • Сначала мы видим строку, отрендеренную на сервере.
  • Потом, когда Vue инициализируется, она заменяется данными из JS.
  • Следом по setTimeout происходит изменение данных, и вьюха перерисовывается.

Подводные камни

Первый вопрос, который возникает при данном подходе: откуда взять актуальные данные при инициализации Vue? Лучший вариант — вставить данные на страницу инлайном. Это позволит избежать дополнительного запроса к серверу.

Также хорошей практикой является хранение в объекте Data сырых данных и интерполяция в шаблон при помощи computed props.

Наверняка вы захотите использовать code splitting фичу Вебпака, ведь это поможет исполнять на странице код только тех компонентов, которые на ней присутствуют. Для интеграции Вебпака с рельсами есть гем webpacked, а его хелперы webpacked_entry помогут решить эту задачу.

Таким образом, вьюха может иметь следующий вид:

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

P.S. Данный юзкейс не является типовым для Vue. Этот фреймворк очень гибкий, и стоит посмотреть более классические примеры использования.

P.S.S. Это моя первая статья. Если тема будет интересна, я обязательно добавлю больше примеров.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.