Tính năng mới trong Khung JavaScript (tháng 5 năm 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani

Có thể khó theo kịp mọi thứ đang diễn ra với các khung JavaScript. Tài liệu này cung cấp thông tin tóm tắt ngắn gọn về những sự kiện gần đây trong hệ sinh thái khung JavaScript trong khoảng một năm qua. Để thảo luận kỹ hơn về một số chủ đề này, hãy xem bài nói chuyện tương ứng Điều hướng hệ sinh thái khung JavaScript từ sự kiện Google I/O năm nay.

Biểu đồ so sánh các tính năng của khung

Như minh hoạ trong biểu đồ, các khung JavaScript đang hội tụ vào một số tính năng và cấu trúc tương tự. Các tính năng này bao gồm cấu trúc dựa trên thành phần, định tuyến dựa trên tệp và hỗ trợ SSR hiện đại. Sự hội tụ này cho thấy sự trưởng thành và phát triển của hệ sinh thái khi các khung học hỏi lẫn nhau và áp dụng các phương pháp hay nhất.

Đồng thời, một số xu hướng gần đây (chẳng hạn như các thành phần máy chủ và nhiều phương pháp để phản ứng chi tiết) tiếp tục tạo ra sự khác biệt giữa các khung riêng lẻ. Để giúp bạn hiểu rõ hơn về những xu hướng này, chúng ta sẽ tìm hiểu từng khung một.

Angular

Các bản phát hành gần đây của Angular có nhiều thay đổi đáng kể, bao gồm các tín hiệu, thành phần hiển thị có thể trì hoãn, NgOptimziedImage, tính năng hydrat hoá không phá huỷ và tính năng hydrat hoá một phần. Một số điểm nổi bật bao gồm:

  • Tín hiệu: Tín hiệu là một phương pháp mà nhiều khung (bao gồm cả Angular hiện tại) sử dụng để theo dõi trạng thái trong ứng dụng. Tín hiệu Angular có thể cải thiện hiệu suất thời gian chạy, bao gồm cả Số lượt tương tác đến lượt vẽ tiếp theo (INP) bằng cách giảm số lượng phép tính phải xảy ra trong quá trình phát hiện thay đổi.
  • Khung hiển thị có thể trì hoãn: Khung hiển thị có thể trì hoãn cho phép bạn trì hoãn việc tải các thành phần, lệnh và quy trình cụ thể. Ví dụ: bạn có thể trì hoãn việc tải một phần phụ thuộc cho đến khi nội dung vào khung nhìn hoặc cho đến khi luồng chính ở trạng thái rảnh.
  • NgOptimizedImage: NgOptimizedImage là một thành phần hình ảnh cho Angular giúp tự động áp dụng các phương pháp hay nhất để tải hình ảnh.
  • Tái tạo không phá huỷ: Tính năng tái tạo không phá huỷ sẽ khắc phục tình trạng nhấp nháy xảy ra khi DOM của các ứng dụng Angular được kết xuất phía máy chủ được tạo lại phía máy khách.
  • Tưới một phần: Nhóm Angular sẽ sớm phát hành bản xem trước về tính năng tưới một phần dành cho nhà phát triển. Với tính năng hydrat hoá một phần, theo mặc định, trình duyệt sẽ không tải bất kỳ JavaScript nào của trang khi trang được kết xuất. Thay vào đó, các phần cụ thể của trang sẽ được làm mới khi người dùng tương tác với trang.

Astro

Astro, một trình tạo trang web tĩnh hiện đại, đang tạo ra làn sóng mới với phương pháp phát triển web sáng tạo. Với trọng tâm là hiệu suất và trải nghiệm của nhà phát triển, Astro đã phát hành một số tính năng và bản cập nhật thú vị:

  • Astro Islands (Quần đảo Astro): Astro Islands cho phép nhà phát triển tạo các thành phần giao diện người dùng tương tác được tách biệt với phần còn lại của trang. Điều này cho phép cập nhật hiệu quả và đạt được hiệu suất tối ưu.
  • Kết xuất kết hợp: Astro hiện hỗ trợ kết xuất kết hợp, kết hợp các lợi ích của việc tạo trang web tĩnh và kết xuất phía máy chủ để tăng tính linh hoạt.
  • Thành phần Hình ảnh và Ảnh: Astro đã ra mắt các thành phần Hình ảnh và Ảnh mới giúp đơn giản hoá việc xử lý hình ảnh và cung cấp tính năng tự động tối ưu hoá.
  • Hỗ trợ chuyển đổi chế độ xem: Astro cung cấp tính năng hỗ trợ tích hợp cho API Chuyển đổi chế độ xem, cho phép chuyển đổi trang một cách mượt mà và liền mạch.
  • Thanh công cụ Astro Dev: Thanh công cụ Astro Dev cung cấp một bộ công cụ mạnh mẽ để gỡ lỗi và tối ưu hoá các ứng dụng Astro.

Phản ứng

Năm ngoái, bản phát hành của Thành phần máy chủ React đã giới thiệu một phương pháp mới cho các thành phần React. Kể từ đó, nhóm React đã đang nỗ lực phát triển nhiều tính năng mới, bao gồm cả tính năng Trình biên dịch React và Hành động phía máy chủ, cũng như:.

  • Thành phần máy chủ: Thành phần máy chủ React là các thành phần tìm nạp dữ liệu và được hiển thị trên máy chủ trước khi được truyền trực tuyến đến máy khách. Việc này sẽ chuyển công việc kết xuất sang máy chủ và giảm lượng mã cần gửi đến ứng dụng.
  • Trình biên dịch React: Trình biên dịch React là một compiler có thể tự động lưu vào bộ nhớ đệm các thành phần. Điều này giúp cải thiện hiệu suất bằng cách giảm các lần kết xuất lại không cần thiết. Nhóm React cho biết rằng các nhà phát triển sẽ có thể sử dụng Trình biên dịch React mà không cần thay đổi mã.
  • Thao tác máy chủ: Thao tác máy chủ cho phép giao tiếp giữa máy khách và máy chủ. Với Thao tác phía máy chủ, bạn có thể xác định các hàm phía máy chủ có thể được gọi trực tiếp từ các thành phần React, nhờ đó không cần phải gọi API theo cách thủ công và quản lý trạng thái phức tạp. Điều này có thể đặc biệt hữu ích cho những việc như đột biến dữ liệu và gửi biểu mẫu.
  • Tải tài sản: React đã và đang làm việc trên các API khai báo để tải trước và tải các thành phần như tập lệnh, kiểu, phông chữ và hình ảnh.
  • Kết xuất ngoài màn hình: React cũng đang làm việc trên tính năng Kết xuất ngoài màn hình. Kết xuất ngoài màn hình là "một tính năng sắp ra mắt trong React để kết xuất màn hình ở chế độ nền mà không làm tăng thêm chi phí hiệu suất. Bạn có thể coi thuộc tính này là một phiên bản của thuộc tính CSS content-visibility (khả năng hiển thị nội dung) không chỉ hoạt động cho các phần tử DOM mà còn hoạt động cho các thành phần React."

Phối lại

Remix, một khung web toàn diện, đang thu hút sự chú ý trong cộng đồng nhà phát triển. Với trọng tâm là các nguyên tắc cơ bản về web và trải nghiệm nâng cao cho nhà phát triển, Remix đã ra mắt một số nội dung cập nhật đáng chú ý:

  • Bản phát hành Remix 2.0: Remix 2.0, phát hành vào tháng 9 năm 2023, đã mang đến những điểm cải tiến đáng kể và các tính năng mới cho khung này.
  • Hỗ trợ ổn định cho Vite: Remix hiện hỗ trợ ổn định cho Vite, một công cụ xây dựng nhanh và nhẹ, cung cấp các bản dựng phát triển nhanh hơn và cải thiện hiệu suất.
  • Chế độ SPA: Remix đã giới thiệu chế độ SPA, cho phép tạo các trang web hoàn toàn tĩnh mà không cần máy chủ JavaScript trong quá trình sản xuất. Điều này cho phép nhà phát triển sử dụng các tính năng mạnh mẽ của Remix như định tuyến dựa trên tệp, phân tách mã tự động, v.v., trong khi vẫn duy trì tính đơn giản của việc triển khai trang web tĩnh.

Next.js

Bản phát hành Next.js 13.4 vào tháng 5 năm 2023 đặc biệt đáng chú ý vì đã mang đến khả năng hỗ trợ ổn định cho các thành phần máy chủ React, tính năng truyền trực tuyến và Suspense. Kể từ đó, Next.js tiếp tục xây dựng tính năng hỗ trợ cho các API React mới (ví dụ: Thao tác máy chủ) và lặp lại trải nghiệm của nhà phát triển thông qua các sáng kiến như Turbopack. Các điểm nổi bật khác bao gồm:

  • Trình định tuyến ứng dụng: Trình định tuyến ứng dụng đã ổn định trong Next.js 13.4, là một cách mới để định cấu trúc và quản lý việc định tuyến trong các ứng dụng Next.js. Trình định tuyến ứng dụng là điều kiện tiên quyết để sử dụng các tính năng mới của Next.js như bố cục dùng chung và định tuyến lồng nhau, cũng như các API React mới như Thành phần máy chủ React, Trạng thái tạm ngưng và Hành động máy chủ trong ứng dụng Next.js.

  • Turbopack: phương pháp hiện đang thử nghiệm để kết xuất trang được xây dựng dựa trên API Trì hoãn của React. Tính năng kết xuất trước một phần hiển thị trang bằng cách sử dụng một vỏ tải tĩnh. Tuy nhiên, lớp phủ để lại "lỗ" cho nội dung động trong trang và nội dung này được tải không đồng bộ. Điều này mang lại lợi ích về hiệu suất của một trang tĩnh, có thể lưu vào bộ nhớ đệm, đồng thời vẫn có thể kết hợp dữ liệu động vào nội dung trang.

Vue

Bản phát hành gần đây nhất của Vue, Vue 3.4, bao gồm nhiều điểm cải tiến về hiệu suất. Vue cũng đang làm việc trên Vue Vapor, cũng tập trung vào hiệu suất. Sau đây là một số điểm nổi bật về những gì đang diễn ra trong không gian này:

  • Phát hành Vue 3.4: Các tính năng bao gồm "một trình phân tích cú pháp được viết lại hoàn toàn nhanh gấp đôi, biên dịch SFC nhanh hơn và hệ thống phản ứng đã tái cấu trúc giúp cải thiện hiệu quả tính toán lại".
  • Chế độ Vapor của Vue: Vue đang làm việc trên Chế độ Vapor, một chiến lược biên dịch không bắt buộc, tập trung vào hiệu suất hoạt động với Thành phần tệp đơn của Vue. Chế độ Vapor tạo mã có hiệu suất cao hơn mã hiện do Trình biên dịch Vue tạo ra. Ngoài ra, việc sử dụng Chế độ hơi nước với tất cả các thành phần sẽ giúp bạn không cần đến DOM ảo của Vue (giúp giảm kích thước gói).
  • Vue 2 đạt đến EOL: Ngày kết thúc vòng đời (EOL) của Vue 2 là ngày 31 tháng 12 năm 2023. Tuy nhiên, Vue 2 vẫn được sử dụng khá rộng rãi: khoảng 50% số lượt tải gói npm Vue xuống là dành cho Vue 2.

Nuxt

Nuxt sắp phát hành Nuxt 4. Ngoài các bản phát hành khung thường xuyên của Nuxt trong năm qua, hệ sinh thái mô-đun Nuxt đã phát triển lên gần 220 mô-đun. Một số điểm phát triển gần đây trong không gian này bao gồm:

Sáng liên tục

Solid đang nỗ lực hướng tới bản phát hành 1.0 ổn định của siêu khung SolidStart. SolidStart tự hào có khả năng phản ứng chi tiết, định tuyến đồng cấu và hỗ trợ nhiều chế độ kết xuất. Một số điểm nổi bật bao gồm:

  • Khả năng phản ứng chi tiết: Hệ thống phản ứng của Solid cho phép cập nhật chính xác và hiệu suất tối ưu, cho phép kết xuất và quản lý trạng thái hiệu quả.
  • Định tuyến đồng cấu: SolidStart cung cấp một phương pháp hợp nhất để định tuyến, cho phép nhà phát triển xác định các tuyến hoạt động liền mạch trên cả ứng dụng và máy chủ.
  • Các chế độ kết xuất linh hoạt: SolidStart hỗ trợ nhiều chế độ kết xuất, bao gồm kết xuất phía máy chủ, tạo trang web tĩnh và kết xuất phía máy khách, giúp nhà phát triển linh hoạt lựa chọn phương pháp tốt nhất cho ứng dụng của họ.

Svelte

Trong năm qua, nhóm Svelte đã tập trung vào bản phát hành sắp tới của Svelte 5. Đây sẽ là một bản phát hành quan trọng. Các điểm nổi bật khác bao gồm:

  • Svelte 5 sắp ra mắt: Ngoài việc bao gồm "viết lại trình biên dịch và thời gian chạy Svelte", Svelte 5 cũng giới thiệu khái niệm về Rune.
  • Ra mắt Runes: Runes là một tính năng sắp ra mắt trong Svelte 5. "Runes mở khoá khả năng phản ứng toàn diện, chi tiết... Với các rune, tính phản ứng mở rộng ra ngoài ranh giới của các tệp .svelte... Tính năng phản hồi của Svelte 5 được cung cấp bởi các tín hiệu – tuy nhiên, [không giống như các khung khác], trong Svelte 5, các tín hiệu là một chi tiết triển khai cơ bản thay vì là một nội dung mà bạn tương tác trực tiếp."
  • Phát hành SvelteKit 2: SvelteKit là khung meta cho Svelte. Bản phát hành này có các tính năng như đường dẫn nông và hỗ trợ cho Vite 5.

Chrome Aurora

Chrome Aurora là một nhóm tại Google, cộng tác với nhiều khung web nguồn mở để cải thiện trải nghiệm người dùng, đặc biệt là hiệu suất trên web. Sau đây là một số sáng kiến mà chúng tôi đã đóng góp trong năm qua:

Kết luận

Hệ sinh thái khung JavaScript tiếp tục phát triển với tốc độ nhanh chóng, trong đó mỗi khung đều mang đến một loạt các cải tiến và đổi mới riêng. Dù bạn quan tâm đến các tính năng mới nhất của các khung đã thành lập như Angular, React và Vue hay khám phá các lựa chọn mới hơn như Astro, Remix và Solid, thì bạn sẽ không thiếu các bản phát triển thú vị để theo dõi.

Là nhà phát triển, việc nắm bắt thông tin về những tiến bộ này giúp chúng ta đưa ra quyết định sáng suốt khi chọn khung cho dự án. Bằng cách hiểu rõ điểm mạnh và các tính năng riêng biệt của từng khung, chúng ta có thể chọn khung phù hợp nhất với các yêu cầu của dự án và lựa chọn ưu tiên về phát triển.

Chúng tôi hy vọng thông tin tổng quan này đã giúp bạn nắm được trạng thái hiện tại của các khung JavaScript. Để tìm hiểu sâu hơn về các chủ đề được đề cập trong bài đăng trên blog này, hãy nhớ xem bài nói chuyện đi kèm tại Google I/O. Chúc bạn lập trình vui vẻ!