Angular у 2024 році

pic

2024 рік був цікавим для Angular. Для мене виділяються чотири основні моменти:

  1. Довгострокові наслідки співпраці з Wiz
  2. Ікрементальна гідратація як короткостроковий результат цього партнерства
  3. Продовження роботи над Signals
  4. Введення режиму без зон (zoneless)

Співпраця з Wiz

У березні, на ng-conf, команда Angular оголосила про партнерство з Wiz, внутрішнім фреймворком Google, що підтримує продукти на кшталт Google Search. На відміну від Angular, Wiz не є орієнтованим на розробників, але відзначається високою продуктивністю, створений для додатків, які повинні завантажуватися миттєво. Angular, натомість, забезпечує кращий досвід для розробників, але історично поступався за продуктивністю при початковому завантаженні.

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

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

Ікрементальна гідратація

Одним з перших помітних результатів співпраці з Wiz стала ікрементальна гідратація. В основі гідратації лежить ідея з’єднання серверного рендерингу (SSR) і повністю інтерактивного додатку на Angular.

На початку року Angular представив Event Replay, основну функцію для серверно-рендерених (SSR) додатків. Вона вирішує проблему "страшної долини" SSR, коли взаємодії користувача відбуваються до того, як Angular повністю ініціалізується. Event Replay гарантує, що ці взаємодії будуть захоплені і відтворені, як тільки Angular буде готовий.

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

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

Signals

Легко сказати, що 2024 рік не був роком Signals. Версія 18 не принесла нічого нового, а функція effect досі в розробницькому попередньому перегляді. Тим не менш, версія 19 принесла нам linkedSignal і пару rxResource/resource.

linkedSignal — це корисна утиліта, яку ми можемо використовувати замість effect, щоб створити робочі копії Signals з залежністю від оригіналу.

resource — це більше, ніж просто хороша утиліта. Вона мостить прірву між Signals і асинхронними задачами та є однією з відсутніх частин для "цілісного досвіду з Signals". resource не просто повертає Signal. Її API включає статус, потенційну інформацію про помилки, функцію перезавантаження та опцію скасування асинхронних задач. Вона надає основу для будь-яких майбутніх функцій, що виконують асинхронні операції.

З resource ми також бачимо шлях до альтернативи HttpClient на основі Signal, яка тепер відома як httpResource. Питання керування асинхронними задачами та їхніми гонками без RxJS також було вирішено. resource має вбудовану реалізацію switchMap, а якщо потрібно більше, завжди можна використати rxResource, яке приходить з RxJS.

Zoneless

Наявність експериментального режиму без зон у Angular 18 була досить несподіваною. Коли Signals з’явилися влітку 2023 року, їхньою головною особливістю була здатність забезпечувати виконання без зон.
Це також вимагало так званих Signal Components, які б запускали Change Detection замість того, щоб покладатися на zone.js.

З часом команді Angular стало зрозуміло, що zoneless і Signals не обов'язково мають бути пов'язані. Вони налаштували функцію markForCheck, яка є важливою для кожного компонента з OnPush, і знайшли рішення. Замість того щоб просто позначити компонент як "брудний", тепер markForCheck також викликає Change Detection. Це просте зміна дозволяє досягти режиму без зон з мінімальними зусиллями.

Основною зміною стало використання markForCheck як тригера — ймовірно, набагато простіше, ніж введення Signal Components. Але це ще не все. Існуючі додатки та бібліотеки не потребують переписування. Zoneless працює без Signals взагалі. Насправді, додатки, що використовують OnPush для всіх своїх компонентів, вже можуть працювати в режимі zoneless, навіть не усвідомлюючи цього.

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

Перспективи

Питання, яке стає дедалі актуальнішим — це дата завершення Angular Renaissance. З введенням автономних компонентів кожен великий реліз приносив усе більше нових функцій. Тож, коли ми досягнемо такого стану, коли роутер, форми та HTTP пакет повністю підтримають Signals?

Для HTTP-комунікації resource став першим кроком. Ми також побачили ранні варіанти потенційного рішення для форм на основі Signals. Ці функції, ймовірно, будуть розвиватися протягом 2025 року, з двома основними релізами, що очікуються. Шанси високі, що Angular 21 представить їх — ймовірно, як розробницький попередній перегляд.

Моя здогадка — це Angular 21, хоча я більше схиляюся до Angular 22 в 2026 році. Але навіть це не буде кінцем. Потенційні зміни у форматі авторингу також на горизонті. Згідно з Мікою Гечевим, лідером продукту Angular, компоненти без селекторів будуть відігравати важливу роль у 2025 році. Це означає один імпорт замість двох, але це лише початок. Ранні варіанти показують можливість альтернатив, таких як використання функцій замість класів або застосування синтаксису, подібного до Vue.

Що б там не було, Angular Renaissance не завершиться в 2025 році.

Що це означає? Більшість згаданих функцій для 2024 року все ще знаходяться на етапі розробницького попереднього перегляду або експериментальних стадіях. Якщо ваша політика дозволяє використовувати лише стабільні функції, ви ще не можете використовувати Signals, оскільки effect досі в розробницькому попередньому перегляді.

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

Як нещодавно написав Алекс Рікабау, лідер фреймворку Angular, на Reddit: для нового проєкту він би навіть використовував функцію rxResource, незважаючи на те, що вона експериментальна.

Добра новина в тому, що вам не обов’язково цього робити. Angular 19, 20 та 21 все ще будуть чудово працювати з NgModules, без Signals і з zone.js. Ви можете впроваджувати ці зміни у власному темпі.

Всього найкращого на 2025 рік!

Перекладено з: Angular in 2024

Leave a Reply

Your email address will not be published. Required fields are marked *