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 року.

Популярність

Щоб зберегти об’єктивність, будемо розглядати популярність з кількох ракурсів. Спершу подивімось на те, що нам покаже Google Trends — публічний вебзастосунок, який демонструє, як часто певний термін шукають щодо загальної кількості пошукових запитів.

З графіка бачимо, що Angular є беззаперечним лідером, кількість запитів за ним у 2,5 раза перевищує інтерес до Vue.

Другим хорошим показником популярності фреймворку можна вважати кількість stars на репозиторії GitHub, що свідчить про популярність безпосередньо серед розробників.

Тут бачимо, що лідером стає Vue.js, на початок 2021 року у нього 181 тис. stars проти 72 тис. в Angular.

Ринок вакансій, як на мене, — найцікавіший показник, бо він відбиває попит на конкретні вміння та навички, що, своєю чергою, говорить нам про потреби бізнесу (особливо це буде видно на ринку аутсорсингу).

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

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

Тепер, коли ми ознайомлені з історією та останніми тенденціями щодо фреймворків, подивимося на ком’юніті. Вище ми вже згадували, що для обох технологій протягом останнього року регулярно роблять додаткові оновлення. Це вказує на те, що розробка йде повним ходом. Пропоную глянути на статистику репозиторіїв у 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 і зрештою віддалитися від наших ворогів — зони комфорту та одноманітності :)

👍НравитсяПонравилось5
В избранноеВ избранном3
Подписаться на тему «Frontend»
LinkedIn



Підписуйтесь: Soundcloud | Google Podcast | YouTube


22 комментария

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

У нас в IT-Discovery є спеціальний тренінг по Angular Core, де ми два дні в насиченому режимі вивчаємо Angular 11 з нуля.

it-simulator.com/...​lio/event/16/angular-core

Згоден з тим, що низька продуктивність — один з мінусів Angular. Відразу 4 версії — з 6-ї по 9-й були в основному присвячені розробці Ivy Renderer, движка для генерації і рендеринга шаблонів, але все ж наздогнати React/Vue.js по ефективності не змогли.

Я б ще додав, що у Angular є багато додаткових бібліотек/проектів — Angular Material, Angular Universal, підтримка PWA, а також те, що він дуже добре підходить для розробки SPA-додатків.

Дякую за обзорну статтю

Плюс автор явно не розбирається у Vue, оскільки дозволив собі сказати —

Все, що потрібно для початку роботи з Vue — це знання HTML, CSS та JavaScript.

Питання а Angular це не той самий HTML, CSS та JavaScript??? Ну ок TypeScript. Але він це It is a strict syntactical superset of JavaScript and adds optional static typing to the language. Тому по факту той самий JS просто з картами і дівками.

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

А що не так, із твердженням?

Все, що потрібно для початку роботи з Vue — це знання HTML, CSS та JavaScript.

Хотів написати довгий і розлогий коментар чому ця стаття фігня. Але мені ліньки тому обмежуся 2ма ключовими моментами

1. Нульова технічна інформативність. Подібних текстів вагон в інтернеті, шаблон побудови один і той самий (з певними варіаціями звісно) — історія, кількість скачуваннь, плюси і недоліки. Нащо плодити ще такі речі, для мене досі загадка.

2. Судячи по стилю написанню ІМХО це якийсь або студентський реферат або кусок з курсової. Дуже тхне університетським канцеляризмом.

А мне кажется, что в EPAM ввели новый критей промоушена — слабать статью. В последнее время на доу очень много такого плана статей из серии «капитан очевидность» от авторов этой компании. Контент есть, польза разве что для автора, для читателей вряд ли, но хуже тоже никому не сделали и ок.

У автора це перша технічна стаття на Доу. Сама здатність людини формулювати думки і бажання писати на технічні теми заслуговує похвали. Я прочитав цей критичний комент і пішов подивитись скільки у автора коментаря статей на Доу і яка їх якість. Виявилось, що нуль.

Сама здатність людини формулювати думки і бажання писати на технічні теми заслуговує похвали.

Но можно же например написать что-то простое, однако полезное, например как недавняя статья
dou.ua/forums/topic/33240
Тем масса, можно разобрать назначение разных map’ов (switchMap, concatMap..) или что-то с rxjs, про zone.js, change detection и тд. То есть писать, про темы которые важные, местами сложные и насколько я знаю не так уж много статей про них на украинском, если они вобще есть.

Я прочитав цей критичний комент і пішов подивитись скільки у автора коментаря статей на Доу і яка їх якість.

То есть нельзя критиковать фильм, пока сам не снимешь кино?

Но можно же например написать что-то простое, однако полезное

Просте і корисне для кого? Для вас конкретно? Чи вам дали мандат говорити від імені всіх людей що корисне, а що ні?

То есть нельзя критиковать фильм, пока сам не снимешь кино?

Я не говорив, що не можна критикувати. Але критика може бути різною. Одна критика стимулює автора розвиватись далі, а інша «критика» може відбити повне бажання ділитись знаннями з іншими. Суть не в критиці як такій, а в тому як її виражають.

Просте і корисне для кого? Для вас конкретно?

Сейчас на доу (и не только) появляются статьи исключительно ради статей — это как рак рерайта который захламляет пространство.
Как я определяю полезность материала:
1) Распространённость информации из данного материала.
Наличие хоть какой-то статьи, пускай и короткой, лучше чем отсутствие вовсе.
Статей сравнивающих фреймворки, просто вагон и маленькая тележка, любые языки, видео, текст, подкасты. И как заметил комментатор выше

шаблон побудови один і той самий (з певними варіаціями звісно) — історія, кількість скачуваннь, плюси і недоліки.

То есть данная информация имеет широкое распространение в сети интернет. Ставлю 0 из 3.
И для примера возьмем что-то из того что предложил я, change detection (раз уж ТС работал с ангуляром и данная статья имеет отношение к нему). По сути есть одна подробная статья на англ и ее перевод на русский. И по мелочи. При попытке поискать по украиноязычному сегменту, я не нашел ничего (возможно я плохо искал). То есть, я бы оценил необходимость статьи на эту тему в 2 из 3 (балл снял за то, что информация в принципе существует и есть несколько альтернативных статей, но можно же сделать лучше).

2) Раскрытие. Тут все просто, насколько раскрыта тема. Хорошо когда есть хоть какая-то инфа, но хорошо когда она подробная.
Раскрыта ли здесь тема a&v, вопрос дискуссионный. На мой взгляд — фактически нет. Ибо сравнивают популярность, и очень вскользь технические аспекты. С таким сравнением, люди выберут реакт 🤣 . В целом тема раскрыта так же как и в других материалах. Не возникает ощущения: «вау а это что-то новое, о чем другие не писали/говорили». 0 из 3

3) Доступность. Это косвенно техническая статья, ибо фактически никаких технических вопросов не касается, едва ли здесь можно что-то оценить. В целом 2 из 3, я думаю можно поставить.

4) Оформление. Приятно читать структурированную и хорошо оформленную статью. Тут с этим проблем нет, 1 из 1.
Итого 3 из 10. Конечно, это моя субъективщина, но все же, ответьте мне на вопрос (на самом деле два):
зачем нужен очередной рерайт и какова его ценность?

Чи вам дали мандат говорити від імені всіх людей що корисне, а що ні?

У нас цифровой гулаг? Высказываться запрещено? Видимо я что-то пропустил.

а інша «критика» може відбити повне бажання ділитись знаннями з іншими.

Тогда такому человеку нечего делать в интернете. Я иногда пишу про урбанизм и проблемы в городе и от части аудитории получаю фитбек в виде «грязи», непонимания и угроз, это повод «быть анонимным», но не повод перестать заниматься просветительской деятельностью.

Ого! Ви навіть придумали критерії поганої статті, щоб виправдати свою токсичність.

Людина може писати про що їй завгодно. Якщо програміст вирішив написати про те, з чим він працював і поділитись своїми думками, оформив досить об’ємну статтю з непоганим візуальним наповненням, набрався сміливості показати її іншим людям (серед яких, скоріше всього, є більш досвідчені) і ця стаття пройшла модерацію DOU, то він красунчик. І не важливо, що є в цій статті і наскільки вона цікава кожному конкретно.

Є тисячі програмістів, для якиї RxJS і чергова стаття про різні оператори і Observable вже в печінках сидять, так само як і про Change Detection. Це просто значить, що в них інший технічний рівень, їх цікавлять інші технології, а не те, що стаття про RxJS погана чи беззмістовна.

Якщо не подобається — пройдіть мимо. Вам була не цікава стаття — це нормально, так і напишіть «стаття для початківців і мені була не цікава, хочу бачити більш технічно глибокі статті». Але не треба обзивати статтю і стверджувати, що краще було б не публікувати її зовсім. Який сенс від такого коментарю? Ви під усіма статтями, які вам не цікаві і пишете, що вони не заслуговують бути опублікованими?

зачем нужен очередной рерайт и какова его ценность?

Цінність кожен визначає для себе сам. Якщо стаття не цікава одному, це не значить, що в ній немає цінності. Якщо стаття не цікава більшості — на такий сайт просто не будуть заходити. Це рішення редакції DOU, які статті публікувати.

У нас цифровой гулаг? Высказываться запрещено? Видимо я что-то пропустил.

Цифровий гулаг — це коли людині за першу статтю виливають відро помиїв на голову. Я вважаю, що в інтернеті повинна бути повага і діяти норми моралі, точно так як в житті. От ви б змогли сказати автору у вічі, що його стаття — рак рерайту? Я сумніваюсь. То для чого це робити тут?

Я иногда пишу про урбанизм и проблемы в городе и от части аудитории получаю фитбек в виде «грязи», непонимания и угроз, это повод «быть анонимным», но не повод перестать заниматься просветительской деятельностью.

Тобто, для вас це норма, коли ви хочете чимось щиро поділитись, а на вас виливають бруд і погрожують? Це так і повино бути? Треба приховуватись і маскуватись, як бандид?

Є тисячі програмістів, для якиї RxJS і чергова стаття про різні оператори і Observable вже в печінках сидять, так само як і про Change Detection. Це просто значить, що в них інший технічний рівень, їх цікавлять інші технології, а не те, що стаття про RxJS погана чи беззмістовна.

Я вам написал почему это могло бы быть актуально. Я специально настроил региональный поиск, укр и тд. Ни одной статьи про cd на украинском, ни одной, 0, zero. Я не так давно хотел сделал gitbook с ответами на украинском по теме «300 вопросов js для собесов». И понял что фактически весь украинский контент из мира js ограничивается mdn, все остальное нужно либо переводить, либо писать самому.
Но да, давайте напишем очередную статью сравнения. Все же уже есть, писать больше не про что.

Ви під усіма статтями, які вам не цікаві і пишете, що вони не заслуговують бути опублікованими?

Так я автору ничего и не писал :) Я ответил вам на комментарий.

Цифровий гулаг — це коли людині за першу статтю виливають відро помиїв на голову.

Помои это нормально, без них не будет развития. Ученые которые толкают наш мир, находятся пожалуй в самом, как вы сказали «токсичном» обществе, обществе таких же ученых :) Но это скорее подзадоривает их.
Гулаг это когда указывают, что можно писать, а что нет. Как пытались сделать вы. У нас вроде бы такого нет, поэтому автор вправе писать что хочет, как и я вправе высказывать свое «фее» и для этого мне не нужен «мандат».
п.с. Это же надо было такое придумать 🤣 - мандат. В стендапе не пробовали выступать?

От ви б змогли сказати автору у вічі, що його стаття — рак рерайту

Думаю автор и так это понимает :) Подобные публикации мы писали в вузе, когда нас заставляли преподаватели (на них тоже давили сверху). Возможно автор, тоже не по своей воли писал.
*ТС* моргни два раза, если тебя держат в заложниках 😂

Тобто, для вас це норма, коли ви хочете чимось щиро поділитись, а на вас виливають бруд і погрожують?

Угрозы конечно нет, а вот помои, да. Это норма. Абсолютно на любую инициативу всегда найдуться резкие противники (которых не переубедить в принципе, с ними нет смысла работать), так и просто противники, которые в конечном счете могут занять твою позицию.
В этом нет ничего плохого и это было всегда.

Имхо в статье не хватает информации о скорости и удобстве каждого из фреймворков.

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

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

Открывая Vue приходится чуть ли не весь проект лопатить, что бы понять, что к чему

. Это где вы такой вью видели? По моему по тому как описывается компонент во вью все сразу понятно. Вот тебе темплейт, вот твои реактивные переменные в data, вот твои обработчики в methods, хочешь геттер на тебе computed и тд

Было бы интересно посмотреть на сравнение этих двух с третьим крупным игроком — React
Судя по ленте Линкедина, реакт разработчики требуются намного чаще, чем ангуляр или вью.

Залежно з якою метою порівнювати, бо це різні речі.
Ангулар і Вю дають готовий фреймворк з cli і ніштяками з коробки.

Реакт це екосистема і тусовка навколо ліби для рендеру.

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

У вуя к недостатком помимо некоторой боли с ют, отнес бы переходный период со второй на третью версию. И полгода не прошло как третья наконец-то стала стейбл, но, увы, экосистема для прода скорее не готова.

Достаточно посмотреть на стек трейсы в Angular по 250 линий.

Подписаться на комментарии