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

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Có thể bạn sẽ gặp khó khăn khi theo dõi mọi thứ đang diễn ra bằng khung JavaScript. Tài liệu này cung cấp thông tin nổi bật ngắn gọn về những diễn biến gần đây trong hệ sinh thái khung JavaScript trong khoảng một năm qua. Để thảo luận thêm về một số chủ đề này, hãy tham khảo bài thuyết trình Khám phá hệ sinh thái khung JavaScript tương ứng tại 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ụ dựa trên một số tính năng và cấu trúc tương tự nhau. Trong đó có 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 mức độ hoàn thiện 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à các phương pháp khác nhau để phản hồi chi tiết) tiếp tục tách riêng các khung riêng lẻ. Để giúp hiểu rõ hơn các xu hướng này, chúng tôi đi sâu phân tích từng khung một khung.

Angular

Các bản phát hành gần đây của Angular đã có nhiều thay đổi đáng kể, trong đó có cả tín hiệu, khung hiển thị có thể trì hoãn, NgOptimziedImage, hydrat hoá không phá huỷ và 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 được nhiều khung (bao gồm cả Angular) sử dụng để theo dõi trạng thái trong một ứng dụng. Tín hiệu góc có thể cải thiện hiệu suất trong thời gian chạy (bao gồm cả Hoạt động tương tác với Nội dung hiển thị 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 việc tải các thành phần, lệnh và đường ống 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 chuyển 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 hoá việc áp dụng các phương pháp hay nhất để tải hình ảnh.
  • hydrat hoá không huỷ bỏ: API không huỷ bỏ giúp 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 kết xuất phía máy chủ được tạo lại ở phía máy khách.
  • Uống nước một phần: Nhóm Angular sẽ sớm phát hành bản dùng thử cho nhà phát triển về việc bổ sung nước một phần. Với cơ chế hydrat hoá một phần, theo mặc định, trình duyệt không tải bất kỳ JavaScript nào của trang khi trang hiển thị. Thay vào đó, các phần cụ thể của trang sẽ được đưa vào danh sách khi người dùng tương tác với trang.

Phi hành gia

Astro, một trình tạo trang web tĩnh hiện đại, đã tạo nên những làn sóng mới bằng phương pháp phát triển web sáng tạo. Tập trung vào 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à nội dung cập nhật thú vị:

  • Quần đảo Astro: Quần đảo Astro cho phép nhà phát triển xây dựng các thành phần giao diện người dùng tương tá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 hiệu suất tối ưu.
  • Kết xuất kết hợp: Astro hiện hỗ trợ tính năng 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à hiển thị phía máy chủ để tăng tính linh hoạt.
  • Các thành phần Hình ảnh và Hình ảnh: Astro đã ra mắt các thành phần Hình ảnh và Hình ảnh mới giúp đơn giản hoá việc xử lý hình ảnh cũng như cung cấp khả năng tối ưu hoá tự động.
  • Hỗ trợ hiệu ứng chuyển đổi khung hiển thị: Astro cung cấp tính năng hỗ trợ tích hợp cho API Chuyển đổi khung hiển thị, cho phép chuyển đổi trang một cách suôn sẻ và liền mạch.
  • Thanh công cụ dành cho nhà phát triển Astro: Thanh công cụ của Astro dành cho nhà phát triển cung cấp một bộ công cụ hữu ích để gỡ lỗi và tối ưu hoá các ứng dụng của họ trong Astro.

Thể hiện cảm xúc

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

  • Thành phần máy chủ: Thành phần máy chủ phản ứng là các thành phần tìm nạp dữ liệu và được kết xuất trên máy chủ trước khi được truyền đến máy khách. Điều này sẽ chuyển công việc kết xuất sang máy chủ và giảm số lượng mã cần được chuyển đến máy khách.
  • React Compiler (Trình biên dịch phản ứng): Trình biên dịch React là một trình biên dịch có thể tự động ghi nhớ 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ượt 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ã.
  • Hành động của máy chủ: Hành động của máy chủ cho phép giao tiếp giữa các máy chủ. Với Hành động củ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 Phản ứng, giúp bạn không cần thực hiện các lệnh gọi API 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 đối với những trường hợp như đột biến dữ liệu và gửi biểu mẫu.
  • Tải tài sản: Phản hồi đang xử lý 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: Tính năng Phản ứng cũng đã được áp dụng cho 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 trong nền mà không tốn thêm chi phí hiệu suất. Bạn có thể coi đây là một phiên bản của thuộc tính CSS hiển thị nội dung, không chỉ hoạt động với các phần tử DOM mà còn cả các thành phần React."

Phối lại

Remix (một khung web full stack) ngày càng thu hút được sự quan tâm trong cộng đồng các 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 đã giới thiệu một số điểm 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 các điểm cải tiến đáng kể và 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 cũng như cải thiện hiệu suất.
  • Chế độ SPA: Remix đã giới thiệu chế độ SPA, cho phép xây dựng 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, tự động chia tách mã và nhiều tính năng khác, 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ì bản phát hành này mở ra hoạt động hỗ trợ ổn định cho thành phần máy chủ React, phát 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ụ: Hành động của 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:

  • Bộ định tuyến ứng dụng: Bộ định tuyến ứng dụng (đã trở nên ổ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. Bộ đị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 chia sẻ và định tuyến lồng nhau, cũng như các API React mới như React Server Components, Suspense và Server Actions trong ứng dụng Next.js của bạn.

  • Turbopack: phương pháp hiện đang được thử nghiệm để kết xuất trang được xây dựng dựa trên Suspense API của React. Quá trình kết xuất trước một phần sẽ kết xuất một trang bằng cách sử dụng một shell tải tĩnh. Tuy nhiên, shell sẽ để lại "lỗ hổng" cho nội dung động trong trang và nội dung này sẽ được tải không đồng bộ. Điều này mang lại các lợi ích về hiệu suất của một trang tĩnh, có thể lưu vào bộ nhớ đệm trong khi 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, đã cải thiện nhiều điểm cải tiến về hiệu suất. Vue cũng đang phát triển Vue Vapor, một nền tảng cũng định hướng hiệu suất. Dưới đây là một vài điểm nổi bật về những gì đang diễn ra trong không gian này:

  • Phát hành phiên bản Vue 3.4: Các tính năng bao gồm "trình phân tích cú pháp được viết lại hoàn toàn, có khả năng biên dịch SFC nhanh hơn và nhanh hơn gấp đôi" và hệ thống phản ứng tái cấu trúc cải thiện hiệu suất tính toán lại."
  • Chế độ Vapor: Vue đang hoạt động trên Vapor Mode, một chiến lược biên dịch chọn tham gia, hướng đến hiệu suất hoạt động với Thành phần tệp đơn Vue. Chế độ Vapor tạo mã có hiệu suất cao hơn mã 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 giúp bạn không cần đến DOM ảo Vue (giúp giảm kích thước gói).
  • Vue 2 đạt đến EOL: Thời điểm 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: ~50% lượt tải gói Vue npm xuống là dành cho Vue 2.

Đai ốc

Nuxt sắp ra mắt 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 của các mô-đun Nuxt đã tăng lên gần 220 mô-đun. Một số điểm phát triển gần đây trong lĩnh vực này bao gồm:

Sáng liên tục

Solid đang nỗ lực phát hành bản phát hành 1.0 ổn định của SolidStart khung meta. SolidStart cung cấp khả năng phản ứng chi tiết, định tuyến đẳng hình và hỗ trợ nhiều chế độ kết xuất khác nhau. Các đ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à mang lại hiệu suất tối ưu, cho phép hiển thị và quản lý trạng thái hiệu quả.
  • Định tuyến đẳng cấp: SolidStart cung cấp một phương pháp hợp nhất để định tuyến, cho phép các 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ủ.
  • Chế độ kết xuất linh hoạt: SolidStart hỗ trợ nhiều chế độ kết xuất, bao gồm cả hiển thị phía máy chủ, tạo trang web tĩnh và hiển thị phía máy khách, cho phép các nhà phát triển linh hoạt chọn phương thức phù hợp nhất với ứng dụng của họ.

Svelte

Năm qua, nhóm Svelte đã tập trung vào việc phát hành Svelte 5 sắp tới, điều này sẽ rất 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 "viết lại trình biên dịch và thời gian chạy Svelte", Svelte 5 còn giới thiệu khái niệm về Rune.
  • Runes đã được thông báo: 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 phổ quát, chi tiết... Với rune, hoạt động phản ứng vượt ra ngoài ranh giới của tệp .svelte... Khả năng phản ứng của Svelte 5 được hỗ trợ bởi các tín hiệu – tuy nhiên, [không giống như các khung khác], trong Svelte 5, tín hiệu là chi tiết triển khai nâng cao chứ không phải là nội dung bạn tương tác trực tiếp".
  • Phát hành SvelteKit 2: SvelteKit là khung meta cho Svelte. Các tính năng trong bản phát hành này bao gồm tính năng định tuyến nông và hỗ trợ 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. Dưới đâ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 có những điểm cải tiến và cải tiến riêng. Dù bạn quan tâm đến các tính năng mới nhất của các khung đã có sẵn như Angular, React và Vue, hay khám phá các lựa chọn mới như Astro, Remix và Solid, thì bạn luôn có thể bắt kịp những tiến trình thú vị.

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 tôi đưa ra quyết định sáng suốt khi chọn khung cho các dự án. Khi hiểu rõ thế mạnh và tính năng độc đáo của từng khung, chúng tôi có thể chọn khung phù hợp nhất với các yêu cầu và lựa chọn ưu tiên khi phát triển của dự án.

Chúng tôi hy vọng rằng phần tổng quan này đã giúp bạn có cái nhìn sơ lược về trạng thái hiện tại của khung JavaScript. Để tìm hiểu sâu hơn về các chủ đề có 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ẻ!