Легкий фреймворк 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, которое

Напротив, 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. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.