Легкий фреймворк JavaScript в центре внимания.
Что такое Vue.js?
Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов.
Vue.js — это фреймворк JavaScript/TypeScript, используемый для разработки веб-интерфейсов. Он прогрессивен, потому что позволяет пользователям начинать с базовых функций и со временем расширять используемые функции. Например, относительно легко начать с JavaScript и позже добавить поддержку TypeScript.
Основные отличия и сходства с другими интерфейсными фреймворками
Важно понимать основные отличия Vue.js от других. другие интерфейсные фреймворки, чтобы иметь возможность знать, когда его использовать, а когда нет. Это сравнение включает альтернативные фреймворки Angular и React.
С точки зрения бизнеса главным мотивом выбора платформы является общая стоимость владения. Общая стоимость владения относительно интерфейсные рамки, например. главным образом под влиянием:
- сколько усилий требуется для реализации функций,
- сколько усилий требуется для настройки и обслуживания инфраструктуры CI или CD,
- сколько усилий уходит на тестирование потенциально критичных частей фронтенда и его интеграцию с бэкендом,
- сколько усилий требуется для масштабирования проекта,
- сколько усилий потребуется, чтобы в будущем перенести проект на лучшую технологию и т. д.
С технологической точки зрения общая стоимость владения программным продуктом влияет в основном на атрибуты качества. такие как ремонтопригодность и т. д. Используемая инфраструктура внешнего интерфейса влияет на атрибуты качества. Как это ни парадоксально, практически в любом проекте, в котором я участвовал, до сих пор интерес других заинтересованных сторон, вовлеченных в программные проекты, к этим нефункциональным требованиям был невелик. Однако с точки зрения разработчика эти соображения могут иметь решающее значение.
Фреймворк и библиотека
Vue.js и Angular — это фреймворки, предназначенные для предоставления всего необходимого для создания готового проекта. React — это библиотека. На мой взгляд, этот факт часто недооценивается и проявляется, например, в в Vue.js и Angular, имея лучший набор стандартных инструментов и каркасов проекта (включая настройку поддержки TypeScript), предоставляемых через CLI, по сравнению с React.
Экосистема
Экосистема веб-фреймворка влияет на сколько усилий нужно приложить к проекту для функциональности, не предоставляемой стандартной структурой, чтобы продвигать ее вперед.
Обычно хорошим индикатором размера экосистемы (инструментов, интеграций, библиотек и т. д.) для фреймворков являются "отличные" списки. Наиболее релевантными являются awesome-angular, awesome-react и awesome-vue.
У React, вероятно, самая большая экосистема, потому что это библиотека, зависящая от других библиотек для обеспечения основных функций, таких как маршрутизация, глобальное управление состоянием (например, Redux) и т. д. Angular и Vue предоставляют множество функций вне "из коробки" и требуют меньше функций, предоставляемых их экосистемой. Следовательно, экосистема Angular и Vue меньше.
Кривая обучения
Поскольку доступность разработчиков невелика, эта тема может быть критической для вас. По моему опыту, со временем разработчикам приходится реализовывать на разных языках и платформах. Чтобы ограничить когнитивную нагрузку на разработчиков, кривая обучения должна быть как можно ниже. Это обеспечивает быструю итерацию и максимально возможную надежность разработанных функций.
Vue.js — самая простая в освоении альтернатива, очень похожая на React. Angular намного сложнее в изучении и концептуально сильно отличается от React/Vue. Переключаться между React и Vue очень просто. Переключение между Angular и React/Vue не работает.
"Концептуальное равенство"
Степень того, насколько платформы различаются или похожи, влияет на то, сколько усилий потребуется для миграции между ними.
Vue.js и React.js имеют много общих базовых концепций (виртуальный DOM, глобальное управление состоянием через Veux/Redux и т. д.). Существенная разница между Angular/Vue и React заключается в том, что Angular/Vue позволяет четко разделить задачи по отношению к другим. структурирование (HTML), логика (JavaScript/TypeScript) и стиль (CSS). Angular заставляет помещать код в разные файлы. В Vue код компонента может быть помещен в однофайловый компонент *.vue
с отдельными областями для <template></template>
(HTML), <script></script>
(JavaScript/TypeScript) и <style></style>
(CSS) или в отдельные файлы. React.js использует и зависит от JSX, что позволяет поместить логику рендеринга внутри структурирующей части (HTML). Это личный вкус, но я предпочитаю строгое разделение задач (имеется в виду подход Angular/Vue). W.r.t. передача данных между компонентами и реактивность Vue также похож на React. В целом, существует несколько концептуальных совпадений с Angular.
Для сравнения приложения TODO, реализованного в Angular, React и Vue, перейдите к Я создал точно такое же приложение в React и Vue. Вот отличия и Я создал одно и то же приложение в React и Vue (Часть 2: Angular). Этот пример хорош тем, что он позволяет определить необходимое количество LOC для прозрачной реализации базового приложения.
Кроссплатформенная поддержка
Существует несколько способов создания кроссплатформенных приложений с помощью Vue.js. Некоторое время существовал Vue Native. Однако он устарел. Это был популярный эквивалент React Native, но он редко известен и используется. Насколько я знаю, для Angular нет фреймворка для кроссплатформенной разработки, ориентированной конкретно на Angular. Существует общая Ionic framework, обеспечивающая Ionic Angular для Angular. При использовании с Ionic Vue можно разрабатывать кроссплатформенные проекты с помощью Vue.js.
Принятие и доступность для разработчиков
В настоящее время разработчики являются важным ресурсом для компаний. Нехватка и спрос на разработчиков настолько высоки, что компаниям следует рассмотреть вопрос о принятии технологий разработчиками, чтобы иметь возможность нанимать разработчиков для проектов, которые необходимо быстро продвигать.
Согласно опросу разработчиков Stack Overflow 2020, React.js и Vue.js — самые популярные интерфейсные веб-фреймворки. «Понравилось» означает % разработчиков, разрабатывающих язык или технологию и выразивших заинтересованность в продолжении разработки с их помощью, и является указанием на принятие.
«Боязнь» означает % разработчиков, которые разрабатывают с помощью языка или технологии, но не выразили заинтересованности в продолжении этого и являются признаком неприязни. В категории JavaScript Angular является наиболее нелюбимой технологией. Очевидно, что результаты опроса совпадают. Результаты для «любимых» и «ужасных» веб-фреймворков противоположны.
«Требуются» означает % разработчиков, которые не используют язык или технологию, но выразили заинтересованность в разработке с их помощью. React — самая популярная платформа, за которой следуют Vue и Angular. Сравнительно высокий спрос на разработчиков Angular связан с тем, что разработка многих устаревших корпоративных интерфейсов началась много лет назад, когда Angular был, вероятно, наиболее разумной технологической альтернативой.
Если рассматривать звезды GitHub в качестве указания, то можно считать, что Vue.js (184 тыс. звезд) и React.js (169 тыс. звезд) имеют одинаковое признание разработчиков. Angular (73 тысячи звезд) остается позади...
Инструменты
Vue предоставляет CLI для объединения стандартных инструментов и шаблонов проекта в один инструмент. CLI расширяется с помощью плагинов (исходный код) и позволяет выполнять настройку. Тем не менее, одна из основных целей команд разработчиков состоит в том, чтобы
- «Снизить утомляемость конфигурации современных интерфейсных инструментов, особенно при смешивании нескольких инструментов вместе»;
- «Включите лучшие практики в цепочку инструментов, чтобы она стала стандартом для любого приложения Vue».
Подходящие IDE — это VSCode или WebStorm. Vetur — это расширение для VSCode IDE, которое
- добавляет Подсветка синтаксиса
- добавляет Семантическое выделение для JavaScript и TypeScript
- позволяет определить и вставить код Фрагменты
- позволяет использовать Эммет
- добавлена поддержка Линтинг/проверка ошибок (линтинг:
js
, пока нет поддержкиts
/проверка ошибок:hmtl
,css
,scss
,less
,js
,ts
) - добавлена поддержка Форматирования (
prettier
,prettier-eslint
,stylus-supremacy
,vscode-typescript
,sass-formatter
) - добавлена поддержка функций IntelliSense
- позволяет отладку кода JavaScript, работающего в Google Chrome, из VS Code
- поддержка работы с Данные компонента
- поддержка Интерполяции (Общие языковые функции → диагностика, наведение, переход к определению и поиск ссылок, завершение, проверка типов с помощью JSDocs, проверка реквизита, проверка типа реквизита)
- пытается добавить (работает в процессе) поддержку Vetur Terminal Interface (VTI), позволяющую перехватывать ошибки типов в шаблонах Vue, которые не могут быть перехвачены только Vue или TypeScript.
- поддержка Глобальных компонентов.
Напротив, WebStorm имеет встроенную поддержку для Vue.js.
Vue-devtools — это набор расширений для браузера, позволяющий отлаживать приложения Vue.js в браузере.
Многие другие инструменты, такие как, например, Storybook.js уже поддерживают Vue.js 3. Если вы еще не знаете Storybook.js: он позволяет быстрее создавать компонентно-ориентированные интерфейсы.
Фреймворки пользовательского интерфейса
Существует много фреймворков пользовательского интерфейса и компонентов. Взгляните на другой мой пост в блоге Какие фреймворки пользовательского интерфейса поддерживают Vue 3? чтобы узнать, какой из них уже поддерживает версию 3 Vue.js.
Заключение
Для компаний, где скорость разработки имеет решающее значение, разработчики и разработчики редко тратят время на обучение, как в стартапах, Vue.js — разумный выбор. Если компания не использует React или другой интерфейсный фреймворк с почти такой же высокой скоростью разработки, как у Vue.js, это может быть хорошим выбором для проектов MVP, где скорость имеет значение. Чем меньше сложность и объем проекта, тем лучше подходит Vue.js.
Лично я считаю, что Vue.js идеально подходит для веб-клиентов встроенных устройств/серверов. Если вам нужна кроссплатформенная среда, вы должны использовать Ionic Vue. В качестве альтернативы вы можете использовать React + React Native или Flutter в зависимости от используемого приложения и требований (частота кадров в секунду, сложность анимации и т. д.). Vue.js 3 предоставляет множество готовых стандартизаций, аналогичных Angular, что освобождает разработчиков от оценки лучших практик и альтернативных инструментов, не заставляя разработчика чувствовать себя ограниченным фреймворком. Версия 3 нацелена на улучшение ремонтопригодности, что делает ее пригодной и для проектов большего размера (рассмотрите, например, API композиции). Кроме того, это самый простой в освоении фреймворк.
Спасибо за чтение.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.