Порівняння між Angular та React та їх основними мовами

У цій статті ми порівняємо дві найпопулярніші веб-технології у 2019 році, а також розглянемо їх історію, ключові відмінності, рекомендовані основні мови (TypeScript та JavaScript) тощо. Загалом, ці технології значно полегшили розробникам повторне використання, рефакторинг та підтримку коду, розділивши речі на модулі / компоненти.

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

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

Якщо ви хочете стати кращим веб-розробником, відкрити власний бізнес, навчати інших або просто вдосконалити свої навички розробки, підпишіться на мій бюлетень, щоб отримувати останні веб-новини та оновлення.

Питання для вирішення

  • Які ключові відмінності між Angular та React?
  • Що робить TypeScript таким особливим?
  • Наскільки популярні ці технології?
  • Який поточний статус із відкритим кодом?
  • Яку технологію компанії використовують найбільше?
  • Чи впливають статичні типизовані мови на якість коду та час розробки?

Майбутні розділи будуть додані на основі попиту з коментарів.

Ключові порівняння

Ось коротке порівняння між сторонами Angular (ліворуч) та React (праворуч).

Одне, що насправді чудово стосується React з точки зору продуктивності, - це Virtual DOM, про який ви, напевно, чули пару разів. Якщо ні, не хвилюйся, я поясни!

Проблема

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

Віртуальний DOM

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

Звичайний DOM

Він буде оновлювати всю деревоподібну структуру тегів HTML, поки не досягне дати народження.

Чому це важливо?

Це може не мати значення для вищеописаної проблеми. Однак, якщо ми маємо справу з 20–30 асинхронними запитами даних на одній і тій же сторінці (і для кожного запиту сторінки ми замінюємо цілий блок HTML), це впливатиме на продуктивність, а також на взаємодію з користувачем.

Потрібно більше контексту? Перегляньте статтю Дейса!

Але спочатку повернімось до початку ...

Історія

Нам потрібно буде знати трохи історії (контексту), оскільки вона дає уявлення про те, як все може скластись у майбутньому.

Я не буду вдаватися в подробиці того, що саме сталося між Angular та AngularJS, і я впевнений, що є багато доступних ресурсів, які це охоплюють. Але коротше, Google замінив AngularJS на Angular, а JavaScript на TypeScript.

Добре, тому ще в часи ES4 / ES5 крива навчання для JavaScript була справді високою. Якщо ви походили зі світу Java, C # або C ++, світу об'єктно-орієнтованого програмування (OOP), то вивчення JavaScript було просто не таким інтуїтивним. Іншими словами, це був біль у дупі.

Це не тому, що мова була погано написана, а тому, що вона має інше призначення. Він був побудований для обробки асинхронної природи Інтернету, такої як взаємодія користувача, прив'язка подій, переходи / анімація тощо. Це інша тварина з різними інстинктами.

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

Як показують Google Trends, Angular та React - дві найпопулярніші веб-технології у 2019 році.

Angular має більше пошукових запитів, ніж React, проте це не обов'язково означає, що один кращий за інший. Але це вказує на те, що людям цікаво, якою б не була причина. Важливо пам’ятати, що люди можуть поєднувати між собою такі ключові слова, як AngularJS або Angular, і, таким чином, призводити до вищих пошукових пошуків.

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

Важливо, щоб ми не нехтували історією з точки зору того, що сталося між AngularJS та Angular, оскільки історія є формою вказівки на те, що може трапитися в майбутньому. Але якщо у вас є якийсь досвід роботи з Angular та AngularJS, то ви, швидше за все, зрозумієте, чому рішення приймалися на краще. Зазначимо лише, подібні речі можуть траплятися з будь-якими фреймворками, включаючи React.

Відкрите джерело

У React понад 100 000 зірок, разом із 1200 авторами та близько 300 питань, які чекають на вирішення.

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

Що стосується Angular, то на перший погляд ми чітко бачимо, що у Angular 6 разів більше проблем, ніж React (не добре). Однак ми не повинні забувати, що Angular - це набагато більший фреймворк, а також має менше розробників, які використовують його (в даний час), оскільки він був випущений в 2016 році.

Статистика взята зі сторінки Angular and Reacts GitHub.

Що використовують компанії

Спочатку React був розроблений у Facebook для Facebook, щоб оптимізувати та полегшити розробку компонентів. У статті, написаній Крісом Кордлом, вказується, що React у Facebook використовує більше, ніж Angular у Google.

То хто використовує яку технологію?

# Реагуйте

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • Whatsapp
  • Dropbox

# Кутова

  • Їжте24
  • Магазин CVS
  • однофутбольний
  • Google Express
  • НБА
  • Дельта
  • wix.com
Якщо ви знаєте про будь-які великі (відомі) компанії, що використовують Angular, поділіться цим за посиланням.

TypeScript та JavaScript (ES6 +)

Як я вже згадував, може бути оманливим лише порівняння Angular та React без зосередження уваги на основній мові, кожна з яких наголошує (відповідно до їхніх документів).

Примітка! Мета цього розділу - не вирішити, чи будемо обирати Angular чи React. Але з’ясуйте кілька помилкових уявлень між статично мовними та динамічно набраними мовами, які тривають вже деякий час, підкріплені дослідженнями.

Що стосується користувацької бази, JavaScript перевершує. Але TypeScript стрімко збільшується, тож хто знає, що принесе 10–15 років.

Популярність TypeScript за останні 5 років

Популярність JavaScript за останні 5 років

Популярність JavaScript проти TypeScript за останні 5 років

TypeScript був спочатку розроблений корпорацією Майкрософт для спрощення JavaScript (іншими словами, для полегшення ES5). Він був випущений в жовтні 2012 року. І це просто транслятор, який компілює TypeScript до коду JavaScript, що також означає, що ви можете писати код ES5 у файлі TypeScript. TypeScript називається надмножиною JavaScript.

Загалом, TypeScript забезпечує плавний перехід для програмістів із фоном об’єктно-орієнтованого програмування (ООП). Важливо відзначити, що TypeScript був випущений у період ES5, і за цей час ES5 не був мовою ООП, що базується на класах.

Коротше кажучи, найближчим чином ви могли наблизитись до класів та об’єктів тоді через спадкування прототипів. І, як ми знаємо, це був складний перехід для більшості розробників із фоном ООП. Тож ідеальним рішенням було, звичайно, вибрати те, що вам було комфортно та знайомо, і це, швидше за все, був TypeScript.

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

Статично та динамічно набрані мови

Статично набрана мова в основному означає, що ви можете визначити тип змінної (рядок, число, масив тощо). Ви можете запитати, чому це важливо. Ось реальна аналогія, яку я налаштував (творчість у найкращому випадку).

Скажімо, ви хочете заправити автомобіль бензином. Важливо одне - заправляти потрібним газом - бензином або дизелем. А якщо ви не знаєте, можливо, вам доведеться придбати нову машину.

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

Гаразд, тож якщо вас все ще бентежить, що означає статично набраний текст, перевірте це:

Властивість статичного типу

Статичний набраний аргумент

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

На щастя, дослідження (tl; dr video) сприйняли це серйозно і поставили цей міф на перевірку 49 суб’єктам.

Спостереження з дослідження:

  • Статично набрана мова вимагає більше часу через виправлення помилок друкарської помилки
  • Мова, що динамічно набирається, читається і простіше для написання (декларативний код)

Малюнок 5 показує, що в середньому розробники скорочують час розробки в два рази під час написання динамічно набраної мови.

Якщо ви хочете глибше заглибитися в цю тему, я пропоную прочитати цю статтю Еріка Елліотта, яка стверджує, що вам може не знадобитися TypeScript (або статично введені мови).

Що вибрати

Отже, питання полягає не тільки в тому, що пропонує Angular або React, а й у тому, на якій основній мові слід інвестувати час. І це не має значення, поки ви виберете щось, що відповідає вашим вимогам та складності.

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

Але якщо ви створюєте досить великий інтерфейсний додаток з Angular, який має справу з багатьма HTTP-запитами, тоді наявність типів дійсно допомагає у таких питаннях, як „Що це за об’єкт, які поля я можу використовувати, і який тип це поле тощо”. . Це чудово працює для співпраці та прояснення дрібниць.

Ось просте порівняння об’єктів класу між TS та JS (ES6).

ІМО

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

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

Ось оновлення - наразі я працюю з кількома розробниками Microsoft над створенням програми за допомогою Angular framework. Причиною того, що ми вибрали Angular, є те, що більшість пакетів вже визначені, і документація до всього знаходиться в одному місці. Він також наголошує на TypeScript, який є ідеальним вибором, оскільки більшість розробників вже мають великий досвід роботи з об'єктно-орієнтованим програмуванням.

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

Нотатки на винос

  • TypeScript - це просто перекладач, його можна використовувати з React або будь-якими іншими фреймворками JS
  • React ефективно обробляє управління пам’яттю (віртуальний DOM)
  • React використовує JavaScript (ES6), визнану веб-мову з 1995 року
  • Angular використовує TypeScript, випущений у 2012 році
  • Статично набрана мова - це чудово, але це не обов’язково
  • Динамічно набрані мови вимагають менше часу на написання та більшу гнучкість для використання творчості
  • Вивчення статично набраної мови може бути проблемою, особливо якщо ви працювали лише з динамічно набраними мовами
  • ES6 реалізував безліч чудових функцій, таких як модулі, класи, оператор розвороту, функції стрілок, літерали шаблонів, що дозволяє писати менше, чистіший та структурований код (синтаксичний цукор)
  • TS - це просто ES6 + з типами та багато іншого

Висновок

Вибрана структура / бібліотека компонентів може вплинути на те, скільки часу ви витрачаєте на програмування та ваш бюджет. Якщо у вас є команда з розробниками C #, Java або C ++, то я, мабуть, піду на Angular, оскільки TypeScript має багато спільного з цими мовами.

Найкраща рекомендація, яку я можу запропонувати, - це встановити базову програму як в Angular, так і в React, а потім оцінити мову та робочий процес, перш ніж приймати рішення.

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

Ось кілька статей, які я написав про веб-екосистему, а також особисті поради та підказки щодо програмування.

  • Хаотичний розум веде до хаотичного коду
  • Розробники, які постійно хочуть пізнавати нові речі
  • Практичний посібник з модулів ES6
  • Вивчіть ці основні веб-концепції
  • Підвищте свої вміння за допомогою цих важливих методів JavaScript
  • Програмуйте швидше, створюючи власні команди bash

Ви можете знайти мене в Medium, де я публікую щотижня. Або ви можете стежити за мною у Twitter, де я публікую відповідні поради та підказки щодо веб-розробки разом із особистими історіями.

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