7 грудня 2019 року — День відкритих дверей
03.12.2019
Впровадження наукових та інформаційних підходів для навчання студентів на кафедрі комп’ютерних технологій
04.12.2019
Показати всі

Angular і React. У чому відмінність?

Angular і React є найбільш популярними технологіями у сфері front-end розробки. Angular розробляється та просувається таким гігантом IT-індустрії як Google, а React — відповідно Facebook. Відтак постає питання — яка з цих технологій краща і буде домінувати у найближчому майбутньому? Яку технологію має сенс вивчати для того щоб бути успішним на ринку праці?

Розберімо відмінності між цими технологіями і потім зробімо відповідний висновок.

  1. Архітектура. За архітектурою Angular є повноцінним MVC фреймворком, який надає розробникові всі можливості для програмування “з коробки”: шаблони, засновані на HTML; впровадження залежності (Dependency injection); запити Ajax; роутінг; інкапсуляція компонентів CSS; утиліти для тестування компонентів; можливості для створення форм тощо.   На відміну від Angular React є бібліотекою, яка надає тільки View. а як реалізувати Model і Controller віддається на розсуд розробника. “З коробки” надаються тільки такі можливості: замість шаблонів використовується XML-подібна мова JSX, як надбудова над JavaScript; немає впровадження залежностей; запити Ajax; утиліти для тестування компонентів.
  2. React використовує так званий віртуальний DOM. Віртуальний DOM розглядає лише відмінності між попереднім та поточним HTML та змінює частину, необхідну для оновлення. Це може значно пришвидшувати роботу веб-додатку.
  3. У Angular розмітка документу (шаблони HTML) і логіка (JavaScript) фізично розділені на різні файли. React використовує мову JSX, яка поєднує розмітку та логіку в одному файлі (полегшує читання компонентів).
  4. І Angular і React підтримують поняття компонент.
  5. Керування станом. Будь-який веб-додаток характеризується певним станом. Інтерфейс користувача, який описується компонентом, відповідає певному стану компонента на даний час. Як тільки дані компонента змінюються, фреймворк змінює відповідно і інтерфейс користувача. Це гарантує, що дані завжди актуальні. Для керування станом в React і Angular часто використовують Redux.
  6. Прив’язка даних (Data Binding). Тут дві технології сильно відрізняються одна від одної. Angular використовує двостороннє зв’язування. Наприклад, якщо ви змінюєте елемент інтерфейсу (введення користувача) на Angular, то також змінюється відповідний стан моделі. Крім того, якщо ви змінюєте стан моделі, то змінюється і елемент інтерфейсу — отже, двостороння прив’язка даних. Однак React має лише односторонній зв’язок. Спочатку стан моделі оновлюється, а потім він відображає зміну елемента інтерфейсу. Однак якщо ви змінюєте елемент інтерфейсу, стан моделі не змінюється. Деякі поширені способи зміни стану — через callbacks чи бібліотеки керування станом (див. попередній пункт).
  7. React використовує JavaScript, мову динамічної типізації (це означає, що вам не потрібно визначати тип змінної). В той час як Angular TypeScript. TypeScript — це мова статичної типізації, що означає, що ви повинні визначити тип змінної.
  8. Мобільні рішення. Angular та React пропонують рішення для створення мобільних додатків. У випадку Angular це фреймворк Ionic, який використовує контейнер Cordova, який вбудований в Angular. Однак отриманий додаток — це просто веб-додаток всередині контейнера веб перегляду. React Native, з іншого боку, — це платформа для створення справді нативних мобільних додатків.
  9. Легкість навчання. У випадку React спочатку треба вивчити JSX, але це нескладно. Потім потрібно вивчити бібліотеку маршрутизації, наприклад, react router v4, а далі бібліотеки керування станом — Redux чи MobX. У випадку Angular треба вивчити багато тем, починаючи від базових, таких як директиви, модулі, декоратори, компоненти, сервіси, введення залежності, pipes та шаблони. Після цього з’являються більш вдосконалені теми, такі як виявлення змін, зони, компіляція AoT та Rx.js. Отже вхідний бар’єр при навчанні для Angular дещо вищий, ніж для React.
  10. Популярність у Angular i React приблизно однакова.
  11. Приклади використання. Angular використовується Google, Nike, Forbes, Upwork, General Motors, HBO, Sony. React використовується Facebook, Airbnb, Uber, Netflix, Instagram, Whatsapp, Dropbox.

Висновок.

Обидві технології мають свої переваги та недоліки, є домінуючими у сфері front-end розробки і приблизно рівноцінні. Отже ви не помилитесь, якщо будете вивчати будь-яку з них, а краще обидві :).

 

Дмитро Красношапка,

старший викладач кафедри

комп’ютерних технологій

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *