Design system có hợp với công nghệ đội bạn 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, không ràng buộc vào bất kỳ khung công nghệ nào, nên tương thích với hầu hết stack hiện đại. Phần component mới là chỗ phải bám chặt vào công nghệ đội đang dùng: React, Vue hay Web Components. Nên chốt stack trước khi dựng component, và đừng để studio 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 studio thích thay vì stack đội khách
- chọn stack độc lạ, về sau khó tuyển người và bảo trì
Câu hỏi này Sinh Vũ nghe nhiều: "Hệ thống design system Anh Chị xây có chạy được trên React của đội em không?" Câu trả lời phụ thuộc vào 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ệ khác nhau hoàn toàn với stack công nghệ.
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. Điều này có nghĩa: dù đội Anh Chị dùng React, Vue, Angular hay thậm chí một framework í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 Sinh Vũ thấy ở các dự án: studio tự chọn khung công nghệ mà họ quen dùng, giao xong component thì độ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ừ tháng đầu sau khi bàn giao.
Nguyên tắc Sinh Vũ giữ cứng: 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ể: độ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
- Để studio 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.
Góc nhìn của Sinh Vũ
Sinh Vũ giữ ranh giới rõ trong dịch vụ: bộ token theo chuẩn DTCG là lớp trung lập dùng cho hầu hết nền tảng web. Component thì dựng theo công nghệ đội khách đang thật sự dùng, React, Vue hoặc Web Components.
Không xây component cho stack độc lạ mà chưa thảo luận trước. Giao một hệ không ai nuôi được còn tệ hơn không giao.
Quan điểm vận hành, Sinh Vũ
Trước khi bắt tay vào dựng component, Sinh Vũ sẽ hỏi rõ: đội dùng stack nào, có sản phẩm nào chạy trên khung khác không, và ai là người 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.
Checklist quyết định
Chủ đề: Hệ thống design system có hợp với công nghệ đội bạn 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, font, 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à studio 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 đó. Sinh Vũ sẽ thảo luận rõ trước khi chọn hướng.