Giao diện vi mô và hệ thống thiết kế trôi dạt: Giữ giao diện người dùng nhất quán giữa các nhóm
Cách các nhóm sử dụng giao diện người dùng vi mô duy trì một giao diện người dùng nhất quán: mã thông báo và thành phần được chia sẻ dưới dạng gói được phiên bản, cách ly CSS, chính sách nâng cấp và kiểm tra hồi quy trực quan.
Điểm chính
Giao diện người dùng vi mô cho phép các nhóm triển khai các phần của sản phẩm một cách độc lập, điều này có thể khiến giao diện người dùng bị lệch: các phiên bản thành phần khác nhau, CSS xung đột và các kiểu trùng lặp. Giữ tính nhất quán bằng cách chia sẻ mã thông báo thiết kế và các thành phần dưới dạng các gói được phiên bản, cách ly CSS của mỗi nhóm, đồng ý chính sách nâng cấp và nắm bắt sự khác biệt bằng các thử nghiệm hồi quy trực quan.
Tại sao trôi dạt xảy ra
Trang web của Martin Fowler mô tả các giao diện người dùng vi mô là các ứng dụng giao diện người dùng có thể phân phối độc lập, được tổng hợp thành một tổng thể lớn hơn, với lợi ích chính là triển khai độc lập. Sự độc lập tương tự gây ra sự trôi dạt: các nhóm nâng cấp hệ thống thiết kế vào những thời điểm khác nhau, sao chép các thành phần để di chuyển nhanh hơn và viết CSS rò rỉ sang các phần khác của trang. Bài viết cũng cảnh báo rằng một số cách triển khai phụ thuộc trùng lặp và CSS, mang tính toàn cầu và xếp tầng, cần được cách ly có chủ ý.
Chia sẻ hệ thống dưới dạng gói
Xuất bản mã thông báo và thành phần dưới dạng gói được phiên bản, không phải mã được sao chép. Các mã thông báo ở định dạng tiêu chuẩn, chẳng hạn như định dạng W3C DTCG, có thể được tạo cho mọi khung mà nhóm sử dụng, do đó, nhóm React và nhóm Vue vẫn có chung màu sắc, khoảng cách và chuyển động.
Cô lập CSS
Ngăn chặn rò rỉ kiểu dáng giữa các nhóm bằng cách tiếp cận nhất quán: quy ước đặt tên như BEM, Mô-đun CSS, CSS-in-JS hoặc Shadow DOM cho các thành phần web. Chọn một quy ước cho toàn bộ sản phẩm và xơ vải cho nó.
Chính sách nâng cấp
Đồng ý rằng một nhóm có thể tụt lại phía sau bao xa, chẳng hạn như không có nhiều hơn một phiên bản chính và sử dụng phiên bản ngữ nghĩa để các nhóm biết khi nào các thay đổi sẽ bị phá vỡ. Theo dõi phiên bản mà mỗi giao diện người dùng vi mô sử dụng trong bảng thông tin chung.
Tự động bắt trôi
Các thử nghiệm hồi quy trực quan trên các màn hình chính, các quy tắc tìm lỗi mã nguồn cấm các giá trị khoảng cách và màu thô cũng như các đánh giá thiết kế trên các bề mặt dùng chung (tiêu đề, điều hướng, thanh toán) phát hiện ra sự không nhất quán trước khi người dùng nhìn thấy chúng.
Nguyên tắc chính cần nhớ
- Việc triển khai độc lập khiến giao diện người dùng có khả năng bị trôi
- Chia sẻ mã thông báo và các thành phần dưới dạng gói được phiên bản
- Cô lập CSS bằng một cách tiếp cận nhất quán
- Đồng ý chính sách nâng cấp và theo dõi các phiên bản
- Sử dụng các bài kiểm tra hồi quy trực quan và quy tắc tìm lỗi mã nguồn
Câu hỏi thường gặp
Nguồn
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — thiết kếtokens.org
- Semantic Versioning 2.0.0 — semver.org