Почему я отказался от Angular ради Vue.js

ОПЫТ РАЗРАБОТЧИКА

Почему я отказался от Angular ради Vue.js

Я не жалею об этом, но ...

Я занимался разработкой Angular более двух лет. Я открыл для себя этот JavaScript-фреймворк в его версии 6. Я наслаждался им в течение многих месяцев, кварталов и лет. Но я отказался от него, пока были выпущены ранняя версия 9 и движок рендеринга Ivy.

Переход с Angular на Vue.js был приятным моментом, настоящим удовольствием в моей жизни фронтенд-разработчика. Цель этой статьи - объяснить вам, почему.

В самом начале я был back-end разработчиком, разрабатывал веб-сервисы REST API для нескольких компаний. Мне понравился этот хорошо структурированный код с осмысленными инструкциями и четкой бизнес-логикой. Цель была реальной: получить данные из базы данных, преобразовать их и предоставить сложные объекты в форме веб-сервисов, чтобы разработчики интерфейса могли их использовать.

Расцвет JS-фреймворков

Примерно в 2015 году самые популярные интерфейсные фреймворки росли все быстрее. Angular, React и Vue.js получали все больше и больше сторонников. У них определенно был другой подход к одностраничному приложению (SPA).

Angular был (и остается) полноценной структурой, предназначенной для использования на корпоративном уровне, с множеством функций. Этот набор инструментов поможет вам создать приложение, не задумываясь о том, какую библиотеку вы можете использовать для HTTP-запросов, модульного тестирования, i18n и т. Д.

React, являющийся прямым аналогом Angular, изменил правила игры, когда выпустил Redux, реализацию своего паттерна Flux. Лейтмотив React - рендеринг компонентов благодаря выделенному набору состояний. React ориентирован на пользовательский интерфейс. Добавление хуков изменило способ разработки веб-приложений и усилило компонентный состав.

Vue.js - крошечный аутсайдер. Несмотря на то, что Vue.js меньше людей, чем Angular или React, Vue.js может похвастаться тем, что его поддерживает сильное сообщество, которое очень быстро растет. Технически это почти смесь Angular и React, использующая реактивное состояние для рендеринга компонентов.

Ум пробуждается

В то время я был внутренним разработчиком, создававшим веб-API для получения географических данных (например, расчет кластеров, интересующие объекты), и я совершенно растерялся, глядя на код интерфейсного разработчика. У меня были некоторые познания в AngularJS (из инженерной школы), но это кардинально отличалось. Мне стало скучно по нескольким причинам, и пришло время кардинально изменить свою рабочую жизнь.

Я решил сменить позицию и начать фронтенд-карьеру. В моем решении было несколько моментов:

• Я понял, что мне нравится визуальный контент, и я вижу, как мой код что-то отображает. Все эти связки JSON были недостаточны.
• Мне стало скучно понимать всю бизнес-логику. Как back-end разработчик, вам сначала нужно получить контекст, все концепции и задействованные сущности. Напротив, цель интерфейсного разработчика - визуализировать данные. Иногда необходимо внедрять бизнес-правила, но они не так сложны, как правила на фоновом уровне.
• Мир веб-разработки развивается очень быстро, и возможности практически безграничны, когда дело доходит до рендеринга контента, изучения новых возможностей браузера или новых шаблонов JS-фреймворка. Наши знания всегда должны быть актуальными.
• Поскольку это работа, ориентированная на пользователя, вы заботитесь как о пользовательском интерфейсе, так и о пользовательском опыте. Вы можете представить себя пользователем, просматривающим веб-сайт и проверяющим каждую мелочь, которая может вас беспокоить.
• Интерфейсный разработчик может гордиться тем, что он разработал: его веб-приложение конкретное (ну, это всего лишь пиксели, но вы понимаете, о чем я). Но back-end разработчик не может чувствовать то же самое, и он может даже расстроиться, когда front-end злятся на них, когда REST API не работают.
• Наконец, из-за этого важного роста JS-фреймворков я подумал, что упускаю что-то важное.

Угловой, я выбираю тебя!

Я выбрал Angular. Конечно, у меня уже были некоторые знания об этом, и, поскольку он предназначен для использования на корпоративном уровне, это был самый простой способ получить работу с этим фреймворком.

Я многому научился на некоторых занятиях на платформе Udemy и прочитав много статей на Medium.

TypeScript везде

Когда я начал практиковать Angular с шестой версией, TypeScript был обязательным, и я влюбился в него. Можно сказать, простой, поскольку его постулат о ООП близок к языкам программирования. Наличие этого четко определенного контекста было своего рода смягчителем для изучения всех основ интерфейсной разработки.

Класс-компонентный стиль и декораторы

Стиль класс-компонент для объявления компонента привлек меня, потому что он похож на классы ООП. Такие декораторы, как Input / Output или Service / Component и Module аналогичны аннотациям данных C #.

Архитектура приложения

В приложении Angular код по умолчанию аккуратно разделен:

• Данные - весь связанный с данными контент содержится в службах и хранилище состояний приложения (и его функциональных модулях, reducers, selectors,…).
• Инструменты рендеринга - фильтры и директивы просты в использовании и тестировании.
• Иерархию компонентов легко установить с помощью атомарного шаблона проектирования или шаблона проектирования, ориентированного на характеристики.
• Состав модуля - модули Angular представляют собой согласованные контейнеры с блоками кода, выделенными для домена приложения, рабочего процесса или тесно связанного набора возможностей.
• Выделенные файлы для каждого компонента: три файла (даже четыре, если мы включим тестовый файл), которые помогают для удобочитаемости и разделения проблем.

Думаю, вы здесь поняли: структура, структура и снова структура - что очень похоже на внутреннюю среду.

Мощная библиотека пользовательского интерфейса (Angular Material)

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

Тестируемость

Тестируемость присуща Angular вместе с Karma, его средством запуска тестов, и Jasmine, библиотекой тестов. Это похоже на то, как будто каждый компонент приложения, который вы разрабатываете, готов к тестированию. Доступен важный набор функций для получения компонента и управления им для обработки почти всех вариантов использования.

Более того, создание сквозных (E2E) тестов упрощено, поскольку Angular разработал собственную библиотеку: Protractor.

Медовый месяц прошел

После месяцев и лет использования фреймворка вы справились со многими темами и проблемами. Вы знаете его сильные и слабые стороны.

Кривая обучения

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

Среди всех JS-фреймворков это самый крутой. Это происходит из-за конкретной среды выполнения фреймворка Google-leg, внедрения зависимостей и жизненного цикла приложения.

Чрезмерно типизированный язык означает сложность

Тот факт, что этот фреймворк написан на TypeScript, дает реальную возможность получить контроль над всем кодом с хорошо структурированной структурой.

Однако для конкретных предметов это может привести к внушительному количеству кода и набора текста для решения простых задач.

Например, при тестировании компонента вам понадобится вся эта настройка (отрывок кода из документации по Angular):

Другой иллюстрацией этого момента является функция портала CDK.

Наконец, есть возможности Angular для проецирования контента.

Основной выпуск, но с небольшими изменениями

У Angular есть четкий график релизов.

Я начал использовать этот фреймворк с версии 6 до версии 9. В течение этого периода не было добавлено никаких основных новых функций или конкретной парадигмы для улучшения опыта программирования для разработчиков.

• v7: Улучшения CDK (виртуальная прокрутка, перетаскивание и т. д.)
• v8: Angular Ivy как опция, дифференциальная загрузка
• v9: Официальный выпуск Ivy

Вы можете найти подробнее здесь.

За это время React предоставил свои хуки. Vue добавил новые атрибуты или улучшил совместимость с TypeScript.

На момент написания этой статьи Angular v10 только что был выпущен, и, как я уже сказал, ничего нового не было разработано.

Vue.js: интерфейсная разработка стала проще

Летом 2019 года я следил за классом на Udemy о Vue 2. Мой друг был так счастлив использовать его, и я хотел узнать свое собственное мнение. Меня впечатлила его простота и то, как легко начать проект.

Вернуться к основам

Что мне действительно нравится во фреймворке Vue, так это то, что каждый компонент, который мы можем создать, близок к шаблону, а его параметры ориентированы на шаблон:

• computed можно квалифицировать как подготовленные данные, которые можно легко отобразить в шаблоне.
• watchers позволяют реагировать на изменения данных в шаблоне
• Динамические компоненты настолько просты в обращении по сравнению с Угловой настройкой.
• transitions и анимации, динамические стили и т. Д.

Исполнитель

Фреймворк Evan You невероятно быстр и легок, а время сборки очень короткое, даже в больших приложениях. Процесс сборки понятен и может быть легко настроен (даже несмотря на то, что Angular продвигает CLI Builders).

Например, computed - это методы, которые хранятся в памяти и обновляются при изменении их зависимостей. Напротив, methods каждый раз повторно выполняются.

Кривая обучения

Кривая обучения Angular может быть самой крутой, но Vue должна быть самой мягкой. Документация практична и проста для понимания. Начать проект очень быстро.

Опыт программирования

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

Создание, импорт и использование компонентов просты и понятны. Компонент отложенной загрузки тоже очень прост.

Кроме того, мы можем добавлять плагины к экземпляру Vue, и их можно вызывать из любого места:

Some examples:
this.$store
this.$emit
this.$i18n (when you use vue-i18n)
...

И, конечно, можно расширить.

Поддержка TypeScript

В отличие от Angular, TypeScript не является обязательным в приложении Vue. Этот супернабор JavaScript является дополнительным инструментом. Это не нарушает работу приложения при ошибке компиляции TS. Вы можете использовать его как способ структурировать свой код. В одном проекте могут сосуществовать чистый JS-компонент и компонент TypeScript. И это супер сильно!

Я не жалею об этом, но ...

На данный момент я полагаю, что медовый месяц не закончился, так как я использую Vue почти год. Но я сожалею о нескольких вещах, которые я не нашел в Vue, которыми может похвастаться Angular:

• Создание шаблона, который можно повторно использовать в нескольких местах в шаблоне (например, ngTemplate), - это мощный инструмент, но я не нашел способа воспроизвести это во Vue.
• Проверка типа шаблона - сильное преимущество Angular v9.
• Архитектура приложения лучше определена в Angular, чем во Vue. Например, есть специальный файл для данных (услуг), файл определения модуля и так далее.

Конечно, я не вернусь к Angular. Мне действительно очень нравится использовать Vue. Кроме того, Vue 3 обещает невероятные новые функции, такие как встроенная поддержка TypeScript и новая парадигма: API композиции Vue.

Последние мысли

Angular, React и Vue - это разные JS-фреймворки с сильным подходом. Они предлагают массу функций и быстро запускают приложения.

Несмотря ни на что, я буду продолжать следить за Angular, потому что верю в его потенциал. Я действительно в восторге от Vue 3 и не могу дождаться, чтобы увидеть его в действии. Несмотря на то, что API композиции действительно близок к React, я хочу открыть для себя все его достоинства.

Ресурсы