Порівняння JavaScript фреймворків Vue.js, React і Angular (2019)

1. 1. Рендеринг - відображення кінцевого результату
2. 2. Архітектура компонентів
3. 3. Спрямованість і класи залежностей
4. 4. Зворотна сумісність
5. Angular
6. React
7. Vue.js
8. 5. «Техпідтримка» - документація і ком'юніті
9. React
10. Vue.js
11. Angular
12. Підсумуємо

Починаючи новий проект, програміст стикається з вибором: який JavaScript фреймворк вибрати для сайту - Vue.js, React або Angular? Відмінності між ними є, і досить істотні. Однак кожен з них підходить для вирішення завдань. Тому залишається відкритим питання ефективності роботи.

Відкритих даних по широті використання фреймворків немає, проте непрямий аналіз відкритих вакансій на сайті Indeed.com дає досить цікаве розподіл:

1 місце - React 78,1%

2 місце - Angular 21%

3 місце - Vue.js 0,8%

4 місце - без уточнення середовища 0,1%

Дані опитування StackOverflow дають вже дещо інші цифри: 67% голосів віддано React, тоді як за Angular «проголосувало» 42% програмістів.

Виходить, що популярнішим всіх - React . Але чи означає, що він буде ефективніше? Зовсім ні, адже за популярністю криється лише використання середовища в таких проектах, як Facebook, Instagram. До того ж, наприклад, на Github саме у Vue.js найбільше «зірочок».

Тому варто відмовитися від чужого досвіду і спробувати порівняти JavaScript фреймворки за фактичними показниками, які критичні для розробника.

1. Рендеринг - відображення кінцевого результату

Javascript фреймворки в першу чергу варто порівняти з рендерингу сторінки. Сучасна архітектура допускає два види: на стороні клієнта (сторінка промальовується за рахунок потужностей ПК користувача) або на стороні сервера.

DOM - Document Object Model - об'єктна модель документа, що дозволяє зчитувати і змінювати вміст, оформлення і навіть структуру html-документів. Кожен з фреймворків підходить по-своєму до обробки DOM що і впливає на рендеринг кінцевої сторінки, яка відображається на екрані користувача.

Vue.js і React створюють копію DOM, обробляють її, а потім результат порівнюється з вихідною версією. В кінцевому документі (тобто на екрані користувача) замінюються тільки ті частини сторінки, які відрізняються від результатів обробки.

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

У корені відрізняється підхід до обробки DOM фреймворком Angular версії 1.x і вище . Тут відбувається поділ на два потоки, причому за рендеринг DOM «відповідає» браузер (клієнтська частина), а за створення директив, завантаження коду і сервісів - загальний потік (серверна частина).

Але це зовсім не означає, що рендеринг відбувається на стороні клієнта - візуалізація як і раніше проводиться серверами. Отже, SEO оптимізація не викличе труднощів. Пошуковим роботам буде надана коректна сторінка при індексації.

2. Архітектура компонентів

React не відноситься до фреймворками в чистому вигляді. Це свого роду модифікована бібліотека, «заточена» під MVC (Model-View-Controller, де Модель відповідає за надання даних, Вид - відображає дані Моделі користувачеві, а Контролер інтерпретує дії користувача і змушує Модель вносити зміни).

Angular і Vue.js відносяться вже до самих фреймворками.

Якщо в основі архітектури проекту лежить React, то це зумовлює:

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

Отже, для реалізації архітектури знадобиться більше часу. Низькорівневий API (Application Programming Interface - набір готових команд, докладніше про те, що таке API ) Вимагає занадто довгою настройки.

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

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

3. Спрямованість і класи залежностей

React і Vue.js підтримують тільки односторонню передачу даних. При цьому в React об'єкти вміщені. Говорячи простою мовою, кожен з об'єктів програми відноситься до кінцевих процедурам, які не вимагають дій користувача до закінчення роботи.

Однак React підтримує копіювання і передачу стану. Тобто, властивості прописаних об'єктів можуть бути відновлені на іншому пристрої, якщо запустити додаток і повідомити стан компонентів. Отже, рендеринг буде ідентичним, на екранах обох пристроїв буде одна і та ж «картинка».

фреймворк Vue.js працює вже трохи інакше. JS і раніше односторонній, але компоненти працюють з шаблонами, і на виході виходить чистий html. Є підтримка JSX, що спрощує перехід з React і схожих бібліотек.

Для фреймворка автоматизована логіка процесів за рахунок побудови директив. Досить додати потрібну директиву, щоб отримати додаткову функціональність. Наприклад, необхідно зробити блоковий елемент

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

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

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

підтримка MVVM (Model-View-ViewModel) допускає рішення різних завдань в одному розділі програми з використанням одного набору даних. Залежність функцій визначає двосторонню спрямованість передачі даних. Кожна процедура може запустити інший процес.

4. Зворотна сумісність

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

Angular

Повноцінний фреймворк. Абсолютна залежність від попередніх версій і компонентів. Прямий перехід з 4.0 на 5.0 неможливий, доведеться послідовно встановлювати всі оновлення між версіями. Це призведе до необґрунтованого збільшення обсягу програми. До речі, цікавий факт, Angular версії 3.0 не існує . Після 2-ї версії відразу йде 4-я.

React

Бібліотека. Повна сумісність між версіями. Можливе підключення до додатка бібліотек різних версій, оновлення застарілих зі спадкуванням властивостей.

Vue.js

Прогресивний фреймворк (згідно заявою головного розробника Vue.js Евана Ю ). Модульна система аналогічна React, але включає в себе всі атрибути JS-фреймворка, що працюють з повною зворотною сумісністю.

5. «Техпідтримка» - документація і ком'юніті

При виборі якоїсь певної архітектури не можна ігнорувати підтримку спільноти програмістів (ком'юніті). Адже навіть прості функції можуть викликати труднощі.

І чим складніше проект, тим частіше розробник звертається і до технічної документації обраної середовища, і за порадою до ком'юніті. Тому варто порівняти «підтримку» кожного JS-фреймворків

React

Досить непросто організована «техпідтримка» середовища React. З одного боку, ком'юніті складають тисячі програмістів в різних країнах, що повністю знімає мовний бар'єр. Порадитися з «колегами по цеху» можна на будь-якій мові, російською, англійською, китайською та іншими.

Однак відкритий вихідний код і щоденне поява нових бібліотек на базі React є недоліками середовища. Складно знайти документацію, яка б вичерпно описувала процеси застосування, функції та властивості конкретної свіжої випущеної бібліотеки.

Найчастіше нові модулі з'являються таким чином: програміст створює бібліотеку для вирішення якогось завдання в своєму проекті. Потім він пише інструкція і викладає напрацювання в інтернет.

Vue.js

Детальна документація для фреймворка - «візитна картка» Vue.js. Однак прихильники середовища не згадують, що велика частина «мануалі» не має нормального перекладу ні на англійську, ні на російську мову.

Спільнота користувачів, незважаючи на велику популярність Vue.js на «Хабре» або Github, задоволене скромне, особливо в порівнянні з Angular або React. Навіть JQuery користується набагато більше розробників, ніж Vue.js.

Як правило, відповідь на питання про реалізацію завдання очікується кілька діб. І не факт, що хтось зможе відповісти.

Кілька полегшить використання середовища чат на офіційному сайті проекту.

Angular

На відміну від Vue.js і React, для фреймворка написана не тільки докладна документація, а й випущено чимало гайдлайни. Отже, не доведеться вдаватися до допомоги ком'юніті для пошуку відповідей.

Кількість програмістів, що використовують фреймворк, обчислюється сотнями тисяч. Розробник в будь-який момент може поставити запитання з розряду «Howto». Для цього не доведеться шукати офіційний сайт проекту. Звернутися за допомогою можна і на stackoverflow, і на toster, і на інших майданчиках, аж до «Ответы@mail.ru».

Обов'язково знайдеться людина, яка знає, як вирішити поставлену задачу або підкаже, де знайти відповідь.

Як вирішити задачу і де знайти відповідь - однозначно підкажуть наші ментори з програмування на JavaScript вибрати ментора

Підсумуємо

Звичайно, порівняти фреймворки абсолютно об'єктивно досить важко. Але аналіз дозволить починаючому розробнику підібрати платформу. Підведемо підсумки:

1. Якщо потрібно швидко вивчити середу, то варто вибирати між Vue.js і React.
2. На Vue.js легко перейти як користувачу Angular, так і React. Адже тут виходить чистий html-код, знайомий всім розробникам. Прийоми і техніки використовуються приблизно ті ж, що і в Angular.
3. Якщо передбачається розробка великого проекту, то варто розглядати Angular в якості основи. Він забезпечує максимальну гнучкість і швидкість рендеринга. Величезний досвід інших розробників дозволить вирішити питання, які обов'язково виникнуть при роботі над додатком. React виявиться занадто об'ємним, а для Vue.js ще не існує великої кількості гайд-лайнів.
4. Якщо до розробки в майбутньому будуть залучатися інші програмісти, то Vue.js стане кращим вибором. Адже цей фреймворк не тільки простий для вивчення, а й дозволяє міняти додаток без руйнування його архітектури.
5. Якщо для проекту передбачається багатоступінчате оновлення і розширення функціональності в майбутньому, то варто використовувати Vue.js або React через чудовою зворотної сумісності.

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

Адже час, витрачений на вивчення специфіки фреймворка, відсуває випуск програми в комерційне використання на невизначений термін. При цьому, техпідтримка реалізованого проекту може виявитися непосильним тягарем, яке «розжене» штатних програмістів.

Читай також: