Design system hợp với React, Vue, Web Components không

Chốt nhanh

Sinh Vũ hỗ trợ React, Vue và Web Components, trong đó React là stack được hỗ trợ tốt nhất và phổ biến nhất trong hệ sinh thái design system. Lựa chọn stack không nên dựa trên cái nghe hay, mà phải dựa trên stack đội kỹ thuật của Anh Chị đang thực sự dùng. Nếu đội dùng React mà Sinh Vũ xây component bằng Vue, giá trị nhận được sẽ rất thấp dù thiết kế có tốt đến đâu.

Trước khi nói đến thiết kế hay token, Sinh Vũ cần biết một điều: đội kỹ thuật của Anh Chị đang dùng framework nào. Đây không phải câu hỏi thủ tục, mà là yếu tố quyết định toàn bộ cấu trúc triển khai. Design system xây trên stack sai thì dù đẹp đến đâu cũng không dùng được trong thực tế.

Ba stack chính và mức hỗ trợ tương ứng

Sinh Vũ làm việc với ba lựa chọn phổ biến nhất hiện nay:

React: Stack Sinh Vũ hỗ trợ tốt nhất. Hệ sinh thái design system lớn nhất, với các thư viện tham chiếu như Radix UI, shadcn/ui, MUI, Chakra UI. Testing, DevTools, TypeScript inference đều trưởng thành. Nếu đội dùng React, đây là lựa chọn tự nhiên nhất.
Vue: Stack Sinh Vũ hỗ trợ đầy đủ. Từ Vue 3, TypeScript support đã cải thiện đáng kể. Hệ sinh thái nhỏ hơn React nhưng đủ để xây design system bài bản. Không có lý do nào để đội Vue phải dùng component React.
Web Components (Custom Elements): Lựa chọn trung lập, không phụ thuộc framework, chạy được trên mọi môi trường. Phù hợp cho tổ chức có nhiều đội dùng stack khác nhau, hoặc cần nhúng component vào môi trường không phải SPA (single-page application, ứng dụng một trang). Tuy nhiên, DX (developer experience, trải nghiệm phát triển của lập trình viên) và SSR (server-side rendering, kết xuất phía máy chủ) cần đánh giá kỹ trước khi chọn.

Stack độc lạ hoặc legacy như Angular, Ember, jQuery sẽ được Sinh Vũ đánh giá riêng trước khi nhận dự án, không áp dụng quy trình chuẩn.

Khi nào chọn hướng nào

Đội thuần React hoặc thuần Vue: Xây component đúng theo stack đó. Không cần Web Components, không cần layer trung gian. Đơn giản, hiệu quả, đội nhận được toàn bộ lợi ích từ hệ sinh thái framework.

Tổ chức có nhiều đội dùng stack khác nhau, hoặc kiến trúc micro-frontend: Web Components là lựa chọn đáng cân nhắc để tránh xung đột phiên bản (version conflict) và tách biệt phạm vi giữa các đội. Cần đánh giá kỹ về SSR và hệ sinh thái testing trước khi quyết định.

Token thì không phụ thuộc stack

Điểm quan trọng cần hiểu rõ: token (giá trị thiết kế như màu sắc, khoảng cách, kiểu chữ) không gắn với bất kỳ framework nào. Dù đội dùng React, Vue hay Web Components, token vẫn được xuất ra dưới dạng CSS custom properties (biến CSS) và được sử dụng qua CSS. Lớp token là nền chung, lớp component mới là nơi stack quyết định.

Token là ngôn ngữ chung giữa thiết kế và kỹ thuật. Component là nơi ngôn ngữ đó được nói bằng giọng của từng framework.
Kinh nghiệm thực hành Sinh Vũ

Storybook, công cụ hiển thị và kiểm thử component, hỗ trợ đầy đủ cả React, Vue và Web Components. Tài liệu hoá và trình diễn component không phải rào cản ở đây.

Lỗi thường gặp khi chọn sai stack

Xây component React nhưng đội khách dùng Vue, hoặc ngược lại. Đội kỹ thuật phải viết wrapper (lớp bọc) hoặc bỏ qua component, không nhận được value thực sự từ design system.
Chọn Web Components vì nghe hay nhưng không đánh giá SSR support và hệ sinh thái testing. Hậu quả là mất thời gian giải quyết vấn đề không lường trước.
Không xác định TypeScript từ đầu. Thêm type dần dần sau khi xây xong tạo nợ kỹ thuật (technical debt) khó xử lý về sau.
Nhầm lẫn giữa theme và design system. Tuỳ chỉnh màu sắc trên MUI hay Ant Design là theme, không phải design system của riêng Anh Chị. Đây là hai mức độ đầu tư và kiểm soát khác nhau.

Góc nhìn của Sinh Vũ

Sinh Vũ đặt câu hỏi về stack ngay trong buổi brief đầu tiên, trước khi nói đến bất kỳ giải pháp nào. Không phải để khẳng định năng lực, mà vì câu trả lời đó quyết định toàn bộ hướng triển khai. Chọn đúng stack từ đầu tránh được một loạt vấn đề về tích hợp, bảo trì và tốc độ áp dụng về sau.

Nếu Anh Chị chưa chắc đội mình sẽ dùng stack nào lâu dài, hãy nói thẳng điều đó. Sinh Vũ sẽ giúp đánh giá trọng tải kỹ thuật của từng lựa chọn thay vì đẩy nhanh sang bước thiết kế khi nền chưa vững.

Nguồn tham khảo

Storybook documentation: framework support. Lit (Google): Web Components documentation. Sinh Vũ thực hành tư vấn và triển khai design system cho khách hàng tại Việt Nam.

Câu hỏi thường gặp

Sinh Vũ có xây design system cho đội dùng Vue không?

Có, Sinh Vũ hỗ trợ Vue, đặc biệt từ Vue 3 khi TypeScript support đã cải thiện đáng kể. Hệ sinh thái nhỏ hơn React nhưng đủ để xây design system bài bản. Sinh Vũ sẽ xác nhận stack của đội trong buổi brief đầu tiên trước khi đề xuất hướng triển khai.

Web Components có phải lựa chọn tốt nhất vì chạy được mọi framework không?

Không hẳn. Web Components là lựa chọn trung lập nhưng DX (trải nghiệm phát triển của lập trình viên) thường kém hơn React hay Vue trong nhiều ngữ cảnh. SSR (server-side rendering, kết xuất phía máy chủ) và hệ sinh thái testing cũng cần đánh giá kỹ. Chỉ nên chọn Web Components khi tổ chức có nhiều đội dùng stack khác nhau hoặc cần nhúng component vào môi trường không phải SPA (single-page application, ứng dụng một trang).

Nếu đội dùng MUI hoặc Ant Design thì có cần xây design system riêng không?

Cần phân biệt rõ: dùng MUI hay Ant Design rồi tuỳ chỉnh màu sắc là theme, không phải design system riêng. Sinh Vũ không gọi đó là design system của Anh Chị. Nếu mục tiêu là thương hiệu nhất quán và kiểm soát component lâu dài, cần thảo luận về mức độ xây riêng so với kế thừa thư viện có sẵn.