текст перекладу Angular 16 проти Angular 17 — Що нового та покращеного?

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

В Angular 16 ми побачили великі оновлення, такі як введення Signals, що стало справжньою зміною для керування станом і виявлення змін в додатках. Тепер Angular 17 вдосконалив ці функції та зробив їх ще кращими.

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

1. Signals: від впровадження до повної інтеграції

Angular 16: Введення Signals

Angular 16 представив функцію під назвою Signals, новий спосіб управління і відстеження стану вашого додатка.

До Signals розробники часто використовували RxJS Observables або інші бібліотеки для обробки реактивності (реакція на зміни даних). Хоча ці інструменти були чудовими, іноді вони ускладнювали додатки і робили їх важкими для налагодження.

Що таке Signals?

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

Приклад в Angular 16:

import { signal } from '@angular/core';   

const counter = signal(0);   

function increment() {   
 counter.set(counter() + 1);   
}

У наведеному вище прикладі:

• signal(0) створює Signal з початковим значенням 0.
• Функція increment збільшує значення лічильника.

Angular 17: Повна інтеграція Signals

В Angular 17 Signals стали основною частиною фреймворку. Тепер їх повністю інтегровано, і їх можна використовувати в більшій кількості місць, що робить їх ще потужнішими і легшими у використанні.

Що нового в Signals в Angular 17?

• Реактивні Вхідні Дані: Тепер ви можете використовувати Signals як вхідні дані для компонентів. Це означає, що компоненти автоматично реагують на зміни в Signals.
• Signals у Шаблонах: Тепер ви можете безпосередньо використовувати Signals у шаблонах Angular без додаткового коду.
• Реактивна Композиція: Ви можете комбінувати Signals з RxJS Observables для створення ще більш потужної реактивності у вашому додатку.

Покращений приклад в Angular 17:

@Component({   
 selector: 'app-counter',   
 template: 'Count: {{ counter() }}',   
})   
export class CounterComponent {   
 counter = signal(0);   

 increment() {   
 this.counter.set(this.counter() + 1);   
 }   
}

У цьому прикладі:

• Signal лічильника безпосередньо використовується в шаблоні через {{ counter() }}.
• Коли натискається кнопка, метод increment оновлює значення лічильника, і шаблон автоматично відображає нове значення.

2. Серверний рендеринг (SSR)

Angular 16: Часткова гідратація

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

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

Angular 17: Покращена гідратація

Angular 17 ще більше покращує гідратацію.

Що нового в Angular 17?

• Покращення повної гідратації: Процес перетворення серверного контенту на інтерактивний тепер швидший і ефективніший.
• Краще налагодження: Angular 17 надає нові інструменти для допомоги розробникам в налагодженні та оптимізації процесу гідратації.

3.

текст перекладу
Routing: Підхід "Component-First"

Angular 16: Routing на основі модулів

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

Angular 17: Routing на основі компонентів

Angular 17 вводить новий спосіб визначення маршрутів безпосередньо в компонентах. Це називається Routing на основі компонентів (Component-First Routing).

Чому це краще?

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

Приклад маршрутизації на основі компонентів в Angular 17:

const routes = [   
 { path: '', component: HomeComponent },   
 { path: 'about', component: AboutComponent },   
];

З цим новим підходом ви можете визначити ваші маршрути безпосередньо в компонентах без додаткової конфігурації.

4. Покращення інструментів і CLI

Angular 16

• Вперше було підтримано ESBuild, що зробило збірки швидшими та ефективнішими.
• CLI почав підтримувати окремі компоненти, хоча це ще був процес розвитку.

Angular 17

• Повністю оптимізована інтеграція ESBuild: Angular 17 покращила інтеграцію ESBuild, що дозволяє ще швидше збирати проекти та створювати менші бандли.
• Покращені команди CLI: Angular CLI тепер підтримує команди, спеціально розроблені для Signals, окремих компонентів і гідратації.

5. Налагодження та досвід розробника

Angular 16

• Розширення Angular DevTools надавало базові функції для налагодження.

Angular 17

• Покращені DevTools тепер дозволяють розробникам легко налагоджувати Signals і Routing на основі компонентів.
• Повідомлення про помилки стали більш зрозумілими та корисними.

6. Ін'єкція залежностей (DI)

Angular 16

• Ін'єкція залежностей працювала добре, але без великих змін або оптимізацій.

Angular 17

• Ін'єкція залежностей стала швидшою.
• Провайдери тепер підтримують tree-shaking, що означає, що невикористовувані провайдери видаляються з кінцевої збірки, роблячи її меншою.

7. Оновлення RxJS і TypeScript

Angular 16

• Підтримка RxJS 7 та TypeScript 4.9.

Angular 17

• Оновлено до RxJS 8, який є меншим і працює краще з Signals.
• Прийнято TypeScript 5.2, що дає кращу перевірку типів та підтримку нових функцій.

8. Material Design та Тема

Angular 16

• Було введено базову підтримку Material Design 3 (M3).
• Варіанти тем були обмежені.

Angular 17

• Бібліотека Material Design була розширена новими компонентами M3.
• З'явився новий API для динамічних тем, що дозволяє розробникам змінювати теми (наприклад, темну тему) в реальному часі.

Основні моменти: Angular 16 vs. Angular 17

Основні моменти

Чи варто оновлюватися до Angular 17?

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

Чому варто оновити?

• Спрощене управління станом з повною підтримкою Signals.
• Краща маршрутизація з підходом "Component-First".
• Швидша продуктивність завдяки оптимізованим збіркам та гідратації.
• Покращені інструменти для налагодження для швидшого усунення помилок.

Команда для оновлення:

ng update @angular/core @angular/cli

Висновок

Angular 16 та Angular 17 представляють значні кроки вперед для фреймворку Angular. Завдяки Signals, покращеній гідратації та маршрутизації на основі компонентів, Angular 17 розвиває фундамент Angular 16, надаючи кращий досвід розробника і покращену продуктивність.

Якщо ви плануєте оновити ваші існуючі проекти або розпочати новий, Angular 17 — це ваш вибір.

Потрібна допомога? Нехай Sparkle Web допоможе вам створити чудові Angular додатки з використанням останніх технологій.

Зв'яжіться з нами зараз для безкоштовної консультації!

Перекладено з: Angular 16 vs. Angular 17 — What’s New and Improved?