Есть много отличных фреймворков: Angular, React, Aurelia, Ember и т. Д. После использования многих из них у нас появился список желаний, который заставил нас выбрать Vue для нашего следующего проекта.
В ноябре 2016 года мы решили выбрать Vue.js. Мы выбрали Vue по X причинам. Спустя 15 месяцев я могу сказать, почему - вам следует выбрать Vue по двум причинам. Конечно, этот пост не о сравнении фреймворков. Речь идет исключительно о том, чтобы подчеркнуть сильные стороны Vue.js.
TL; DR; Vue.js обеспечивает гибкость, которую не может обеспечить никакой другой фреймворк.
Причина 1: виртуальный DOM
Что нам понравилось в Angular, так это:
- Очень удобный язык шаблонов (в версиях 1.x и 2.x и выше)
- Очень хорошая абстракция MVVM (даже если грязная проверка не выполняется, что теперь адресовано в более новой версии)
Что нам понравилось в React, так это:
- Потрясающий виртуальный DOM
Теперь пришла реальность. С Angular у вас не может быть Virtual DOM, а с React вам придется жить с JSX или создавать шаблон с помощью простого JavaScript - это просто ад (Элм, ребята, у меня нет проблем с его синтаксисом). JSX, встроенный в JavaScript, по-прежнему кажется мне чуждым даже спустя 4 года (давайте не будем снова начинать священную войну).
С Vue мы получаем лучшее из обоих миров:
Vue позволяет вам использовать простой синтаксис HTML для определения шаблонов, и если вы пришли из фона React, вы все равно можете использовать синтаксис JSX, если хотите. Независимо от того, что вы выбрали, вы в конечном итоге компилируете его в Virtual DOM.
Здесь Vue очень гибок. Есть как минимум семь способов определить шаблон компонента:
Причина 2: необязательный, но мощный этап сборки
Попробуйте использовать Angular или React, не используя этап сборки. Ты проклянешь себя. С Vue.js вам не нужен этап сборки. Это так же просто, как добавить jQuery на вашу веб-страницу. Большая часть моей команды не работала над сложной структурой SPA. Когда я сказал им, что наш новый стек использует Vue + Redux + Rxjs + Redux-Observable + Webpack + Babel +…, они были просто ошеломлены.
Но с Vue.js было очень легко применить пошаговый подход. Webpack и Redux - это вещи, которые мы выбрали в самом конце нашего обучения. Для опытного разработчика jQuery было очень легко выбрать Vue и делать шаг за шагом.
Есть отличная статья Сары Драснер для разработчиков jQuery, которые хотят перейти на Vue:
На этом Vue.js не останавливается. Если новичкам подобрать очень легко, то
Vue одинаково гибок для любой расширенной конфигурации на основе шагов сборки.
Мы экспериментировали с множеством настроек, таких как Webpack, Rollup, Babel, TypeScript, Flow и т. Д.
Причина 3: Государственное управление
React и Elm перенесли нас в чудесный мир однонаправленной архитектуры. Забудьте Angular 1, который был двунаправленным. Redux появился из экосистемы React, сделав еще один шаг вперед со всеми этими замечательными вещами, такими как предсказуемое управление состоянием, отладка путешествий во времени и т. Д.
Но с Redux приходится платить. Попросите разработчика изучить Redux для однонаправленного потока данных, и он в конечном итоге узнает очень многое другое:
- Неизменность
- Чистые функции
- Побочные эффекты
- так далее…
Добавьте к этому проклятие Redux: слишком много шаблонного кода.
Как оказалось, Vue.js имеет отличную библиотеку управления состоянием, Vuex, которая упрощает создание однонаправленной архитектуры. И он поставляется со всеми достоинствами Redux без изучения всего остального сразу.
Конечно, изучение аспектов функционального программирования Redux значительно улучшит качество вашего кода, вам не нужно изучать их в первый день работы с Vuex.
Хотя Vue.js официально предоставляет Vuex в качестве библиотеки управления состоянием, это не помешало нам использовать Redux. Vue.js достаточно гибкий, чтобы поддерживать все, например Redux, MobX и т. д..
Причина 4: ES2015 и TypeScript
Написание приложений Angular (начиная с версии 2.x) без TypeScript возможно, но вскоре вы обнаружите, что опыт разработки не так велик. Если вы выбираете Angular, вам нужно выбрать TypeScript. С Vue.js это не так.
Фактически, с Vue.js вам даже не нужно начинать с ES2015. Вы можете просто начать с простого ES5; в конце концов, компонент в Vue.js - это просто набор параметров, не более того.
Настоящая гибкость Vue.js заключается в этом. Если вы хотите выйти за рамки, то гораздо проще использовать классы ES или TypeScript.
Vue.js предоставляет официальные определения типов для TypeScript или предоставляет декораторы для использования классов ES в качестве компонентов.
Причина 5: Однофайловые компоненты
Мы давно об этом мечтали. Мы хотим записать наши компоненты в один файл. И помните, мы хотим записать HTML, CSS и соответствующий JavaScript в один файл. С React вы можете создавать JSX и писать HTML, но это не то, что нам нужно.
С Vue.js вы можете писать свои компоненты и файлы .vue и компилировать их в простой JS с помощью Webpack или Rollup:
Причина 6: динамические компоненты
Одна из распространенных неприятностей в архитектуре компонентов - создание ортогональных компонентов, таких как диалоговое окно, всплывающая подсказка, уведомление и т. Д. С помощью динамических компонентов становится очень легко создавать такие компоненты, которые часто плохо вписываются в иерархию компонентов.
Большинством этих компонентов нужно управлять напрямую в DOM. Попробуйте сделать это с помощью Angular или React. Это неловко. Кроме того, уже существует множество библиотек, которые вы можете использовать с Vue.js.
Кроме того, вы можете рассматривать каждый компонент Vue как корневой экземпляр, что означает, что каждый компонент Vue можно рассматривать как отдельное автономное приложение. Хотя эта фрактальная архитектура не так совершенна, как Cycle.js, она все же довольно близка.
Чтобы узнать больше о фракталах, прочитайте отличный пост Андре Стальца:
Андре Стальц - Архитектуры однонаправленного пользовательского интерфейса
Этот пост представляет собой неполный краткий обзор так называемых архитектур« однонаправленного потока данных . Не предназначено быть… staltz.com »
Причина 7: RxJS
Благодаря Angular, RxJS становится серьезным среди интерфейсных инженеров. С Vue.js очень легко интегрировать RxJS в ваше приложение. Он заботится обо всех утечках памяти, связанных с наблюдаемыми подписками и т. Д.
В нашем текущем стеке мы пишем больше Rx, чем Vue. Даже если Vue основан на изменяемом состоянии, очень тривиально ввести неизменяемые структуры данных в приложения Vue.
Причина 8: Производительность
Производительность приложений Vue.js просто невероятна. Он полагается на свойства объекта ES для обнаружения изменений. Кроме того, вы можете предварительно скомпилировать свои шаблоны / JSX в функцию рендеринга, которая сэкономит затраты на компиляцию во время выполнения приложения.
Веб-сайт Vue.js содержит подробный анализ производительности по сравнению с другими фреймворками:
Подтверждаю, существует множество организаций, использующих Vue.js в качестве своего внешнего интерфейса.
Причина 9: Чего еще нет
Вы хотите создавать веб-компоненты. Почему нет?
Вы хотите использовать модули CSS. Почему бы и нет?
- HMR - Проверено
- Управление активами - проверено
- Производственная сборка - проверено
- Маршрутизация - проверено
- Инструменты разработчика - проверено
- Путешествие во времени - проверено
- Рендеринг на стороне сервера - проверено
- Генератор статических сайтов - установлен
- И список продолжается
Причина 10: Тестируемость
Вопрос «Почему» не может быть завершен без рассмотрения модульного тестирования. Здесь мы использовали все хорошие слова - простой, гибкий, производительность. С Vue.js модульное тестирование невероятно просто настроить.
Вы можете использовать все, что захотите. Вы можете использовать Karma + Mocha или Jest или вообще что-нибудь безумное. В конце концов, компонент Vue.js - это не что иное, как объект, содержащий кучу параметров и методов.
Подробнее об этом читайте здесь:
Я надеюсь, что эта статья даст вам обзор огромного потенциала этой крошечной 20-килобайтной библиотеки Vue.js. Пожалуйста, заполните бесплатно, чтобы обращаться по любым вопросам.
