Dioxus 0.5: Ứng dụng web, desktop và di động phát triển bằng Rust

Dioxus 0.5: viết lại Signals, loại bỏ lifetime, hot reload CSS và hơn thế nữa

• Dioxus Labs có một quy tắc không chính thức là chỉ cho phép một lần viết lại mỗi năm.
• Dioxus là một thư viện để xây dựng GUI bằng Rust, ban đầu bắt đầu như một bản viết lại của Yew.
• Dioxus 0.5 đã thay đổi theo hướng đơn giản hơn, vững chắc hơn và trau chuốt hơn theo yêu cầu của cộng đồng.

Các tính năng mới

• Viết lại hoàn toàn dioxus-core, loại bỏ toàn bộ mã unsafe.
• Chuyển sang API dựa trên Signal không cần clone, không dùng use_state và use_ref.
• Loại bỏ mọi lifetime và trạng thái cx: Scope.
• Giới thiệu một hàm launch duy nhất để khởi động ứng dụng cho mọi nền tảng.
• Hot reload tài sản hỗ trợ Tailwind và Vanilla CSS.
• Viết lại sự kiện để có thể truy cập các kiểu sự kiện WebSys gốc của từng nền tảng.
• Mở rộng component để thêm thuộc tính phần tử (ví dụ: Link nhận toàn bộ thuộc tính của <a/>).
• Tích hợp error boundary thống nhất và tích hợp server future với Suspense.
• Tăng tốc diffing trên desktop lên 5 lần và custom asset handler cho streaming byte.
• Streaming server function và hot reload full-stack.
• Nhiều cải tiến QoL, sửa lỗi, v.v.

Vấn đề lifetime

• Để làm Dioxus đơn giản hơn, mọi lifetime đã được loại bỏ.
• Vấn đề lifetime dễ khiến người mới học Rust e ngại, và ngay cả các lập trình viên Rust nhiều kinh nghiệm cũng thấy bối rối.
• Dioxus 0.5 loại bỏ lifetime và Scope, đồng thời đưa vào signals là giải pháp quản lý trạng thái kiểu Copy.

Loại bỏ scope và lifetime

• Ở phiên bản mới, scope và lifetime 'bump đã bị loại bỏ.
• Việc khai báo component và dùng các hàm runtime bên trong component trở nên dễ hơn nhiều.

Loại bỏ toàn bộ mã unsafe

• Việc loại bỏ lifetime 'bump và scope đã giúp loại bỏ rất nhiều mã unsafe.
• dioxus-core 0.5 không còn mã unsafe.

Signals

• Giới thiệu signals như khối xây dựng trạng thái cốt lõi cho component.
• Signal<T> là Copy ngay cả khi giá trị T bên trong không phải là Copy.
• Signals cung cấp cơ chế subscribe thông minh hơn, nên chỉ những component đọc signal mới được render lại.

Hot reload CSS

• Hỗ trợ hot reload file CSS, trong đó CLI dx theo dõi file và stream các bản cập nhật ngay lập tức vào ứng dụng.

Viết lại hệ thống sự kiện

• Dioxus 0.5 phơi bày các kiểu sự kiện gốc của từng nền tảng và đưa vào các trait cung cấp API đa nền tảng.

Phát hành đa nền tảng

• API đa nền tảng mới giúp dễ dàng nhắm tới nhiều nền tảng bằng cùng một ứng dụng.

Hệ thống tài sản beta

• Hệ thống tài sản mới có tên manganis được tích hợp với CLI để kiểm tra, đóng gói và tối ưu hóa tài sản trong ứng dụng.

Tăng tốc render trên desktop lên 5 lần

• Đã triển khai nhiều tối ưu hóa để cải thiện tốc độ render.

Mở rộng thuộc tính

• Hữu ích khi cung cấp thêm chức năng cho các phần tử cụ thể.

Rút gọn thuộc tính

• Có thể dùng cú pháp rút gọn thuộc tính khi truyền thuộc tính vào phần tử và component.

Gộp thuộc tính nhiều dòng

• Thêm tính năng gộp thuộc tính để dễ tạo thuộc tính có điều kiện.

Streaming server function

• Hỗ trợ server function có thể stream dữ liệu tới client.

Nền tảng CLI full-stack

• Có thể dùng lệnh dx để phục vụ ứng dụng full-stack.

Hỗ trợ router cho LiveView

• Router hoạt động ngay trong ứng dụng LiveView.

Custom asset handler

• Hỗ trợ custom asset handler trên desktop để stream dữ liệu tới trình duyệt một cách hiệu quả.

Xử lý file native

• Hỗ trợ đúng cách tính năng kéo-thả tệp trên desktop.

Xử lý lỗi

• Có thể dễ dàng xử lý lỗi trong ứng dụng bằng error boundary và trait throw.

Hot reload mặc định và chế độ "dev" cho desktop

• Kích hoạt hot reload theo mặc định và cải thiện đáng kể trải nghiệm phát triển ứng dụng desktop.

Cập nhật template dioxus

• Thành viên core team mới Miles đã cải tổ lớn tài liệu và template.

Dioxus-Community và Dioxus-std

• Dioxus Community đã cập nhật các crate hệ sinh thái quan trọng để phù hợp với bản phát hành 0.5.

Các tính năng sắp ra mắt

• Ổn định hóa và tích hợp hệ thống tài sản, code splitting cho .wasm, Islands và khả năng tương tác có thể resume, server components, công cụ cho lập trình viên được cải thiện, cùng việc làm mới mobile và full-stack.

Xem trước sự trở lại của Dioxus-Blitz

• Với "Blitz 2.0", việc tích hợp Servo cho phép render native bằng cùng công cụ CSS đang vận hành Firefox thông qua WGPU.

Cách đóng góp

• Có thể đóng góp bằng cách dịch tài liệu, thử các "good first issue", cải thiện tài liệu, đóng góp cho CLI, trả lời câu hỏi trong cộng đồng Discord, v.v.

Ý kiến của GN⁺

• Dioxus 0.5 là một bản cập nhật quan trọng cho phát triển GUI dựa trên Rust, mang lại môi trường phát triển dễ hơn và an toàn hơn cho lập trình viên.
• Việc loại bỏ lifetime và scope giúp giảm độ phức tạp trong phát triển Rust, còn API dựa trên Signal giúp quản lý trạng thái đơn giản hơn.
• Hot reload CSS và các cải tiến trong hệ thống sự kiện sẽ góp phần nâng cao năng suất phát triển frontend.
• Hot reload và tính năng launch đa nền tảng giúp lập trình viên có được trải nghiệm phát triển nhất quán trên nhiều nền tảng khác nhau.
• Những thay đổi này được kỳ vọng sẽ tạo tác động tích cực tới cộng đồng Rust và phát triển web, đặc biệt hữu ích cho những người xây dựng ứng dụng web và desktop bằng Rust.

[GN⁺]

Ý kiến trên Hacker News

• Trải nghiệm của người dùng đầu tiên về những thay đổi trong Dioxus 0.5

  • Năm ngoái, người dùng đã dùng Dioxus để tạo một client Mastodon; nhìn chung đây là trải nghiệm tốt, nhưng vẫn còn thiếu khá nhiều thứ.
  • Những thay đổi trong Dioxus 0.5 đã loại bỏ phần lớn sự phức tạp mà lập trình viên từng phải đối mặt, đặc biệt là việc loại bỏ lifetimes và giải quyết vấn đề phải cloning liên tục, nên có thể kỳ vọng trải nghiệm phát triển dễ chịu hơn.
  • Dù chưa thử phiên bản mới, người này vẫn gửi lời chúc mừng tới nỗ lực của nhóm.

• Câu hỏi về hỗ trợ SVG

  • Người dùng thắc mắc liệu có thể tương tác với SVG hay không, ví dụ như vẽ sudoku bằng SVG và có thể nhấp vào từng ô.

• Sự tò mò về lập trình Rust và câu hỏi về cách hoạt động của crate generational-box

  • Dù không phải là lập trình viên Rust, người dùng yêu cầu giải thích cách crate generational-box giữ giá trị mà không cần sao chép, và liệu điều đó có an toàn hay không.

• Trải nghiệm phát triển trang chủ Freenet bằng Dioxus

  • Người dùng đang phát triển trang chủ phân tán của Freenet bằng Dioxus; đây sẽ là website phân tán đầu tiên mà mọi người nhìn thấy khi thiết lập Freenet.
  • Họ có ấn tượng tích cực với cách quản lý trạng thái và DSL ánh xạ từ mã sang HTML, tương tự framework web Kotlin là Kweb.

• Cảm nhận về các yếu tố làm nên thành công của React và sự đổi mới của Dioxus

  • Người dùng rất hào hứng khi Dioxus nắm bắt được những yếu tố làm nên thành công của React rồi tiếp tục đổi mới trên nền tảng đó và phát hành với tốc độ rất nhanh.
  • Họ chúc mừng nhóm và mong chờ được thử tính năng signals trong bản phát hành này.

• Ý kiến về RSX khi so sánh với SwiftUI

  • Người dùng thích một thứ gần với SwiftUI hơn là RSX, và cho rằng React/JSX không giống với hình dung của họ về mã cho "UI phản ứng" trong năm 2024.
  • SwiftUI không hoàn hảo, nhưng họ cảm thấy mã được tổ chức và phân tách gọn gàng hơn so với khi dùng React.
  • Lợi ích chính của việc dùng JSX là có thể tái sử dụng các thư viện sẵn có được tạo ra cho web, nhưng họ cho rằng RSX gần như không có nhiều "giá trị có thể chuyển giao" ngoài việc cho phép lập trình viên mang kiến thức khái niệm về JSX sang RSX.
  • Người dùng lấy làm tiếc vì không có dự án kiểu "SwiftUI nhưng đa nền tảng"; họ nhắc đến Tokamak/TokamakUI, nhưng cho rằng nó vẫn chưa hoàn thiện và có vẻ hoạt động đã giảm.

• Lo ngại về việc loại bỏ lifetimes trong Dioxus

  • Người dùng thấy bối rối về giải pháp loại bỏ lifetimes trong Dioxus và thắc mắc điều này đã ảnh hưởng thế nào tới hiệu năng.

• Câu hỏi về khả năng tích hợp với web component

  • Khi dùng Yew, người dùng từng gặp khó khăn trong việc làm cho component Shoelace hoạt động ổn định, và muốn thử lại dự án bằng một framework Rust khác.

• Câu hỏi về cách render ứng dụng native

  • Người dùng thắc mắc liệu cách Dioxus render ứng dụng native có diễn ra bên trong một instance trình duyệt hay không.