Порівняння найкращих JavaScript Frameworks: Angular проти React

Питання, яке мені задають майже щодня, полягає в тому, що мені починати з ReactJS чи Angular? Однак перш ніж я продовжу, дозвольте мені дати вам застереження.

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

Логічний аргумент

Ви можете сперечатися, що Angular — це фреймворк, а React технічно — бібліотека. Я не заперечую цей факт, але це аргумент, у який я зараз не хочу вдаватися. Є пакети, які ви можете додати до React, які перетворять його на фреймворк, який безпосередньо конкурує з Angular. Ми порівнюємо дві екосистеми, а не точну структуру з точною бібліотекою.

Крива навчання

Почнемо з Angular. Ще одне застереження: коли я кажу про Angular, я маю на увазі Angular 4, а не AngularJS.

Angular — це великий фреймворк, що означає, що він потужний і містить багато. Є чому навчитися. Ви почуєте багато нової страхітливої ​​лексики, як-от ін’єкція залежностей, декоратори директив, канали тощо. Потім вам доведеться мати справу з Typescript, який є JavaScript, плюс купа інших функцій, включаючи статичний тип.

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

Але знову ж таки, це зводиться до переваг. Вам може сподобатися гнучкість, щоб робити речі різними способами. Як я вже згадував, ReactJS — це бібліотека, якщо ми говоримо лише про основну бібліотеку, вона набагато менша та набагато легша для вивчення, ніж фреймворк Angular. Ви можете сказати, що навчитеся React за менший проміжок часу. React сам по собі чудова бібліотека перегляду, але вона навіть не настільки потужна для великих програм. Якщо вам потрібна маршрутизація, перевірка, HTTP-запити в React, вам доведеться встановити інші пакети, і це додасть кривої навчання.

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

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

На відміну від Angular React не використовує шаблони. Він використовує щось під назвою JSX або розширення JavaScript або розширення синтаксису JavaScript, що дозволяє нам вбудовувати HTML у JavaScript. Спочатку це може здатися трохи дивним. Особливо, коли вас, напевно, вчили розділяти розмітку та JavaScript.

Подумайте про це як про розміщення HTML у JavaScript із кількома різними змінами: ви не можете використовувати атрибут класу, і вам потрібно використовувати назву класу.

Нарешті, у нас є Redux. React часто використовується з Redux або Flux, які є менеджерами стану рівнів програми. На мій погляд, Redux є чортяво важким, просто налаштувати його та вивчити його концепції важко.

Я думаю, що це надмірно використано. Я думаю, що багато розробників використовують redux там, де це не потрібно. Він не потрібен для невеликих програм, але багато розробників наполягають на його використанні. Це знову зводиться до переваг. Redux дуже потужний, я не хочу його забирати. Коли говорити про криву навчання, це до біса важко зрозуміти.

особливості	Реагувати	Кутова
Мова програмування	JavaScript	TypeScript
Структура коду	впевнений	гнучкий
Основна бібліотека	Маленький	Дуже великий
шаблонування	JSX	HTML
Компетентність	Малі програми	Широкомасштабні програми

Переможець: нічия

Продуктивність

Несправедливо прямо порівнювати продуктивність Angular з React. Angular — це повний фреймворк, який включає в себе маршрутизацію, інструменти форм, бібліотеку HTTP, реактивні розширення тощо. Усі ці функції роздувають фреймворк і роблять його повільнішим. Однак React сам по собі є просто бібліотекою перегляду, яка набагато менша та швидша.

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

Змінивши Angular 2 на Angular 4 під капотом, вони зробили чимало для підвищення продуктивності. Angular 4 працює краще, ніж Angular 2. Тим не менш, React все ще перемагає у відділі продуктивності.

Angular проти React. Джерело: Academind.com

Переможець: Реагувати

особливості

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

особливості	AngularJS	Реагувати
Дата запуску	2009	2013
Мову	TypeScript, JavaScript	JavaScript
Відсоток ринку	0.3%
Модель	Так	Немає
Переглянути	Так	Так
Контролер	Так	Немає
Крива навчання	Комплекс	легко
шаблонування	Так	Немає
провал	Час виконання	Час компіляції
Візуалізація на стороні обслуговування	Немає	Так
DOM	Так	віртуальний
Мобільна підтримка	Так	Так
Візуалізація на стороні обслуговування	Немає	Так

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

Angular — це всеохоплюючий фреймворк. Він поставляється з компонентним маршрутизатором, реактивними розширеннями для спостережуваних, HTTP-клієнтом, модулем форми для перевірки та список можна продовжувати. Крім того, він пропонує двостороннє зв’язування даних у спосіб, який не робить жодна інша структура. Прив’язати дані з представлення до моделі надзвичайно легко за допомогою директиви ng model.

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

React використовує віртуальний DOM, який є дуже потужним. Він створює власну полегшену версію фактичного Dom і включає та оновлює лише те, що потрібно, а не оновлює все. Віртуальний DOM є основною причиною того, що React неймовірно швидкий.

React використовує JSX, який потужніший за стандартні шаблони, тому що ви можете розмістити в ньому абсолютно будь-який тип JavaScript, який забажаєте. JSX не є обов’язковим для використання React, але це робить усе набагато простіше. Я не можу придумати жодної причини, чому б ви також не використовували JSX з Angular. React також дуже добре справляється з керуванням станом і властивостями компонентів. Це спрощує роботу з даними та їх передачу між компонентами. Передавати дані між компонентами в Angular набагато складніше, ніж у React.

Core React важко підтримувати стан на рівні програми. Component State легко, але якщо ви хочете справжнє керування станом на рівні додатка, вам знадобляться Redux або Flux, які, як я сказав раніше, досить заплутані для вивчення. Зовнішні пакунки, які часто використовуються, як-от новий маршрутизатор React версії 4, трохи складні для сприйняття, але вони також дуже потужні, якщо навчитися їх запускати та налаштовувати. Також є багато різних способів його використання. React не має основного HTTP-компонента, як у Angular, але ви можете використовувати Fetch або Axios, який є зовнішнім HTTP-клієнтом, а Enzyme популярний для перевірки React. Є кілька різних пакетів, які зазвичай використовуються з React, навіть якщо вони не є частиною справжньої бібліотеки.

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

Переможець: Angular

Інструменти

Angular і React мають досить гарні інтерфейси командного рядка. Angular CLI і Create React App є чудовими, і вони дійсно дозволяють нам оптимізувати розробку. Angular CLI є трохи потужнішим, оскільки ми можемо швидко генерувати такі речі, як компоненти та служби. Create React не може цього зробити. Ви повинні створити все самостійно, що стосується файлів і базової структури. Обидві системи використовують веб-пакет, мають власні сервери розробників з автоматичним завантаженням і мають інструменти компіляції та збірки. Очевидно, Angular має додаткове завдання транспілювати Typescript. CLI має сценарій для цього, коли ми запускаємо ng serve. Все це відбувалося за кадром. Для цього він використовує щось під назвою TSC або Typescript Compiler, і обидва також мають засоби тестування.

особливості	Кутова	Реагувати
Інтерфейс командного рядка	Кутовий CLI	Створити React
Додаткові завдання	Транспіляція машинопису	Жодного
Тестування	Жасмин і Карма	є

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

Вони обидва гарні в цьому відділі.

Переможець: Angular

Екосистема

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

Ionic — популярний гібридний фреймворк, який є додатком Angular, який працює всередині нативної оболонки для мобільних додатків. Ви можете створювати мобільні програми за допомогою Angular. Гібридні програми можуть бути трохи незграбними порівняно з нативними програмами. Взаємодія з користувачем іноді може бути не такою чудовою – не такою швидкою та чуйною. Серед різноманітних гібридних фреймворків найкращим є Ionic 3. Існує також NativeScript, який дозволяє нам створювати справжні нативні програми для iOS і Android за допомогою Angular, а також JavaScript.

особливості	Кутова	Реагувати
Розробка гібридних програм	Іонний	*Не обов’язково
Розробка нативної програми	NativeScript	React Native
Візуалізація на стороні сервера	Кутовий універсальний	ТО
Бібліотека державного управління	Магазин NgRx	Reax Redux, MobX
Бібліотека інтерфейсу користувача матеріалу	Кутовий матеріал	Material-UI
Віртуальна реальність	Реактивний VR	ТО

Тим не менш, NativeScript, здається, не такий хороший, як React Native від Facebook, принаймні на даний момент. У Angular також є бібліотека компонентів матеріального дизайну, якщо ви фанат матеріального дизайну. Angular Universal — це початковий проект, який можна використовувати для візуалізації Angular на стороні сервера. Існує також магазин NgRx, який є бібліотекою керування станом, натхненною Reax redux. Він заснований на стані, зміненому одноранговими редукторами. Він також має інтеграцію з розширеннями Reactive.

Ви б помітили. Одного разу один з них робить щось, що інший копіює іншим способом. React і Angular стали фреймворками Microsoft і Apple JavaScript.

React має достатню екосистему. Він має React native, який є популярним. Це найкращий спосіб створювати мобільні програми за допомогою веб-технологій. React Native швидкий, і багато програм, якщо їх створено правильно, вони тут же з рідними програмами, створеними на Swift або Java. React має бібліотеку матеріального дизайну під назвою Material-UI, яка дуже схожа на компонент матеріального дизайну Angular, але більш зріла. JS — це фреймворк для рендерингу програм React на стороні сервера. Він прагне зробити це найпростішим способом, тому це можна порівняти з Angular Universal. MobX — ще один спосіб керування станом. Він працює дещо інакше, ніж Redux. Він надає набір декораторів для визначення спостережуваних і спостерігачів, а також вводить реактивну логіку у ваш стан.

Storybook — це середовище розробки для React. Це дозволяє вам переглядати бібліотеку компонентів, переглядати різні стани кожного компонента та інтерактивно розробляти та тестувати компоненти. Reactive VR перетворює React у віртуальну реальність. Desktop React — це бібліотека JavaScript, створена на основі бібліотеки Reacts, яка нібито приносить нативний досвід роботи з робочим столом в Інтернеті, включаючи багато компонентів macOS і Windows 10. Екосистема React надзвичайно велика та потужна. React прокладає собі дорогу в усі аспекти технологій, і це явний переможець.

Переможець: Реагувати

Люди в костюмах і краватках використовують Angular, а хіпстери зі скуйовдженими бородами використовують React.

	AngularJS	Реагувати
Головні розробники	Google	Facebook+Instagram
Вік	6 рік	2 роки
Розширюваність	Так	Так
швидкість*	1,35 секунди	310 мілісекунд
DOM	Браузер	віртуальний; лише повторно відображає змінені дані за допомогою механізму виправлення
Архітектура	Повна структура MVC	Лише компонент view
Крива навчання	Спочатку важко; вимагає знання певних концепцій, таких як директиви DOM, фільтри та фабрики.	Легше почати; містить спрощений API і синтаксис
Структура та компоненти	HTML, JS і CSS	Те саме; але може інтегрувати HTML із JS за допомогою JSX

Підсумок: це краватка

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

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