Linear hoàn tất cuộc di trú 1.000 pull request từ styled-components sang StyleX của Meta

Linear vừa công bố hoàn tất quá trình chuyển đổi toàn bộ các ứng dụng React của mình từ styled-components sang StyleX — thư viện CSS-in-JS do Meta phát triển. Đây là một trong những cuộc di trú hạ tầng giao diện lớn nhất được ghi nhận trong cộng đồng frontend gần đây, với hơn 1.000 pull request được mở, xem xét và hợp nhất.

Vì sao Linear quyết định thay đổi?

styled-components từng là lựa chọn quen thuộc của nhiều đội ngũ React nhờ cú pháp trực quan và khả năng viết CSS ngay trong component. Tuy nhiên, khi quy mô ứng dụng tăng lên, cách tiếp cận này bộc lộ những hạn chế rõ rệt:

• Chi phí runtime cao: styled-components sinh CSS ngay trong quá trình chạy, khiến luồng chính (main thread) phải xử lý nhiều tác vụ hơn mức cần thiết.
• Ranh giới component lỏng lẻo: Việc cho phép truyền prop động vào style dễ dẫn đến tình trạng style bị phân tán, khó kiểm soát và khó tái sử dụng.
• Khó tối ưu khi ứng dụng lớn: Các ứng dụng nhiều tương tác như Linear cần một hệ thống style ổn định, có thể dự đoán được và hỗ trợ tốt cho việc tách nhỏ bundle.

StyleX được thiết kế để giải quyết trực tiếp những vấn đề này. Thay vì sinh CSS theo prop, StyleX biên dịch style thành các lớp CSS tĩnh tại thời điểm build, nhờ đó giảm đáng kể công việc phải thực hiện lúc chạy.

Kết quả đạt được

Theo Linear, cuộc di trú mang lại những cải thiện đo lường được:

• Giảm khối lượng công việc trên luồng chính, nhờ loại bỏ phần lớn chi phí sinh style trong runtime.
• Tốc độ điều hướng nhanh hơn giữa các trang và view trong ứng dụng.
• Ranh giới component rõ ràng hơn, giúp đội ngũ dễ dàng kiểm soát nơi nào được phép định nghĩa style và nơi nào không.

Việc chuyển sang StyleX không chỉ là đổi thư viện, mà còn là thay đổi cách đội ngũ suy nghĩ về style — từ "viết gì cũng được" sang "viết trong khuôn khổ đã định".

Những chỉ trích vẫn còn đó

Dù kết quả tích cực, StyleX không tránh khỏi phản hồi trái chiều. Một số lập trình viên cho rằng các quy tắc của StyleX quá cứng nhắc, hạn chế khả năng sáng tạo và khiến việc xử lý các trường hợp style động trở nên vụng về hơn so với styled-components.

Điểm đáng chú ý là StyleX yêu cầu style phải được định nghĩa tĩnh và tách biệt khỏi logic component. Với những đội ngũ quen với việc truyền prop trực tiếp vào style, đây là một sự thay đổi tư duy không nhỏ, đòi hỏi thời gian thích nghi và đôi khi phải viết lại nhiều đoạn mã.

Ý nghĩa với cộng đồng frontend Việt Nam

Câu chuyện của Linear là một bài học thực tế cho các đội ngũ phát triển sản phẩm web tại Việt Nam, đặc biệt là những nhóm đang vận hành ứng dụng React quy mô lớn:

• Hiệu năng runtime là yếu tố then chốt: Khi ứng dụng ngày càng phức tạp, chi phí sinh CSS trong lúc chạy có thể trở thành điểm nghẽn thực sự.
• Kỷ luật kiến trúc quan trọng hơn sự tiện lợi trước mắt: Các quy tắc nghiêm ngặt ban đầu có thể gây khó chịu, nhưng về lâu dài giúp mã nguồn dễ bảo trì hơn.
• Không có giải pháp nào hoàn hảo: Việc lựa chọn thư viện style cần cân nhắc giữa hiệu năng, trải nghiệm lập trình viên và khả năng mở rộng của đội ngũ.

Với hơn 1.000 pull request, cuộc di trú của Linear cho thấy việc thay đổi nền tảng style trong một sản phẩm đang vận hành là bài toán lớn về cả kỹ thuật lẫn tổ chức — nhưng cũng chứng minh rằng những khoản đầu tư như vậy có thể mang lại lợi ích đo lường được.