SolidJS 2.0 Beta: Bất đồng bộ trở thành tính năng hạng nhất, tái thiết kế Suspense và xử lý hàng loạt xác định

SolidJS, framework JavaScript nổi tiếng với khả năng phản hồi chi tiết (fine-grained reactivity), đã chính thức phát hành phiên bản SolidJS 2.0 Beta. Bản cập nhật này mang đến sự thay đổi toàn diện về cách xử lý bất đồng bộ (async), mô hình phản hồi và trải nghiệm của lập trình viên. Đáng chú ý, đội ngũ phát triển đã bỏ qua giai đoạn Alpha để đi thẳng đến Beta sau thời gian dài lặp lại ở giai đoạn Thử nghiệm (Experimental).

Bất đồng bộ trở thành tính năng hạng nhất

Thay đổi quan trọng nhất trong Solid 2.0 là việc nâng cấp bất đồng bộ (async) trở thành tính năng hạng nhất (first-class). Các phép tính (computations) giờ đây có thể trả về Promises và đồ thị phản hồi sẽ tự động xử lý việc tạm dừng và tiếp tục. Điều này có nghĩa là các nhà phát triển có thể truyền một promise trực tiếp vào createMemo và để framework tự động quản lý, loại bỏ nhu cầu điều phối thủ công phức tạp trước đây.

Cùng với đó, Loading đã được thiết kế lại để chỉ xử lý trạng thái sẵn sàng ban đầu, hiển thị giao diện dự phòng khi một cây con tải lần đầu, sau đó giữ cho giao diện ổn định trong các lần cập nhật tiếp theo. Trạng thái chờ xử lý (pending state) giờ được biểu thị qua isPending(() => expr) thay vì tháo dỡ và xây dựng lại toàn bộ giao diện người dùng.

Các nguyên thủy mới cho Mutation và Trạng thái

Solid 2.0 cũng giới thiệu các nguyên thủy (primitives) chuyên dụng cho các thay đổi (mutations). Hàm action() mới kết hợp với createOptimisticStore cho phép các nhà phát triển biểu diễn các cập nhật lạc quan (optimistic updates), ghi dữ liệu lên máy chủ và xác thực lại dữ liệu như một luồng liền mạch.

Trạng thái phái sinh (derived state) trở thành một nguyên thủy hạng nhất thông qua các dạng hàm như createSignal(fn) và createStore(fn). Các cập nhật giờ được xử lý theo lô (batched) ở cấp độ microtask, với các thao tác đọc chỉ được cập nhật sau lệnh gọi flush(), giúp mô hình lập lịch trở nên xác định hoàn toàn.

Những thay đổi phá vỡ (Breaking Changes)

Bản phát hành này bao gồm một số thay đổi lớn không tương thích ngược. Index bị thay thế bởi For, và các phần tử con của For giờ nhận được các bộ truy cập (accessors). createEffect đã được tách thành các giai đoạn tính toán và áp dụng riêng biệt, onMount được thay thế bằng onSettled, và bộ thiết lập store (store setters) sử dụng ngữ nghĩa "draft-first" theo mặc định. Hệ thống chỉ thị use: cũng đã bị loại bỏ để ủng hộ các nhà máy chỉ thị ref.

Phản hồi từ cộng đồng

Trên Reddit, nhiều người dùng bày tỏ sự phấn khích với việc async trở thành công dân hạng nhất:

"Sự nhẹ nhõm và vui mừng mà tôi cảm thấy khi async trở thành công dân hạng nhất là vô cùng lớn. Tôi chưa thử nó nhưng các mẫu mã trong ví dụ trông rất mượt mà để làm việc."

Một người bình luận khác đồng tình:

"Việc dọn dẹp các nguyên thủy async trong 2.0 trông rất được suy nghĩ kỹ lưỡng. Solid luôn có mô hình phản hồi tốt nhất trong số các framework JS theo ý kiến của tôi — các cập nhật chi tiết thực sự mà không cần Virtual DOM."

Tuy nhiên, không phải ai cũng hài lòng. Một bình luận trên GitHub bày tỏ lo ngại về việc thay đổi createEffect sang API chia tách giai đoạn và cơ chế "giá trị cập nhật sau flush", cho rằng điều này làm phức tạp mô hình tư duy trực quan của Solid 1.x.

Lời giải thích từ tác giả

Ryan Carniato, người tạo ra SolidJS, đã đáp lại những lo ngại này:

"Tôi biết những thay đổi này sẽ khó để mọi người chấp nhận. Nhưng tôi không đưa ra những lựa chọn này vì sở thích cá nhân.. Tôi đã dành hơn một năm để xem xét chúng và không thể thoát khỏi thực tế. Không nhiều hơn là tôi có thể thoát khỏi một số định luật vật lý. Sự thật là cả hai đều cần thiết nếu bạn muốn có tính nhất quán cho async."

Ông nhấn mạnh rằng những thay đổi này dẫn đến một thiết kế ngắn gọn và mạch lạc hơn, giúp thư viện hấp thụ phần lớn sự phức tạp, giảm nhu cầu sử dụng createEffect nếu các mẫu mã được sử dụng đúng cách.

Cách thức trải nghiệm

So với React, SolidJS tiếp tục phân biệt mình thông qua mô hình phản hồi chi tiết hoàn toàn không sử dụng Virtual DOM. Đối với các nhà phát triển muốn thử nghiệm bản beta, đội ngũ cung cấp hướng dẫn di chuyển từ phiên bản 1.x. Người dùng SolidStart có thể theo dõi hướng dẫn riêng cho meta-framework này. Bản beta hiện có sẵn trên npm dưới thẻ next bằng cách chạy lệnh npm install solid-js@next @solidjs/web@next.