Апр. 16

Angular vs Vue.js: що обрати

Вітаю! Я Петро Грабовський, Software Engineer у компанії EPAM. Декілька років тому розробники переважно обговорювали доцільність використання Angular чи React у своїх проєктах. Але протягом останніх двох років ми спостерігаємо різкий інтерес до третього гравця на ринку фронтенду під назвою Vue.js. Оскільки мені пощастило працювати з Angular та Vue, про них ми сьогодні й поговоримо.

Головною метою матеріалу є бажання об’єктивно оцінити переваги та недоліки в роботі цих фреймворків, що, на мою думку, є актуальним питанням як для початківців, так і для більш досвідчених програмістів, які планують спробувати себе у чомусь новому. Ми поговоримо про популярність, спільноту та розвиток Angular та Vue, а також про міграції, криву навчання та їхні ключові технічні характеристики. Але перш ніж перейдемо до технічних деталей — трішки історії.

Історія

Фреймворки JavaScript дуже швидко розвивались останні кілька років. Почалося це з jQuery, бібліотеки JavaScript, що була випущена 2006 року для створення інтерактивних вебпрограм. З того часу спостерігається тенденція до розвитку організованих front-end фреймворків. Саме сприяло появі концепції SPA (односторінкових застосунків) — вебзастосунків, які динамічно переписують компоненти вебсторінки без завантаження цілих нових сторінок. Наразі JavaScript налічує десятки бібліотек і фреймворків. Але в цій статті зупинимось на двох — Angular та Vue.

Angular — фронтенд-фреймворк з відкритим кодом, написаний на TypeScript, який розробляють Google, під керівництвом Angular Team, спільнота приватних розробників та інші компанії. Angular — це AngularJS (2010 р.), який переосмислили та який був повністю переписаний тією ж командою розробників у 2016 році та отримав назву Angular 2. На цей час остання стабільна версія — Angular 11. Цікаво, що реліз останньої версії відбувся 11.11.2020.

Vue.js — JavaScript-фреймворк, який у 2014 році створив Еван Ю, колишній член команди Angular у Google. Коли Еван Ю працював там, у нього виникла необхідність швидко побудувати прототип складного інтерфейсу і був потрібен інструмент, щоб уникнути написання повторюваного HTML. AngularJS та Backbone були занадто громіздкі для прототипування, а React лише починався. Тому Еван створив свій фреймворк. З того часу Vue еволюціонував і дає змогу писати не тільки прототипи, а й складні вебзастосунки. За останні три роки популярність Vue істотно зросла, попри те, що у нього немає підтримки з боку великої компанії. Поточну стабільну версію 3.0.0 випустили у вересні 2020 року.

Спільнота і розвиток

Тепер, коли ми ознайомлені з історією та останніми тенденціями щодо фреймворків, подивимося на ком’юніті. Вище ми вже згадували, що для обох технологій протягом останнього року регулярно роблять додаткові оновлення. Це вказує на те, що розробка йде повним ходом. Пропоную глянути на статистику репозиторіїв у GitHub Angular та Vue:

Отже, бачимо, що Vue має величезну кількість спостерігачів, зірок і форків. Це свідчить про його популярність серед користувачів і цінність у порівнянні з Angular. Однак кількість контрибуторів значно менша, ніж в Angular. Одне з можливих пояснень полягає в тому, що Vue повністю підтримується спільнотою з відкритим вихідним кодом, водночас Angular має значну частину працівників Google, які роблять свій внесок у репозиторій. Судячи зі статистики, обидва проєкти демонструють значну активність у розробці, і це, безумовно, буде тривати у майбутньому.

Міграції

Міграції між версіями теж є цікавим аспектом. Обираючи Angular чи Vue, вам не потрібно турбуватися про оновлення фреймворка, яке може зіпсувати код. Думаю, в більшості випадків ви не зіткнетесь з проблемами під час переходу від однієї версії до іншої, хоча важливо тримати руку на пульсі. Адже деякі оновлення можуть бути більш значними та потребувати доопрацювання для забезпечення сумісності. Angular планує великі оновлення кожні 6 місяців. Також є 6 місяців до того, як будь-які основні API будуть визнані застарілими. Це дає вам час у два цикли випуску (тобто рік), щоб внести необхідні зміни.

Щодо Vue, то під час переходу з першої версії на другу в консолі був допоміжний інструмент міграції, який допомагав оцінити стан застосунку. З другої на третю версію — все простіше. Ви можете спокійно мігрувати між версіями, продовжувати писати код, використовуючи нові фічі третьої (наприклад, Composition API), і це істотно не впливає на чинну версію проєкту.

Робота з Vue та Angular

У цьому розділі ми конкретніше зупинимося на таких характеристиках:

загальний розмір;
час завантажування;
доступні компоненти та крива навчання;
плюси та мінуси в роботі з Angular та Vue.

Щодо продуктивності, то обидва фреймворки досить швидкі. Але якщо вдатись до голих цифр, то схоже, що Vue 3 таки обганяє Angular. Остання версія Angular — з АОТ-компіляцією і tree-shaking, що змогли значно зменшити розмір збірки. Однак повнофункціональний проєкт Vue з включеними Vuex та Vue Router (~30КБ gzip) все ж значно легший з коробки, ніж АОТ скомпільований застосунок, створений з Angular-cli (~65КБ gzip).

Angular розділяє компоненти інтерфейсу користувача — як атрибути тегів HTML і їхню поведінку — у вигляді коду JS. У Vue призначений для користувача інтерфейс і поведінка є частиною компонентів, що робить речі більш інтуїтивно зрозумілими. Крім того, Vue володіє широкими можливостями налаштування, що дає змогу комбінувати призначений для користувача інтерфейс і поведінку компонентів зі сценарію. Ви також можете використовувати препроцесори у Vue, а не в CSS, що є гарною функціональністю. Крім того, Vue добре підходить для інтеграції з іншими бібліотеками, наприклад із Bootstrap.

Наскільки важко вивчити Angular і Vue

В Angular крута крива навчання, враховуючи те, що освоєння фреймворку вимагає від вас вивчення пов’язаних понять, таких як TypeScript і MVC. Попри те, що для опанування Angular потрібен час, це виправдано, так ви фундаментально розумітимете, як працює інтерфейс. . Все, що потрібно для початку роботи з Vue — це знання HTML, CSS та JavaScript. Vue забезпечує більшу налаштованість, а отже, його легше вивчити.

Як Angular, так і Vue мають певні переваги та недоліки у роботі.

Angular

Плюси Angular

зрілий фреймворк, який має хорошу підтримку з боку учасників і є full package;
використовується разом з TypeScript та має виняткову підтримку для цього (перевірка статичних типів може бути дуже корисна для великих застосунків, а також додати продуктивності розробникам, які працюють на Java і C#);
angular-language-service — забезпечує інтелектуальні можливості та автозаповнення шаблону HTML-компонента;
одностороння прив’язка даних, яка забезпечує виняткову поведінку застосунку, що зводить до мінімуму ризик помилок;
структура та архітектура спеціально створені для великої масштабованості проєкту.

Мінуси Angular

різноманітність різних структур (Injectables, Components, Pipes, Modules тощо), що ускладнює вивчення в порівнянні з Vue, у якого є тільки Component;
відносно повільна продуктивність, враховуючи різні показники. Проте це можна легко виправити, використовуючи Change detection strategy, що допомагає вручну контролювати процес рендерингу компонентів.

Компанії, які використовують Angular: Google, Microsoft, Apple, PayPal, Adobe, AWS, GoPro, Upwork, Freelancer, Nike, MacDonald’s, UPS та багато інших.

Vue.js

Плюси Vue.js

висока адаптивність: може бути реалізований швидкий перехід від інших фреймворків до Vue.js;
масштабування: Vue.js може допомогти в розробці великих реюзабельних компонентів, які можуть бути зроблені майже за той же час, що і більш прості;
Vue.js має детальну документацію різними мовами, що пришвидшує процес навчання для розробника, який має базові знання HTML та JS.

Мінуси Vue.js

ризик надмірної гнучкості. Іноді у Vue виникають проблеми під час інтеграції у великі проєкти, і поки немає можливих рішень. Але вони точно з’являться в майбутньому, оскільки команда розробників продовжує удосконалювати фреймворк;
дефіцит ресурсів: Vue все ще займає невелику частку ринку, якщо порівняти з Angular. Це означає, що обмін знаннями в цьому середовищі все ще на початкових стадіях.

Компанії, які використовують Vue.js: Alibaba, Xiaomi, Grammarly, Reuters, WizzAir, EuroNews та інші.

Підсумки

Отже, Angular — добрий вибір для компаній з великими командами розробників, які вже використовують TypeScript. Складність Angular зумовлена його спрямованістю на великомасштабні проєкти.

Vue — достойний конкурент на ринку для Angular, який швидко розвивається без підтримки великої компанії. Ідеально підходить для високоадаптивних, призначених для користувача інтерфейсів і складних SPA. У кожного з них є свої переваги та недоліки.

Якщо ви новачок, маєте знання JS і думаєте про вивчення фреймворку — Vue все-таки кращий вибір, адже він більш автоматизований, нижча точка входу, зрозуміліший інтерфейс, не обов’язково знати TypeScript тощо. Після роботи з Vue вам буде набагато легше перейти на інший фреймворк.

Для досвідченого дева можу сказати одне: JS і в Африці JS. Кожен з фреймворків цікавий по-своєму, в кожному є класні фічі та підходи. Я вважаю, варто ознайомитися з обома. Це допоможе розширити кругозір, глибше зрозуміти сам JS і зрештою віддалитися від наших ворогів — зони комфорту та одноманітності :)