Giới thiệu về React Spectrum, design system của Adobe

Bài viết gốc: https://link.sun-asterisk.vn/SYVXC0

Tweet giới thiệu về React Spectrum: https://link.sun-asterisk.vn/2d0D1b

Ngày 15 tháng 7 vừa qua, react-spectrum, một design system do Adobe phát triển đã được release. Không chỉ ưu việt về mặt design, mà những phần khác cũng có chất lượng khá tốt nên tôi muốn giới thiệu đến mọi người.

Ưu điểm của hệ thống này là gì?

• Phân tách hoàn toàn logic và UI, có thể tái sử dụng phần logic. Chẳng hạn như khi bạn muốn làm một design system cho riêng mình, bạn có thể mượn phần logic rồi implement system đó.
• Chất lượng của phần logci rất cao ( họ đã dành hơn 1 năm rưỡi để phát triển cross-platform, accessibility, đối ứng đa ngôn ngữ)
• Giao diện siêu đẹp

Phần tuyệt vời thực sự nằm ở logic của hệ thống.

Phần react-aria thì dùng Hooks custom, đồng bộ hóa những hành động khác nhau do platform và device Vd : hành động onClick thì sẽ không có hiệu quả trên những thiết bị không có chuột vi tính, nên thống nhất là dùng event onPress.

react-stately giúp cho logic của những react component phức tạp và không phụ thuộc platform không còn phụ thuộc vào UI nữa. VD: DatePicker, Table, Search, Navigation, Toast, Virtualizer v.v.

Nhờ vào sự tổ hợp logic, mà sẽ dễ dàng hơn trong việc tạo ra những compoent có tính accessibility cao theo ý thích của bạn. Và có vẻ như còn có cả những component đang được nghiên cứu phát triển.

Ví dụ về việc dùng TailwindCSS Link: https://link.sun-asterisk.vn/DsN50c

Trên đây là ví dụ về việc giao phần logic cho react-aria và react-stately, còn styling thì làm bằng tailwindCSS. Có vẻ như trong 1 tiếng mà đã có thể thực hiện nhiều component rồi, năng suất thật là cao!

Video giới thiệu: https://link.sun-asterisk.vn/ecVtGq

↑ Video giúp giải thích ngắn gọn về những gì system làm được, nếu có thời gian xin hãy nghiên cứu kĩ hơn.

Document React Spectrum https://react-spectrum.adobe.com/index.html

Repository https://github.com/adobe/react-spectrum

Kết:

Khi tôi thấy trên twitter hôm qua, tôi đã rất hứng khởi nên share bài viết này. Tuy nhiên sau khi viết thử, thì dường như chỉ những người có nhu cầu tạo design system và tìm kiếm component library mới hứng thú thôi.