Пара слов о преимуществах Vue JS

Относительно молодой, но очень популярный и амбициозный проект Vue JS завоевал доверие тысяч разработчиков по всему миру. В этой статье мы поговорим о том, почему фреймворк набирает обороты, чем он отличается от конкурентов и как начать с ним работать.

Возможно, вы захотите написать свой сайт-визитку, лендинг-пейдж или мини-блог в вёрдпаде на чистых HTML, CSS и JavaScript, однако вы точно не захотите создавать в них веб-приложение. Для проектов с динамическим контентом и, особенно, использующих асинхронный обмен данными с сервером, пользоваться "дедовскими" способами верстки крайне неудобно.

Современные проблемы требуют современных решений

Фронт-энд разработчики решили упростить себе труд, посчитав, сколько работочасов тратится на написание кастомных скриптов создания динамического контента, сколько времени занимает отладка xhr-запросов и сколько текста приходится писать для работы с очередным document.body.getElementsByClassName('pickUp')[0].style.background.

Evan You, cоздатель Vue.js и бывший сотрудник Google, начал разрабатывать фреймвёрк еще в 2013-м году. Проект стал популярным уже через несколько лет после релиза, особенно среди азиатского сообщества, где взяли его на вооружение такие гиганты, как Xiaomi, Alibaba и Baidu. Вторая версия фреймвёрка, ориентированная на производительность, обеспечила отрисовку контента в Virtual DOM, что позволило увеличить скорость работы приложений, написанных на Vue.

Архитектура Model-View-ViewModel

Vue помогает отделить бизнес логику приложения от графической составляющей веб-сайта, и компонентов их связывания воедино. То есть, Vue помогает разложить код "по полочкам", заставляя разработчиков соблюдать четкую структуру проекта.

Компоненты в одном файле

Когда люди пишут в Vue, они используют «компоненты в одном файле». Это файл с суффиксом .vue, состоящий из 3 частей (css, html и JS) для каждого компонента.

Это правильное сочетание технологий. В одном месте легче понять все компоненты. У такого стиля есть побочный эффект – вы сами стараетесь поддерживать краткость компонентов. Если JS, CSS и HTML компонента занимают слишком много строк, может, пора создать больше модулей.

В тег style компонента Vue можно добавить атрибут scoped. Атрибут полностью инкапсулирует стили компонента. То есть если в компоненте есть CSS селектор .name, это правило не будет применяться к другому компоненту. Этот способ стилизации компонентов представления мне нравится больше, чем подходы написания CSS в JS, что сейчас популярно в крупных фреймворках. Еще один плюс компонентов в одном файле заключается в том, что это полностью валидные HTML5 файлы. template, script, style — все эти теги входят в официальную спецификацию w3c. То есть большая часть используемых вами инструментов в процессе разработки (например, линтеры) могут работать по умолчанию с минимальной адаптацией.

Vue как новый jquery

На самом деле эти 2 библиотеки отличаются и выполняю разные задачи. Я представлю ужасную аналогию, но я люблю ей описывать отношения Vue и jQuery: Beatles и Led Zeppelin. Beatles не нуждаются в представлении, это величайшая группа 1960-ых, оказавшая огромное влияние. В 1970-ых отдать титул «самой великой» группы уже сложнее, и это Led Zeppelin. \ Можно сказать, что музыкальная связь между Beatles и Led Zeppelin незначительна, и у них разная музыка, но необходимо принять некий уровень техники и влияния. Возможно, JS мир 2010-ых это как 1970-ые в музыке, а так как Vue чаще «ставят в эфир», то он и привлекает больше фанатов. Философия, которая сделала jQuery популярным, есть и в Vue: простота в обучении и вся мощь создания отличных веб-приложений по современным веб-стандартам. На самом деле, Vue – лишь оболочка вокруг JS объектов.

Простота расширения

Как говорилось ранее, по умолчанию Vue использует стандартный HTML, JS и CSS для создания своих компонентов. Однако вы с легкостью можете подключить другие технологии. Если вам необходимо использовать pug вместо HTML, typescript вместо JS или Sass вместо CSS, вам лишь нужно установить соответствующие модули node и добавить атрибут в соответствующий раздел однофайлового компонента. В проекте даже можно перемешивать и сочетать компоненты. Например, одни компоненты используют HTML, а другие pug, но мне кажется, это не лучшая затея.

Virtual DOM

Virtual DOM используется во многих фреймворках, и это круто. Это значит, что фреймворк может решить, что изменилось в состоянии, а затем эффективно применить обновления DOM, сводя к минимуму повторный рендер и оптимизацию производительности приложения. Сегодня все кому не лень используют Virtual DOM. Пока это не что-то уникальное, это круто.

Vuex

В большинстве приложений сложно управлять состояниями. Эту проблему не решить одной библиотекой представления. В Vue для этого есть библиотека vuex. Она легко настраивается и хорошо интегрируется с Vue. Кто знает Redux, те сразу поймут, что к чему. Но мне кажется, что интеграция Vue и vuex аккуратнее и минималистичнее, чем React и Redux. Совсем скоро JS стандартизирует оператор распространения объектов, с помощью которого можно объединять состояния или функции для управления состоянием из vuex в компонентах, где это необходимо.

Vue CLI

Vue предоставляет отличный CLI, что упрощает начало работы в Vue с Webpack проектами. Одной командой в терминале можно создать все необходимое: компоненты в одном файле, babel, линтинг, тестирование и понятная структура проекта. Мне не хватает в CLI vue build.

Так просто создавать, запускать и тестировать компоненты в браузере. К сожалению, эта команда была удалена из Vue. Сейчас рекомендуется использовать poi. Poi – обертка для Webpack, но это не так просто, как в твите выше.

Разработанная для вас оптимизация повторного рендеринга

В Vue не нужно вручную указывать, какие части DOM необходимо повторно отрендерить. Мне не нравилось управлять компонентами в React. Что-то типа «shouldComponentUpdate», чтобы остановить повторный рендер всего дерева DOM. Vue умнее.

Легко получить помощь

Vue набрал критическую массу разработчиков, использующих фреймворк для создания различных приложений. У него отличная документация. Помощью можно получить по нескольким каналам с множеством активных пользователей: stackoverflow, discord, twitter и т.д. Это придаст вам уверенности при создании приложения и при выборе этого, а не другого фреймворка.

Не поддерживается одной корпорацией

Мне кажется, хорошо, когда у библиотеки с открытым исходным кодом нет одной корпорации, которая может указывать направление ее развития. У Vue не было проблем, как у React с разрешением лицензий (сейчас решены).

В заключение скажу, что Vue – отличный выбор для любого вашего следующего JS проекта. Доступная экосистема намного больше, чем я описал в статье. Если вам нужно что-то типа full-stack, обратите внимание на Nuxt.js. Если хотите повторно используемые стилизованные компоненты, для вас есть Vuetify. Vue был одним из быстрорастущих фреймворков в 2017, и по сей день его рост не прекращается.