Angular 19 is a BEAST of a release!
Tóm tắt ngắn:
- Video giới thiệu về bản phát hành Angular 19, tập trung vào những thay đổi lớn và cải tiến đáng kể.
- Điểm chính xoay quanh việc standalone components trở thành mặc định, sự ổn định của các API liên quan đến signals (như
ViewChild,input/output), khả năng hỗ trợ incremental hydration (hiện vẫn ở giai đoạn developer preview), và các tính năng mới liên quan đến server-side rendering như event replay và định nghĩa route mới. - Các ứng dụng và hệ quả bao gồm việc viết code Angular gọn nhẹ hơn, hiệu năng website được cải thiện nhờ incremental hydration, và khả năng xây dựng các ứng dụng web tĩnh (static site) dễ dàng hơn.
- Các quá trình được mô tả chi tiết bao gồm quá trình cập nhật lên Angular 19 bằng
ng update, việc sử dụng các schematics để chuyển đổi từ decorator sang signal functions, và cấu hình incremental hydration.
Tóm tắt chi tiết:
Video chia sẻ về bản phát hành Angular 19, nhấn mạnh đây là một bản cập nhật lớn với nhiều cải tiến. Nội dung được chia thành các phần chính:
Phần 1: Standalone Components trở thành mặc định: Đây là thay đổi lớn nhất, phá vỡ tính tương thích ngược nhưng dễ dàng khắc phục. Từ Angular 14, standalone components đã được giới thiệu, và giờ đây chúng trở thành mặc định trong Angular 19. Người dùng không cần phải thêm thuộc tính standalone: true nữa. Nếu đang sử dụng modules, lệnh ng update sẽ tự động thêm standalone: false vào các components không phải standalone. "Đây là hướng đi rõ ràng của Angular, và việc viết ít code hơn trong nhiều trường hợp là lợi ích rõ rệt."
Phần 2: Cải tiến liên quan đến Signals: Các API liên quan đến signals (như ViewChild, ViewChildren, input/output) đã được ổn định. Angular CLI cung cấp schematics (ng generate @angular/core:signals) để tự động chuyển đổi từ decorator sang signal functions. Hai hàm tạo signals mới được giới thiệu: linkedSignal (cho các trường hợp đặc biệt, experimental) và resource (để theo dõi các giá trị bất đồng bộ, experimental).
Phần 3: Incremental Hydration (Developer Preview): Tính năng này giúp tăng tốc độ tải trang bằng cách hoãn tải code client-side cho một số phần của trang cho đến khi cần thiết (ví dụ: khi phần tử đó được cuộn vào vùng nhìn). Nó khác với lazy loading ở chỗ nội dung đã được render ở server, chỉ có code tương tác mới được tải sau. Có thể đánh dấu các phần không cần tương tác để không tải code client-side. Việc sử dụng withIncrementalHydration và provideClientHydration trong quá trình khởi tạo ứng dụng là cần thiết.
Phần 4: Server-Side Rendering và các tính năng liên quan: Angular 19 hỗ trợ event replay mặc định, giúp xử lý các sự kiện người dùng trước khi code client-side được tải. Có giao diện ServerRoute mới cho phép kiểm soát việc render route ở server, trong quá trình build (pre-render), hay chỉ ở client. Tính năng này cho phép pre-render các trang với tham số động, ví dụ như xây dựng blog tĩnh.
Phần 5: Zone-less Angular (vẫn chưa ổn định): Việc loại bỏ zone.js đang được tiến hành, nhưng vẫn chưa hoàn toàn ổn định trong Angular 19. Hy vọng sẽ có hỗ trợ ổn định trong các phiên bản sau.
Tóm lại, Angular 19 mang đến nhiều cải tiến đáng kể, đặc biệt là việc đơn giản hóa cấu trúc ứng dụng bằng standalone components và tối ưu hiệu năng bằng incremental hydration. Tuy có một số thay đổi phá vỡ tính tương thích ngược, nhưng quá trình cập nhật được hỗ trợ tốt bởi ng update. Signals cũng được xem là tương lai của Angular, giúp viết code gọn gàng và hiện đại hơn.