В этой статье обсуждаются причины, по которым вы можете захотеть рассмотреть возможность использования Vue в качестве внешней среды для вашего следующего проекта.
Компонентные JavaScript-фреймворки в настоящее время доминируют в фронтенд-разработке.
На данный момент в этом пространстве есть три основных игрока: Angular, React и Vue.
Vue определенно является Дэвидом для Голиафов Angular и React - этих двоих поддерживают Google и Facebook - но, как и в старинной басне, я подозреваю, что Vue превзойдет все шансы и выйдет на первое место, когда дело доходит до популярности среди разработчиков и доли мнений. .
В этой статье рассматриваются некоторые причины, по которым вы могли бы рассмотреть возможность использования Vue в качестве внешней среды вашего следующего проекта.
Низкий барьер для входа
Несомненно, это должна быть причина номер один, по которой Vue должен быть на вашем радаре. Vue - удивительно доступный фреймворк.
Разработчикам не нужно изучать что-то новое, чтобы начать его использовать, а компоненты разбиты на простые для понимания разделы в их собственных файлах.
Каждый раздел написан на языке, который веб-разработчики уже понимают; шаблоны написаны на HTML с добавлением нескольких специфических атрибутов Vue, логика компонентов написана на стандартном JavaScript, а стиль достигается с помощью CSS или любого другого языка препроцессора, который вы хотите использовать, будь то scss, less, стилус и т. д.
В отличие от других фреймворков, здесь нет странного синтаксиса для изучения, такого как JSX, и найти определенные части компонента легко благодаря логической структуре.
Структура компонента обнажена, вам не нужно продираться через множество функций рендеринга JavaScript, чтобы найти то, что вы ищете.
Некоторые могут предположить, что «низкий барьер для входа» должен означать, что Vue не такой мощный или выразительный, как React или Angular, как будто сложность или использование захватывающих языков, таких как JSX или TypeScript, каким-то образом добавляет полезности фреймворкам. Но они ошибаются.
Во-первых, Vue не ограничивается Javascript и HTML, он также может в полной мере использовать TypeScript или JSX, просто это не настройка по умолчанию.
Во-вторых, принципы проектирования, лежащие в основе React и Angular - реактивные компоненты, однонаправленный поток данных, управление состоянием и т. Д. - также лежат в основе Vue. Просто у Vue дьявольски простой API и фантастический компилятор, который предоставляет простой и понятный интерфейс разработчикам, использующим его.
В разработке Vue есть небольшая «выпуклость», она прямолинейна, проста и чиста, и именно поэтому ее так приятно использовать.
Постепенное усыновление
Если перед вами стоит незавидная задача по модернизации устаревшего кода, вам понравится этот кусочек!
JavaScript уже несколько раз был в блоке и менял свой стиль чаще, чем Дэвид Боуи.
Излишне говорить, что существует чертовски много унаследованного кода, и этот код часто напоминает клубок строк, на который напали котята и который склеен с помощью jQuery. Хотя заманчиво просто собрать все в кучу и начать с нуля, это редко бывает хорошей идеей.
Vue - это гибкий фреймворк. Он не пытается быть королем замка, он вполне доволен путаницей с другим кодом, написанным в разных стилях и в разных фреймворках.
Хотя вы немного потеряете чистоту кода, Vue можно использовать как любую другую библиотеку. Ему не нужны Babel, Webpack или что-то в этом роде, его можно включить прямо из CDN и ограничить небольшой частью сайта, не мешая другому коду.
Конечно, это, вероятно, не то решение, к которому вы стремитесь в долгосрочной перспективе, но это ступенька для облегчения процесса модернизации устаревшего кода.
Вам не нужно решать все за один монолитный шаг. Вы можете вводить Vue постепенно, пока весь ваш проект не будет преобразован, и вы не будете использовать все навороты современного фреймворка JavaScript.
Простая модель реактивности
Реактивное программирование лежит в основе Vue js.
Если вы раньше не сталкивались с реактивным программированием, то я настоятельно рекомендую вам попробовать rxjs - или любой другой вид библиотеки rx, который вам нравится.
Но в самом простом случае реактивное программирование связано с созданием зависимостей между битами данных.
Зависимости могут быть простыми - всего одна цепочка по длине - или сложными с множеством взаимосвязанных цепочек. Важно то, что при изменении одного из битов данных все данные в нисходящем потоке, зависящие от него, автоматически пересчитываются.
В приведенном выше примере кода показано очень простое дерево зависимостей в Vue. Вычисленное значение sin зависит от свойства x. Каждый раз при изменении x - в данном случае в ответ на нажатие кнопки - значение sin автоматически пересчитывается. Обратите внимание, что компонент, написанный таким образом, полностью декларативен; мы определили что такое грех, а не как его вычислять и обновлять.
Vue автоматически распространяет изменения через дерево зависимостей, выясняя, когда необходимо пересчитать немного данных, отслеживая изменения в дереве.
События, запускаемые программно или когда пользователь взаимодействует с виджетами в интерфейсе, могут вызвать целый каскад эффектов, поскольку Vue распространяет изменения по дереву зависимостей.
В простейшей форме переменная, определенная в компоненте, может быть привязана к данным в пользовательском интерфейсе, установив двустороннюю привязку, программные изменения отражаются в пользовательском интерфейсе и наоборот.
Но реактивность может стать намного интереснее, особенно когда вы вводите межкомпонентную связь через слоты, слоты с ограниченным объемом и хранилище VueX.
Лично я считаю, что эту модель программирования очень легко рассуждать. Это хорошо соответствует моей ментальной модели. Другие могут найти другой подход более удовлетворительным, но я думаю, что это определенно одна из сильных сторон Vue.
Государственное управление
Инструменты, которые Vue предоставляет прямо из коробки для управления состоянием внутри компонентов и позволяя компонентам взаимодействовать друг с другом, подходят для большинства проектов. Но когда проект становится большим и взаимодействие компонентов становится трудно отслеживать, вам может понадобиться нечто большее.
В React здесь может пригодиться библиотека управления состоянием, такая как Redux. Эквивалент во Vue - VueX.
Дизайн VueX очень похож на Redux. Состояние хранится в объекте JavaScript и передается каждому компоненту после регистрации в Vue. Объект состояния доступен только для чтения, прямое изменение запрещено. Вместо этого специальные объекты, известные как Действия и Мутации, отправляются во VueX, вызывая определяемую пользователем функцию, которая обновляет хранилище.
Разница между действиями и мутациями часто сбивает с толку людей, впервые использующих Vue. Но разница не такая уж сложная.
Действия похожи на асинхронные мутации - подумайте о Redux-Thunk, если вы уже сталкивались с этим плагином раньше. Они не изменяют состояние сами по себе, но могут совершать любое количество Мутаций, которые будут выполнять обновление от их имени. По сути, это хорошее место для запуска запросов Ajax и обновления хранилища с помощью мутаций в результате выполнения обещания.
Тот факт, что состояние хранится в одном месте, дает вашему приложению единый источник истины - уже один этот факт очень полезен при разработке большого приложения. Но реальная сила VueX заключается в том, что мутацию состояния можно отслеживать, потому что единственный способ изменить состояние в хранилище - это отправить объект Action или Mutation.
Как и Redux, это становится действительно мощным инструментом отладки, потому что вы можете буквально перематывать изменения состояний и переходить к предыдущим состояниям с помощью функции, называемой Time Travel.
Постоянно совершенствуется
Vue - очень активный проект с открытым исходным кодом. Возможно, его не поддерживает крупная международная компания с ресурсами небольшой страны - я на самом деле думаю, что это хорошо, - но у него, безусловно, есть большое, преданное и очень активное сообщество, движущее его вперед.
Не за горами последнее воплощение Vue (Vue 3), и впереди ждут некоторые очень интересные улучшения!
Самый большой из них - и тот, который меня лично больше всего волнует - это API композиции. Это полностью необязательная функция, которая добавляет разработчикам еще один инструмент для абстрагирования и систематизации функций компонентов.
По моему опыту, самая большая проблема во фронтенд-разработке - это абстрагирование общих функций от компонентов, чтобы их можно было повторно использовать во множестве разных мест.
У Vue, как и у других крупных фреймворков, уже есть несколько методов для достижения этой цели, в первую очередь миксины и слоты с ограниченной областью видимости, но они имеют некоторые ограничения и иногда требуют изобретательного мышления!
Как и остальная часть Vue, API композиции - действительно простое и понятное решение проблемы. Объяснение того, как именно это работает, выходит за рамки этой статьи - я мог бы и, вероятно, должен был бы посвятить этому другую статью, - но короче говоря, компоненты получили новый раздел под названием setup, который позволяет разработчику регистрировать функции композиции - простые старые функции JavaScript, которые следуют определенному шаблону, который содержит все реактивные переменные и функции для данной функции.
Это вряд ли справедливо для API композиции, поэтому, если вы хотите узнать об этом больше, люди из VueMaster создали действительно полезное объясняющее видео. Вы можете проверить это здесь".
Набор и обучение
В настоящий момент Vue набирает обороты, и нет никаких признаков того, что он замедляется.
Но как Vue сравнивается с двумя другими фреймворками, когда дело доходит до создания команды? Насколько легко нанять новых разработчиков и обучить существующих.
Во-первых, давайте посмотрим, насколько популярен каждый фреймворк в сообществе разработчиков. Следующие данные взяты из Состояние Javascript - 2018.
На приведенном выше графике действительно выделяются несколько вещей:
- React и Angular получили наибольшее распространение в сообществе разработчиков, при этом React использовали 14 417 опрошенных разработчиков (или 71,5%), а Angular использовали 11 643 (57,7%) по сравнению с Vue, использовавшимся всего 6 350. (31,6%). Этого следовало ожидать, учитывая, что Vue не поддерживается крупной компанией и является самой молодой структурой из трех.
- React и Vue невероятно популярны по сравнению с Angular. На этом графике создается впечатление, что React намного более популярен, чем два других, потому что область разработчиков, которые использовали и полюбили фреймворк - красная область - намного больше. Но это было бы неправильным толкованием данных. React использовался гораздо большим количеством опрошенных разработчиков, поэтому объединенные розовые и красные области - области, представляющие количество разработчиков, использовавших фреймворк, - всегда будут намного больше. Правильный способ измерить популярность - это определить долю разработчиков, которые хотят продолжать использовать фреймворк, по сравнению с теми, кто этого не делает. Когда мы подсчитали, что мы обнаружили, что Vue является самым популярным с рейтингом 91,5% (5,810 / 6,350), React очень близко отстает с 90,6% (13,062 / 14,417) , а Angular сильно отстает на 41,4% (4817/11 643).
- Vue сейчас набирает обороты. Две синие области графика представляют количество людей, которые слышали о структуре, но еще не использовали ее. Как видите, синие области Vue вместе взятые намного больше двух других. Интересно, сколько из этих разработчиков хотели бы его использовать по сравнению с теми, кто не заинтересован в этом. Опять же, Vue занимает первое место с рейтингом 69,5% (9,395 / 13,517), React занимает второе место с 67,5% (3857 / 5,717) и Angular. сильно отстает с 24,6% (2,089 / 8,506)
Эти данные показывают, что Vue и React являются невероятно популярными фреймворками среди разработчиков, но на данный момент React использует гораздо больше разработчиков, чем Vue.
Это фактически подтверждается данными о найме на популярных сайтах по вакансиям Indeed и Monster:
На самом деле довольно сложно получить точные цифры по рынку труда, и мои 10 минут исследования вряд ли можно назвать самыми научными, но я думаю, что результаты, тем не менее, весьма интересны.
На обоих сайтах я использовал термины «разработчик Vue», «разработчик React» и «разработчик Angular» и подсчитал количество перечисленных вакансий.
Действительно
Vue: 1004
React: 4117
Угловой: 3091
Монстр
Vue: 88
React: 929
Угловой: 720
Цифры довольно ясны. Что касается количества компаний, использующих эти фреймворки, и спроса на них, Vue еще не существует, это важный, но небольшой игрок.
Итак, если разработчикам нравится использовать Vue, но сейчас его использует относительно мало разработчиков, как насчет обучения существующих разработчиков?
Вот где действительно сияет Vue! В первом разделе этой статьи говорилось о легкости, с которой разработчики могут использовать Vue. Разработчики действительно могут очень быстро приступить к работе с Vue.
Это также подтверждается состоянием данных Javascript.
Четыре самых популярных аспекта Vue - это простота обучения, элегантный стиль программирования, хорошая документация и простой / легкий. Разработчики действительно согласны с тем, что этому легко научиться и быстро овладеть им!
Итак, стоит ли вам использовать Vue в своем следующем проекте?
Я думаю, что да.
Начать работу с Vue очень просто, и его очень легко использовать вместе с другими фреймворками.
Внедрение Vue не представляет большого риска, но может повысить вашу продуктивность и применить проверенные и проверенные шаблоны проектирования для разработки шрифтов.
Возможно, на данный момент у него не самая большая доля разработчиков, но он растет очень быстро и не показывает никаких признаков замедления.
Об авторе
Оливер Винкс установил Paper Plane Software в 2015 году, чтобы создавать многофункциональные веб-приложения и мобильные приложения для своих клиентов.
Paper Plane Software специализируется на разработке полного цикла и обучении программному обеспечению на Scala и Vue.js.
