Có hợp với công nghệ đội Anh / Chị không
Câu trả lời phụ thuộc vào việc Anh / Chị hiểu đúng ranh giới giữa tầng token và tầng component.
Có, nếu làm đúng cách. Tầng token (giá trị thiết kế như màu sắc, khoảng cách, chữ) là dữ liệu trung lập. Nó không ràng buộc vào bất kỳ khung công nghệ nào, nên hợp với hầu hết công nghệ hiện đại. Tầng component thì phải bám chặt vào công nghệ đội đang dùng: React, Vue hay Web Components. Nên chốt công nghệ trước khi dựng component, đừng để bên làm chọn hộ.
- cả đội đã thống nhất một stack (React, Vue, v.v.)
- nhiều sản phẩm khác khung, giữ token là lớp chung
- cần dùng chung qua nhiều khung, cân nhắc Web Components
- dựng component theo stack bên làm quen thay vì stack của đội
- chọn stack độc lạ, về sau khó tuyển người và bảo trì
Câu hỏi này rất hay gặp: "Design system này có chạy được trên React của đội em không?" Câu trả lời nằm ở việc phân biệt đúng hai tầng trong một design system: tầng token và tầng component. Hai tầng này có quan hệ hoàn toàn khác nhau với công nghệ đang dùng.
Tầng token: trung lập với khung công nghệ
Token là đơn vị thiết kế nhỏ nhất: màu sắc, khoảng cách, cỡ chữ, độ bo góc. Chúng được lưu dưới dạng dữ liệu theo chuẩn DTCG (Design Tokens Community Group, nhóm cộng đồng quốc tế đặt ra định dạng chung cho token thiết kế). Định dạng này là dữ liệu thuần, không viết bằng JavaScript, không phụ thuộc vào React hay Vue.
Công cụ như Style Dictionary (thư viện chuyển đổi token thành biến CSS, SCSS, hoặc mã cho từng nền tảng) có thể xuất token thành biến CSS dùng được trên mọi nền tảng web. Nghĩa là dù đội Anh / Chị dùng React, Vue, Angular hay một khung công nghệ ít phổ biến hơn, token vẫn vào được qua biến CSS.
Tầng component: bám chặt stack của đội
Component (thành phần giao diện như nút bấm, ô nhập liệu, thẻ thông tin) là mã nguồn thật. Viết component React thì không dùng được trong Vue, và ngược lại. Đây là tầng duy nhất phải khớp với stack thật của đội.
Lỗi phổ biến nhất ở các dự án là bên làm tự chọn khung công nghệ mà họ quen dùng. Giao xong component, đội khách không đọc được, không sửa được, không bảo trì được. Hệ thống chết ngay từ những tháng đầu sau khi bàn giao.
Nguyên tắc nên giữ: component phải dựng theo đúng công nghệ đội đang dùng, không ép đội học stack lạ chỉ để dùng được bộ này.
Khi nào cân nhắc Web Components
Web Components (chuẩn web gốc cho phép tạo thành phần giao diện chạy được trên mọi khung) là lựa chọn đáng cân nhắc trong một tình huống cụ thể. Đó là khi đội có nhiều sản phẩm chạy trên các khung khác nhau và cần dùng chung một bộ component.
Dựng component theo một khung
Phù hợp khi cả đội thống nhất một stack. Trải nghiệm lập trình tốt hơn, tận dụng được hết tính năng của khung đó. Bảo trì dễ hơn về dài hạn.
Dựng bằng Web Components
Phù hợp khi nhiều sản phẩm dùng khung khác nhau cần dùng chung một bộ. Chạy được xuyên khung, nhưng có đánh đổi: một số tính năng cao của từng khung không dùng được, và trải nghiệm của lập trình viên đôi khi kém mượt hơn component viết thuần theo khung đó.
Lỗi hay gặp khi chọn hướng
- Để bên làm chọn stack thay cho đội, giao xong không ai hiểu cách sửa.
- Chọn khung ít người dùng vì nghe có vẻ hiện đại, về sau khó tuyển người và khó tìm tài liệu khi gặp lỗi.
- Kỳ vọng token tự biến thành component dùng được ngay, bỏ qua công sức thật cần để viết component theo khung.
- Dùng chung một bộ component cho React và Vue mà không dùng Web Components, dẫn đến hai bản component sống riêng và dần khác nhau.
Khi cân nhắc, Anh / Chị nên tự trả lời ba câu trước khi bắt tay vào dựng component: đội đang dùng công nghệ nào, có sản phẩm nào chạy trên khung khác không, và ai sẽ bảo trì hệ sau khi bàn giao. Ba câu hỏi đó quyết định cấu trúc của cả dự án.
Bảng kiểm quyết định
Chủ đề: Thư viện giao diện có hợp với công nghệ đội Anh / Chị đang dùng không. Cẩm nang Sinh Vũ, sinhvu.com
Bấm chọn từng mục Anh / Chị thấy đúng, rồi bấm in hoặc lưu thành PDF để mang theo.
Nếu Anh / Chị đánh dấu phần lớn ở nhóm dấu hiệu trên, đây là lúc nên trao đổi kỹ hơn. Sinh Vũ có thể cùng Anh / Chị soi lại và đề xuất hướng đi.
Nguồn tham khảo
Design Tokens Community Group (DTCG); Style Dictionary; Figma Code Connect và tài liệu Web Components; quan điểm vận hành thực tế của Sinh Vũ.
Câu hỏi thường gặp
Token và component khác nhau chỗ nào, và cái nào mới cần quan tâm đến stack?
Token là dữ liệu thuần: màu, kích thước, kiểu chữ, khoảng cách, được lưu dưới dạng biến trung lập theo chuẩn DTCG (Design Tokens Community Group). Dữ liệu này không viết bằng React hay Vue, nên dùng được ở mọi nơi. Component mới là mã nguồn thật, phải viết theo đúng khung của đội. Nếu đội dùng React mà bên làm giao component Vue, gần như không ai bảo trì được.
Nếu đội có nhiều sản phẩm dùng khung khác nhau thì sao?
Đây là tình huống cần thiết kế kỹ hơn. Token vẫn làm lớp chung cho tất cả vì nó trung lập với khung. Component thì có hai hướng: dựng riêng theo từng khung, hoặc dùng Web Components làm lớp dùng chung xuyên khung. Web Components chạy được trên React, Vue, Angular đều, nhưng có đánh đổi về tính năng và trải nghiệm lập trình so với component viết thuần theo khung đó. Nên bàn rõ các đánh đổi này trước khi chọn hướng.
Bài viết là thông tin tham khảo. Phạm vi, giá và cam kết cụ thể của Sinh Vũ ghi trong hồ sơ đề xuất và hợp đồng đã ký.