Обзор Vue.js

Vue - очень впечатляющий проект. Это очень популярный фреймворк JavaScript, который быстро растет. Он простой, миниатюрный и очень производительный. Узнать больше об этом

Vue - очень популярный интерфейсный фреймворк JavaScript, который быстро растет.

Он простой, крошечный (~ 24 КБ) и очень производительный. Он отличается от всех других интерфейсных фреймворков JavaScript и библиотек представлений. Давайте выясним почему.

Во-первых, что такое интерфейсная среда JavaScript?

Если вы не знаете, что такое JavaScript-фреймворк, Vue - идеальный вариант для первого знакомства с ним.

Фреймворк JavaScript помогает нам создавать современные приложения. Современные приложения JavaScript в основном используются в Интернете, но также используются во многих настольных и мобильных приложениях.

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

Все изменилось, когда Google представил Google Maps и GMail, два приложения, работающие внутри браузера. Ajax сделал возможными асинхронные сетевые запросы, и со временем разработчики начали строить поверх веб-платформы, в то время как инженеры работали над самой платформой: браузеры, веб-стандарты, API-интерфейсы браузеров и язык JavaScript.

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

Такие фреймворки, как Backbone, Ember, Knockout, AngularJS, были первой волной современных фреймворков JavaScript. Вторая волна, которая является текущей, включает React, Angular и Vue в качестве основных участников.

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

Фреймворки абстрагируют взаимодействие с браузером и DOM. Вместо того, чтобы манипулировать элементами, ссылаясь на них в DOM, мыдекларативноопределять их и взаимодействовать с ними на более высоком уровне.

Использование фреймворка похоже на использование языка программирования C вместо использования языка ассемблера для написания системных программ. Это похоже на использование компьютера для написания документа вместо пишущей машинки. Это как иметь беспилотный автомобиль, а не самому водить машину.

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

Популярность Vue

Насколько популярен Vue.js?

Vue имел:

  • 7600 stars on GitHub in 2016
  • 36700 stars on GitHub in 2017

и по состоянию на июнь 2018 года у него более 100000 звезд на GitHub.

Количество загрузок npm растет с каждым днем, и сейчас оно составляет ~ 350 000 загрузок в неделю.

Я бы сказал, что Vueочень популярный, учитывая эти числа.

В относительном выражении он имеет примерно такое же количество звезд GitHub, как React, который родился за несколько лет до этого.

Конечно, числа - это еще не все. У меня сложилось впечатление о Vue, что разработчикилюблюЭто.

Ключевым моментом во время подъема Vue стало внедрение в экосистему Laravel, чрезвычайно популярной среды веб-приложений PHP, но с тех пор она широко распространилась среди многих других сообществ разработчиков.

Почему разработчики любят Vue

Во-первых, Vue называетсяпрогрессивная структура.

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

Вам не нужно знать о webpack, Babel, npm или чем-то еще, чтобы начать работу с Vue, но когда вы будете готовы, Vue упрощает для вас возможность полагаться на них.

Это отличный аргумент, особенно в нынешней экосистеме интерфейсных фреймворков и библиотек JavaScript, которая отталкивает новичков, а также опытных разработчиков, которые чувствуют себя потерянными в океане возможностей и выбора.

Vue.js, вероятно, является более доступным фреймворком для внешнего интерфейса. Некоторые называют Vueновый jQuery, потому что он легко попадает в приложение через тег скрипта и постепенно занимает оттуда место. Считайте это комплиментом, поскольку jQuery доминировал в Интернете в последние несколько лет и по-прежнему выполняет свою работу на огромном количестве сайтов.

Vue выбирает из лучших идей. Он был построен путем отбора лучших идей таких фреймворков, как Angular, React и Knockout, и путем отбора лучших решений, которые сделали эти фреймворки, и за исключением некоторых менее блестящих, он начинался как «лучший из» набор и рос. оттуда.

Где Vue.js позиционирует себя в среде фреймворков

Когда речь заходит о веб-разработке, два слона в комнатеРеагироватьиУгловой. Как Vue позиционирует себя относительно этих двух больших и популярных фреймворков?

Vue был создан Эваном Ю, когда он работал в Google над приложениями AngularJS (Angular 1.0), и родился из-за необходимости создавать более производительные приложения. Vue выбрал часть синтаксиса шаблонов Angular, но удалил упрямый и сложный стек, который требовался для Angular, и сделал его очень производительным.

Новый Angular (Angular 2.0) также решил многие проблемы AngularJS, но совсем другими способами и требует участияМашинописькоторые не всем разработчикам нравится использовать (или которые хотят изучить).

А как насчет React? Vue позаимствовал у React много хороших идей, в первую очередь - Virtual DOM. Но Vue реализует это с помощью своего рода автоматического управления зависимостями, которое отслеживает, какие компоненты затронуты изменением состояния, так что только эти компоненты повторно визуализируются при изменении этого свойства состояния. В React, с другой стороны, когда часть состояния, которая влияет на компонент, изменяется, компонент будет повторно отрисован, и по умолчанию все его дочерние элементы также будут повторно отрисованы. Чтобы избежать этого, вам нужно использовать метод shouldComponentUpdate для каждого компонента и определить, следует ли повторно отрендерить этот компонент. Это дает Vue небольшое преимущество с точки зрения простоты использования и увеличения производительности.

Одно большое отличие от React - это JSX. Хотя технически вы можете использовать JSX во Vue, это не популярный подход, и вместо него используется система шаблонов. Любой HTML-файл является допустимым шаблоном Vue, тогда как JSX сильно отличается от HTML и требует обучения людям в команде, которым, например, дизайнерам может потребоваться только работа с HTML-частью вашего приложения. Шаблоны Vue во многом похожи на Mustache и Handlebars (хотя они различаются по гибкости) и поэтому более знакомы разработчикам, которые уже использовали такие фреймворки, как Angular и Ember.

Официальная библиотека управления состоянием Vuex следует архитектуре Flux и чем-то похожа наReduxв своих концепциях. Опять же, это часть положительных моментов в Vue, который увидел этот хороший шаблон в React и позаимствовал его в своей экосистеме. И хотя вы можете использовать Redux с Vue, Vuex специально адаптирован для Vue и его внутренней работы.

Vue является гибким, но тот факт, что основная команда поддерживает два пакета, очень важных для любого веб-приложения, таких как маршрутизация и управление состоянием, делает его намного менее фрагментированным, чем, например, React:vue-routerиvuexявляются ключом к успеху Vue. Вам не нужно выбирать или беспокоиться, будет ли выбранная вами библиотека поддерживаться в будущем и будет идти в ногу с обновлениями фреймворка, и, будучи официальными, они являются каноническими библиотеками для своей ниши (но вы можете выбрать используйте, конечно, то, что вам нравится).

Одна вещь, которая ставит Vue в другое ведро по сравнению с React и Angular, заключается в том, что Vue - этоиндипроект: он не поддерживается такой огромной корпорацией, как Facebook или Google. Вместо этого он полностью поддерживается сообществом, которое способствует развитию за счет пожертвований и спонсоров. Это гарантирует, что дорожная карта Vue не зависит от повестки дня одной компании.

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue:


Tech Wiki Online!