Angular TS

Компонентна архітектура

Компонентна архітектура є однією з речей, яка робить різницю між AngularJS та його наступником. Компоненти Angular можна розглядати як невеликі частини інтерфейсу користувача, як розділ програми. Хоча кожен компонент інкапсульований своєю функціональністю, в Angular існує сувора ієрархія компонентів. Наприклад, в Angular 9 були представлені компоненти Google Maps і YouTube Player.

Можливість повторного використання

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

Читабельність

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

Дружній модульне тестування

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

Ремонтопридатність

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

TypeScript

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

RxJS

RxJS — це бібліотека, яка зазвичай використовується з Angular для обробки асинхронних викликів даних. Thinkster пропонує переглядати RxJS для коду JavaScript так само, як і конвеєр Генрі Форда для виробництва автомобілів. Це дозволяє паралельно обробляти події незалежно та продовжувати виконання, не чекаючи, поки якась подія станеться, і веб-сторінка не відповідає. В принципі, це працює як складальна лінія, де виконання розбивається на окремі та взаємозамінні частини, а не прив’язується до однієї людини. Очевидно, що асинхронне програмування існувало до появи RxJS, але ця бібліотека спростила багато речей.

Філософія незалежності від платформи

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

Висока продуктивність

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

Введення ієрархічних залежностей

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

ієрархічне дерево ін’єкцій залежностей

Кожне дерево компонентів має призначене дерево інжекторів які містять інформацію про залежності

Angular Universal

Angular Universal — це служба, яка дозволяє відтворювати перегляд програм на сервері замість клієнтських браузерів. Google надає набір інструментів для попереднього або повторного відтворення програми для кожного запиту користувача. Наразі набір інструментів адаптовано до серверних фреймворків Node.JS і підтримує ASP.NET Core. Google стверджує, що вони збираються додати підтримку PHP, Python і Java.

Програма візуалізації Ivy

Компоненти та шаблони Angular написані на TypeScript і HTML, але фактичний HTML не використовується безпосередньо в браузері. Потрібен додатковий крок, коли HTML і TypeScript інтерпретуються в інструкції JavaScript. Рендерер — це механізм, який перекладає шаблони та компоненти в JavaScript і HTML, які браузери можуть розуміти та відображати. Ivy — це третя ітерація рендерера Angular після оригінального компілятора та рендерера2.

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

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

Час компіляції AOT зменшено з 0,8x до 0,5x для перевіреної програми документації Angular.io, що означає, що рендерер забезпечує швидшу компіляцію в інших програмах а також.

Менший розмір збірки

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

Довгострокова підтримка Google

Деякі розробники програмного забезпечення вважають просто той факт, що Angular підтримується Google, є головною перевагою цієї технології. Хоча це може здатися виправданим, самого Google недостатньо. Хорошим знаком є те, що Google оголосив про довгострокову підтримку (LTS) для цієї технології. Ігор Мінар і Стівен Флуін, інженери Angular, підтвердили це зобов’язання під час NG-Conf 2017 Keynote.

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

Потужна екосистема

Оскільки Angular існував ослині роки, його завалили пакети, плагіни , надбудови та засоби розробки. Ви можете дослідити частину роботи спільноти, переглянувши список ресурсів Angular. До них належать IDE, інструменти, середовища інтерфейсу користувача, Angular Universal для рендерингу на стороні сервера, про які ми згадували вище, інструменти аналітики, засоби для ASP .NET, бібліотеки даних тощо.

Елементи Angular
Якщо у вас є кілька проектів, деякі з яких не є Angular, із 6-м оновленням ви можете використовувати Angular Elements в інших інженерних середовищах. Це можуть бути програми, створені за допомогою VueJS, React або навіть jQuery. Ви можете повторно використовувати свій компонент Angular, обернувши його як елемент DOM (спеціальний елемент). Це дуже зручно, якщо вам або вашій команді доводиться перемикатися між різними середовищами.

Двостороннє прив’язування даних

AngularJS створено на основі архітектури Model-View-Controller. І фреймворк синхронізував модель і вигляд. Оскільки дані в моделі змінюються, перегляд також змінюється. Двостороннє зв’язування даних дозволило інженерам скоротити час розробки, оскільки не вимагало написання додаткового коду для забезпечення постійної синхронізації перегляду та моделі.

Директиви

Ця функція фактично ввімкнув згадане вище розширення HTML. Директиви дозволяли розробникам призначати особливу поведінку об’єктній моделі документа (DOM), дозволяючи інженерам створювати динамічний і насичений вміст за допомогою HTML.

Впровадження залежностей

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

Спільнота

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