- Ổn định hóa các API chính liên quan đến reactivity, đồng thời công bố tính năng Zoneless ở dạng bản xem trước dành cho nhà phát triển
- Cải thiện mạnh mẽ trải nghiệm gỡ lỗi và hiệu suất làm việc của nhà phát triển thông qua tích hợp với Chrome DevTools cùng nhiều nâng cấp khác
- Hỗ trợ phát triển GenAI, giới thiệu llms.txt và cung cấp hướng dẫn cùng ví dụ mã nguồn mở để xây dựng ứng dụng AI
- Chính thức loại bỏ dần NgIf, NgFor, NgSwitch hiện có và khuyến nghị chuyển sang control flow tích hợp sẵn
- Khởi động dự án mới để chọn linh vật chính thức của Angular thông qua bình chọn từ cộng đồng
Các điểm nổi bật của Angular v20
- Trong vài năm qua, Angular đã thúc đẩy những thay đổi lớn với reactivity dựa trên Signals, ứng dụng Zoneless và nhiều cải tiến khác
- Trong Angular v20, trọng tâm là ổn định các tính năng đang được phát triển và cải thiện trải nghiệm nhà phát triển
Ổn định hóa tính năng reactivity
- Các API Signals, computed, input, view queries đã bước vào giai đoạn ổn định
- Các API effect, linkedSignal, toSignal cũng đã được ổn định, cho phép quản lý trạng thái bất đồng bộ đáng tin cậy
- Các trường hợp thành công từ những dịch vụ quy mô lớn như Google, YouTube đã được chia sẻ, bao gồm cải thiện 35% độ trễ đầu vào
API thử nghiệm mới: resource, httpResource
- API resource giúp việc xử lý yêu cầu bất đồng bộ và dữ liệu streaming trở nên dễ dàng hơn theo sự thay đổi của signal
- httpResource hỗ trợ yêu cầu HTTP dựa trên signal, cho phép sử dụng trực tiếp kết quả yêu cầu từ signal
- Có thể quản lý đơn giản nhiều mẫu dữ liệu streaming như WebSocket bằng signal
Bản xem trước dành cho nhà phát triển của Zoneless
- Trong môi trường SSR, tích hợp sẵn các handler mặc định cho
unhandledRejection, uncaughtException của Node.js
- Ở phía client, có thể lắng nghe lỗi toàn cục bằng
provideBrowserGlobalErrorListeners
- Cung cấp hướng dẫn xóa polyfill
zone.js khỏi angular.json và chuyển sang chế độ zoneless
Nâng cao server-side rendering
- Incremental hydration và chế độ render theo từng route đã được ổn định
- Chỉ tải xuống/hydrate phần UI cần thiết khi đi vào viewport để giảm thiểu lưu lượng JavaScript
- Có thể cấu hình nhiều chế độ render như SSR/CSR/Prerender cho từng route
Cải thiện trải nghiệm và năng suất của nhà phát triển
- Hợp tác với Chrome DevTools để cung cấp performance track dành riêng cho Angular, cho phép theo dõi theo thời gian thực việc render nội bộ framework, sự kiện, change detection và hơn thế nữa
- Cải tiến API cho tạo động với
createComponent, áp dụng directive, binding dựa trên signal và nhiều khả năng khác
- Hỗ trợ toán tử lũy thừa(
**), toán tử in và template literal không gắn thẻ trong template
- Tăng cường khả năng chẩn đoán cho các trường hợp như không gọi
@for trackFn, dùng sai nullish coalescing, thiếu đầu vào cho structural directive
Cải tiến style guide và host binding
- Đơn giản hóa và hiện đại hóa style guide dựa trên kinh nghiệm tích lũy trong 10 năm
- Mặc định không còn tự tạo hậu tố cho tên file/lớp, và khuyến nghị dùng đối tượng
host thay cho HostBinding/HostListener
- Bổ sung tùy chọn
typeCheckHostBindings để hỗ trợ phát hiện lỗi binding theo thời gian thực
Cải thiện DevTools/môi trường kiểm thử và Angular Material
- Thêm vào Angular DevTools các tính năng gỡ lỗi cho incremental hydration và deferrable view
- Hỗ trợ vitest thay thế Karma, đồng thời đưa vào thử nghiệm watch mode và kiểm thử trên trình duyệt
- Cải thiện chất lượng như đưa component nút của Material phù hợp với đặc tả M3, chuẩn hóa thuật ngữ, kiểm soát animation/motion
Hỗ trợ GenAI và LLM
- Giới thiệu llms.txt để LLM có thể học mã Angular mới nhất, đồng thời cung cấp sample và hướng dẫn mã nguồn mở
- Công bố hướng dẫn tích hợp với Genkit, Vertex AI, các buổi live stream thực hành và best practices
Áp dụng control flow tích hợp sẵn và loại bỏ structural directive
- Control flow tích hợp sẵn được giới thiệu từ v17 vượt trội trên nhiều mặt như tính trực quan, độ an toàn kiểu và hiệu năng
*ngIf, *ngFor, *ngSwitch dự kiến sẽ bị loại bỏ hoàn toàn ở v22, đồng thời cung cấp schematic để migrate mã
Dự án linh vật Angular chính thức
- Đưa ra các ứng viên linh vật chính thức và mở RFC nhằm củng cố bản sắc của Angular cùng tính biểu tượng trong cộng đồng
- Các đề xuất bao gồm hình chiếc khiên lấy cảm hứng từ logo, nhân vật Anglerfish (cá cần câu) và nhiều ý tưởng khác
- Sẽ chọn phương án cuối cùng thông qua bình chọn và phản hồi từ cộng đồng, đồng thời cũng có thể đề xuất tên
Lộ trình sắp tới
- Trong v20, Angular tiếp tục hoàn thiện và ổn định các tính năng lớn như reactivity, zoneless, incremental hydration
- Đang chuẩn bị cho các dự án lớn tiếp theo như Selectorless, signal-forms, cải thiện unit test, linh vật và hơn thế nữa
- Dự kiến sẽ quyết định hướng phát triển thông qua việc tích cực thu thập ý kiến từ cộng đồng
Chưa có bình luận nào.