Angular 19 продовжує курс на покращення досвіду розробників і підвищення продуктивності. Завдяки активній роботі команди над продуктивністю й реактивністю фреймворк отримав позитивні оцінки в останньому опитуванні State of JavaScript. Про це повідомляє Info World.
Incremental hydration
Гідрація — це процес, під час якого компоненти на клієнті стають інтерактивними після серверного рендерингу. Angular 19 вводить новий підхід — інкрементну гідрацію.
За допомогою директиви @defer розробники можуть точно вказати, як і коли має відбуватися гідрація кожного компонента. Це дає можливість налаштовувати поведінку для окремих частин інтерфейсу, балансуючи між SSR і CSR.
Повтор подій (Event replay)
У документації Angular 19 детально описано механізм повтору подій, коли користувач взаємодіє з неактивним компонентом до завершення гідрації, Angular зберігає і відтворює подію після ініціалізації. Це покращує UX без втрати продуктивності.
Більше контролю над серверними маршрутами
У версії 19 з’явився механізм ServerRoute, що дає можливість налаштовувати рендеринг кожного маршруту:
1) рендеринг на сервері;
2) рендеринг на клієнті;
3) попередній рендеринг.
Маршрути з параметрами за замовчуванням рендеряться на сервері, без параметрів — попередньо. Це дає можливість точніше оптимізувати UI для продуктивності.
Відмова від Zone.js
Angular 19 замінює Zone.js на RxJS. Zone.js використовувався для визначення моменту завершення асинхронних завдань під час SSR. RxJS уже широко використовується в Angular і забезпечує більш однорідний і зрозумілий підхід до оброблення подій і потоків.
Signals для @Input, @Output і ViewQuery
Signals набули популярності як засіб точного й універсального реактивного програмування з простим синтаксисом JavaScript. Angular рано почав їх впроваджувати, а у версії 19 зміцнив підтримку Signals для таких функцій:
1) @Input — передавання даних у дочірні компоненти;
2) @Output — зв’язок від дочірнього до батьківського компонента;
3) ViewQuery (зокрема ViewChild) — прямий доступ до DOM.
Angular 19 також має CLI-команди для автоматичної міграції проєктів на Signals.
Крім того, підтримка міграції інтегрована в інструменти IDE через схеми: можна викликати відповідну дію через контекстне меню (правий клік). Якщо в коді є пряме модифікування значень, міграцію доведеться налаштовувати вручну, оскільки вхідні значення на базі Signals незмінні.
Автономні компоненти — за замовчуванням
Починаючи з Angular 19, standalone components (без модулів) використовують за замовчуванням. Уперше з’явившись у версії 17, вони вже стали стандартом у спільноті. Це суттєво спрощує структуру застосунків.
Параметри оточення для CLI
Angular CLI тепер дає можливість оголошувати змінні середовища напряму у командному рядку:
ng build --define "apiKey='$API_KEY'"
Angular 19 — це масштабне оновлення, яке рухає фреймворк у напрямі більшої продуктивності, спрощеного DX і розширених можливостей SSR. Завдяки підтримці Google й активній open source-спільноті Angular є одним із найперспективніших інструментів для реактивного розроблення.
Читайте також на сайті про мови для WebAssembly.
Підписуйтеся на ProIT у Telegram, щоб не пропустити жодної публікації!
