Mới đây, Lee Robinson đã có một thread trên Twitter chia sẻ về cách Vercel áp dụng microfrontends để tạo ra trải nghiệm người dùng mượt mà trên nền tảng của họ. Những dòng tweet này hé lộ các lựa chọn kiến trúc giúp Vercel vừa giữ được hiệu năng cao, vừa quản lý được một mớ ứng dụng phức tạp.

Ngay từ tweet đầu tiên, Lee đã "bật mí":
"btw đây là cách vercel.com hoạt động. Tụi mình có hơn 10 microfrontends ghép lại thành một thứ trông như monolith. Ví dụ: marketing site, microsite, docs, app + với Speculation Rules API, bạn vẫn có thể giữ tốc độ chuyển trang nhanh như chớp."
Nghe xịn xò chưa? Đây chính là tinh thần của microfrontends: nhiều ứng dụng frontend độc lập, deploy riêng lẻ, nhưng khi ráp lại thì trông như một khối thống nhất.

Microfrontends là một kiểu kiến trúc cho phép devs "chẻ nhỏ" các ứng dụng monolithic to đùng thành những phần nhỏ, dễ quản lý hơn. Cách này không chỉ giúp devs code khỏe hơn mà còn cải thiện hiệu năng tổng thể của ứng dụng. Nhờ áp dụng microfrontends, Vercel đã tăng tốc độ build preview lên hơn 40% và giảm thời gian compile khi dev local. Nghe đã tai chưa? Ngoài ra, cách này còn giúp tối ưu dependencies, giảm tải trang, và cải thiện điểm Core Web Vitals – một chỉ số quan trọng để đánh giá trải nghiệm người dùng.

Trong tweet thứ hai, Lee lại "thả thính":
"Tụi mình sẽ nói thêm về cái này trong tương lai! Còn giờ thì ↓"
Nghe là biết Vercel đang chuẩn bị "bung lụa" thêm nhiều insights về microfrontends rồi.

Một trong những "vũ khí bí mật" mà Vercel dùng chính là Next.js Multi-Zones. Tính năng này cho phép deploy nhiều ứng dụng Next.js dưới cùng một domain. Quá tiện cho microfrontends luôn! Nhờ vậy, mỗi phần của ứng dụng có thể được phát triển và deploy độc lập, nhưng khi người dùng nhìn vào thì vẫn thấy giao diện liền mạch, không lộ "sạn". Đặc biệt, khi ứng dụng ngày càng phức tạp, kiểu kiến trúc này càng phát huy tác dụng.

Lee cũng nhắc đến Speculation Rules API, một công cụ giúp tăng tốc độ cho các lần điều hướng trang tiếp theo. API này kiểu như "đoán trước" và pre-fetch hoặc pre-render các trang, giúp trải nghiệm người dùng mượt mà hơn, nhất là với các ứng dụng nhiều trang như microfrontends. Nhờ vậy, dù kiến trúc bên dưới có phức tạp cỡ nào, người dùng vẫn cảm thấy mọi thứ trơn tru như đường đua F1.

Về cách tổ chức, Vercel để các microfrontends trong một monorepo. Trong đó, các ứng dụng độc lập nằm trong thư mục "apps", còn các package dùng chung thì được gom lại để đảm bảo tính nhất quán. Họ còn dùng các công cụ như Turborepo và Dependency Cruiser để quản lý dependencies, tránh trùng lặp các thành phần dùng chung. Nghe thôi đã thấy gọn gàng, ngăn nắp rồi!

Tuy nhiên, microfrontends cũng không phải "hoa hồng không gai". Việc quản lý state dùng chung, routing, hay giao tiếp giữa các phần của ứng dụng có thể khá đau đầu. Nhưng Vercel đã xử lý ngon lành bằng các kỹ thuật như quản lý state dùng chung, kiến trúc event-driven, và APIs. Nhờ vậy, hệ thống microfrontends của họ vẫn chạy mượt mà, hiệu quả.

Tóm lại, thread của Lee Robinson đã cho chúng ta một cái nhìn thú vị về cách Vercel "chơi lớn" với microfrontends. Khi cuộc thảo luận về kiểu kiến trúc này ngày càng sôi động, sẽ rất đáng mong chờ để xem Vercel tiếp tục tinh chỉnh và chia sẻ thêm kinh nghiệm của họ với cộng đồng dev. Những insights này không chỉ cho thấy lợi ích của microfrontends mà còn nhấn mạnh tầm quan trọng của hiệu năng và trải nghiệm người dùng trong phát triển web hiện đại.