Xây dựng và Mở rộng Hệ thống UI cho Công cụ Nội bộ tại Meta

Tại hội nghị QCon San Francisco, Cindy Zhang - kỹ sư Front-end thuộc đội ngũ nền tảng sản phẩm công cụ nội bộ tại Meta - đã có bài thuyết trình sâu sắc về hành trình xây dựng và mở rộng XDS. Đây là hệ thống UI thống nhất đang cung cấp sức mạnh cho hơn 10.000 công cụ nội bộ của tập đoàn này.

Bài thuyết trình không chỉ đi sâu vào khía cạnh kỹ thuật mà còn chia sẻ những bài học quản lý quý giá cho các kiến trúc sư và lãnh đạo kỹ thuật về cách vận hành một hệ thống quy mô lớn, từ việc quản lý đóng góp của cộng đồng đến việc thực hiện các thay đổi an toàn mà không làm gián đoạn hoạt động của hàng nghìn ứng dụng.

Khởi tạo từ nhu cầu thực tế

Sáu năm trước, hệ thống công cụ nội bộ tại Meta tồn tại nhiều hạn chế. Chúng được xây dựng dựa trên hạ tầng web và các thành phần (component) dành cho Facebook bấy giờ, nhưng thiếu đi các thành phần phức tạp như bảng biểu, tìm kiếm, mật độ bố cục và các mẫu thiết kế chuyên dụng cho công cụ quản lý.

XDS (Cross-Design System) ra đời như một nỗ lực tự phát (grassroots) với mục đích tạo ra một giải pháp thống nhất cho mọi tổ chức trong Meta. Đội ngũ ban đầu chỉ gồm hai kỹ sư và bốn nhà thiết kế làm việc bán thời gian. Thay vì sa đà vào việc tạo ra một hệ thống hoàn hảo ngay từ đầu, họ tập trung vào việc "làm đi" và giải quyết những vấn đề khó khăn nhất ngay trong giai đoạn đầu.

Một trong những chiến lược thành công của họ là việc chọn ra một công cụ có độ phức tạp cao và nhiều người dùng (như công cụ "Butterfly" dùng để tạo quy trình công việc) để làm thí điểm (pilot). Việc này giúp làm nổi bật giá trị của hệ thống ngay lập tức và đảm bảo tính hoàn thiện tương đối trước khi mở rộng.

Mở rộng quy mô với sự hỗ trợ của cộng đồng

Hôm nay, XDS có hơn 1 triệu lượt nhập khẩu (import) trong kho chứa mã nguồn (codebase) của Meta. Tuy nhiên, sự tăng trưởng này đi kèm với những thách thức lớn về quy mô. Để không trở thành nút thắt cổ chai, đội ngũ XDS đã thiết lập một mô hình cộng đồng, khuyến khích các kỹ sư từ các đội khác nhau đóng góp vào hệ thống.

Mô hình này mang lại lợi ích kép: vừa giảm bớt khối lượng công việc cho đội ngũ chính, vừa giúp chia sẻ ngữ cảnh hai chiều giữa đội ngũ nền tảng và các đội sản phẩm. Để quản lý khối lượng đóng góp khổng lồ (hơn 150 cá nhân mỗi kỳ, khoảng 45 bộ thay đổi mỗi tuần), họ đã sử dụng các hệ thống tự động hóa và quy tắc ESLint tùy chỉnh. Các quy tắc này không chỉ giúp quản lý chất lượng mã nguồn mà còn hỗ trợ các thành viên mới làm quen với codebase phức tạp.

Quản lý thay đổi và giảm thiểu rủi ro

Với hàng nghìn bề mặt công cụ khác nhau sử dụng XDS, bất kỳ thay đổi nào cũng tiềm ẩn rủi ro gây lỗi nghiêm trọng. Đội ngũ đã sử dụng kết hợp giữa kiểm thử thủ công, kiểm thử hình ảnh (screenshot tests) và kiểm tra hành vi để đảm bảo chất lượng.

Một ví dụ điển hình về rủi ro khó lường là việc thêm 1.000 khai báo biến CSS vào một thẻ div đã từng gây ra sự cố quá tải bộ nhớ trên Chrome. Để giảm thiểu rủi ro khi triển khai các thay đổi lớn, Meta sử dụng hệ thống nội bộ gọi là Gatekeeper (tương tự khung A/B testing) để triển khai dần dần và có khả năng "tắt" tính năng ngay lập tức nếu có sự cố.

Khi cần thay đổi API trên quy mô lớn, đội ngũ sử dụng kỹ thuật codemod. Bằng cách tận dụng JavaScript Abstract Syntax Tree (JS AST), họ có thể viết script để tự động chuyển đổi mã nguồn trên toàn bộ monorepo. Gần đây, họ còn bắt đầu sử dụng AI codemods (sử dụng LLM) để xử lý các tác vụ di chuyển phức tạp hơn mà phân tích tĩnh không thể thực hiện được.

Vượt qua bế tắc và mở rộng nền tảng

Một bài học quan trọng khác là về sự ổn định của đội ngũ. Dự án XDS từng đối mặt với nguy cơ bị hủy bỏ do thiếu sự nhìn thấy từ cấp lãnh đạo cao hơn. Điều này buộc họ phải tìm kiếm một "ngôi nhà" tổ chức mới và thành lập một hội đồng (council) ảo gồm các đóng góp viên để bảo toàn kiến thức và duy trì sự ổn định của hệ thống.

Khi hệ thống thiết kế đạt đến độ bão hòa về mức độ áp dụng, thách thức tiếp theo là tránh sự trì trệ. Đội ngũ đã mở rộng phạm vi từ chỉ là thư viện UI sang một hệ thống nền tảng full-stack, bao gồm hạ tầng định tuyến (routing), quản lý công cụ và khả năng quan sát (observability). Họ cũng đang tích hợp AI, dạy cho các mô hình ngôn ngữ lớn (LLM) cách xây dựng công cụ nội bộ theo hệ sinh thái riêng của Meta, cho phép cả những người không kỹ thuật cũng có thể tạo ra công cụ.

Kết luận

Hành trình của XDS tại Meta là minh chứng cho việc xây dựng một khung công việc từ quy mô nhỏ lên toàn công ty. Chìa khóa thành công nằm ở việc giải quyết các vấn đề thực tế, trao quyền cho cộng đồng đóng góp, đầu tư vào công cụ tự động hóa để quản lý quy mô, và luôn giữ mắt nhìn về tầm nhìn dài hạn để mở rộng hệ thống. Cuối cùng, mã nguồn có thể đến và đi, nhưng văn hóa cộng đồng mà bạn xây dựng sẽ là tác động thực sự và bền vững nhất.