Tuần này, chúng ta hào hứng với các tính năng cực nhanh của Angular v20, cuộc đại tu đột phá của Remix, và tương lai của JavaScript. Ngoài ra, chúng tôi cũng cập nhật danh sách công cụ giúp tăng tốc quy trình phát triển như thường lệ.
Angular v20 nhanh hơn 35%
Tại sự kiện Google I/O ngày 21/5/2025, đội ngũ Angular đã công bố Angular v20, dự kiến phát hành vào ngày 29/5. Phiên bản này cải thiện đáng kể khả năng render phía máy chủ (SSR), hệ thống signals, và trải nghiệm viết mã, giúp tối ưu hóa hiệu suất ứng dụng và nâng cao trải nghiệm lập trình viên.
Angular không cần Zone.js (Developer Preview)
- Zone.js giờ đây là tùy chọn: Angular hỗ trợ chạy mà không cần Zone.js bằng cách sử dụng signals để phát hiện thay đổi một cách chính xác.
- Cập nhật UI hiệu quả hơn: Lập trình viên có thể sử dụng markForChange hoặc theo dõi trạng thái signals để kích hoạt việc kiểm tra thay đổi có mục tiêu.
Ví dụ bật chế độ không cần Zone:
bootstrapApplication(App, { zoneless: true
});
Gọi kiểm tra thay đổi thủ công:
import { markForChange } from '@angular/core';
markForChange();
Cải tiến hệ sinh thái Signals
signalvàcomputedđã ổn định: Khuyến nghị sử dụng cho quản lý trạng thái reactive.linkedSignal(ổn định trong v20): Hỗ trợ các signals có thể ghi với khả năng truy cập giá trị trước đó.
const count = signal(0);
const double = computed(() => count() * 2);
const history = linkedSignal([], (prev, next) => [...prev, next]);
resourcevàhttpResource: Đơn giản hóa việc lấy dữ liệu bất đồng bộ;StreamingResourcehỗ trợ cập nhật UI theo thời gian thực.
const user = resource(async () => await fetchUser());
const posts = httpResource('/api/posts');
Cải tiến SSR
- API render theo route: Hỗ trợ chiến lược kết hợp SSR, SSG và CSR tùy theo route.
export const routes: Routes = [ { path: '', component: HomeComponent, renderMode: 'ssr' }, { path: 'about', component: AboutComponent, renderMode: 'client' }
];
- Incremental hydration: Trì hoãn việc hydrate các component bằng defer block, giúp giảm kích thước gói JavaScript ban đầu.
- Event replay: Ghi lại và phát lại tương tác người dùng trong lúc JavaScript đang tải, ngăn chặn mất sự kiện.
Cải thiện trải nghiệm viết mã
- Component độc lập là mặc định: Đơn giản hóa phát triển bằng cách giảm phụ thuộc vào NgModule.
- Cú pháp
let: Cách mới để khai báo biến trong template.
<ng-container *let="user of userSignal()"> {{ user.name }}
</ng-container>
- Ràng buộc động không cần thẻ: Cho phép ràng buộc trực tiếp các object class và style động.
<div [class]="{ active: isActive }"></div>
- HMR (Hot Module Replacement): Giữ nguyên trạng thái ứng dụng khi reload trong quá trình phát triển
Tích hợp & công cụ mới
- Hỗ trợ Vite thử nghiệm khi test: Mang lại quy trình phát triển nhanh và hiện đại.
- Track Angular trong Chrome DevTools: Flame chart với mã màu cho phát hiện thay đổi và thực thi TypeScript.
- Firebase App Hosting: Triển khai SSR dễ dàng hơn.
Một số điểm nổi bật khác
- Ra mắt cổng thông tin AI: angular.dev/ai giới thiệu các quy trình lập trình hỗ trợ bởi AI dành cho lập trình viên Angular.
Tóm lại, Angular v20 mang đến những cải tiến lớn về SSR, signals, viết mã và công cụ phát triển, củng cố vị thế là framework mạnh mẽ dành cho ứng dụng doanh nghiệp.
Remix v3 và cuộc chia tay với React
Remix v2 đóng vai trò quan trọng trong React Router v7, mang đến khả năng render phía server mạnh mẽ, giúp xây dựng các ứng dụng nhanh, mở rộng tốt – được sử dụng bởi Shopify, GitHub và hơn 11 triệu dự án toàn cầu. Remix phù hợp với nền tảng thương mại điện tử, blog, và các trang nội dung, mang lại trải nghiệm full-stack React đáng tin cậy.
Sau khi tích hợp Remix vào React Router v7, Remix v2 gần như chỉ là lớp bọc mỏng quanh React Router, giúp Router kế thừa SSR và React Server Components (RSC), tạo ra một nền tảng ổn định và được hỗ trợ dài hạn.
Remix v3: Một bước ngoặt lớn
Remix v3 từ bỏ React, chuyển sang sử dụng Preact – một thư viện nhẹ hơn, và định hướng lại theo mô hình “API web là trung tâm”, giảm phụ thuộc vào build tool, hướng tới các ứng dụng AI, website nhẹ, và quy trình hiện đại.
Tính năng chính của Remix v3
- Thiết kế hướng Web API: Ưu tiên chuẩn web và API trình duyệt giúp đơn giản hóa và dễ học hơn.
- Ít phụ thuộc: Triết lý "không phụ thuộc", tăng quyền kiểm soát cho lập trình viên.
- Kiến trúc mô-đun: Các phần như kết nối cơ sở dữ liệu và thư viện Reach UI được đóng gói sẵn, dễ cấu hình và mở rộng.
- Khả năng kết hợp cao: Dễ dàng phối hợp công cụ, phù hợp cả dự án nhỏ và lớn.
- Hiệu năng cao: Google sử dụng Preact cho thấy tính ổn định, gói nhỏ, tốc độ tải nhanh.
- Trải nghiệm lập trình tối ưu: Tập trung vào đơn giản, rõ ràng, và hiệu quả để phát triển dễ dàng và thú vị hơn.
Remix v3 là sự tái định hình framework theo hướng tinh gọn, hiện đại, linh hoạt – hứa hẹn thay đổi cách xây dựng ứng dụng web hiệu suất cao.
Thay đổi lớn nhất trong JavaScript?
Temporal API – Sự thay thế hiện đại cho Date
Temporal API, một thay thế hiện đại cho đối tượng Date cũ kỹ của JavaScript, đã được phát triển trong nhiều năm và hiện đã được bật mặc định trên Firefox 139. Các nền tảng khác cũng sẽ sớm hỗ trợ.
Cải tiến chính của Temporal
- Hỗ trợ múi giờ toàn diện: Temporal hỗ trợ chuẩn IANA Timezone, cho phép xử lý thời gian toàn cầu chính xác.
- Bất biến: Các đối tượng Temporal là bất biến (immutable), giảm lỗi không mong muốn.
- Chuẩn ISO 8601: Tuân thủ nghiêm ngặt chuẩn ISO giúp parsing/formatting đồng nhất giữa các môi trường.
- Độ chính xác cao: Hỗ trợ đến nanosecond, mở rộng khoảng thời gian xử lý.
- Tách biệt rõ khái niệm ngày/giờ: Các class chuyên biệt như PlainDate, PlainTime, ZonedDateTime giúp xử lý chính xác dữ liệu cần thiết.
Ví dụ:
const date = Temporal.PlainDate.from("2025-05-23");
const oneWeekLater = date.add({ days: 7 }); // 2025-05-30 const dt = Temporal.PlainDateTime.from("2025-12-31T23:30");
const nextHour = dt.add({ hours: 1 }); // 2026-01-01T00:30
Temporal API đánh dấu bước tiến lớn trong xử lý ngày giờ trong JavaScript, loại bỏ các vấn đề của Date như lỗi DST, tính biến đổi và parsing không nhất quán. Việc được bật trên Firefox 139 cho thấy API đã sẵn sàng để áp dụng rộng rãi.