“Micro-frontends” là một thuật ngữ xuất hiện còn khá sớm. Thuật ngữ này được đưa ra lần đầu vào năm 2016, trong một bài báo với tiêu đề “Micro-frontends”, được đăng trên trang của ThoughtWorks vào ngày 07/11/2016 [20]. Một cách tóm lược, micro- frontends là một hướng kiến trúc mà nó được phát triển từ tư tưởng của microservices để áp dụng cho ứng dụng phía giao diện. Do vậy, nhiều người còn cho rằng micro- frontends thực chất là microservices cho tầng giao diện.
Trước khi đi vào tìm hiểu cụ thể về micro-frontends, chúng ta cùng điểm lại các mô hình triển khai ứng dụng web phổ biến từ trước đến giờ qua ví dụ bên dưới.
Ba cách triển khai một ứng dụng web được mô tả trong hình 2.4 (từ trái qua phải):
• Kiểu 1: dùng kiến trúc nguyên khối, tầng giao diện và tầng dịch vụ chung một khối.
• Kiểu 2: tách biệt hai tầng giao diện và dịch vụ. Tầng dịch vụ vẫn là kiến trúc nguyên khối.
28
• Kiểu 3: tầng giao diện tách biệt, tương tác với các microservices thông qua cổng API.
Hình 2.4. Ba mô hình triển khai web truyền thống
Ở cả ba mô hình web trong hình 2.4, ứng dụng tầng giao diện vẫn thường được sử dụng là kiểu ứng dụng nguyên khối. Với cách tiếp cận mới, micro-frontends hướng vào việc chuyển đổi ứng dụng web nguyên khối, từ một kiến trúc sử dụng chung một cấu trúc mã nguồn duy nhất sang một kiến trúc được kết hợp bởi nhiều ứng dụng phía giao diện.
Tư tưởng cốt lõi trong cách tiếp cận của micro-frontends là tập trung vào việc xây dựng một ứng dụng web như là một tập hợp của nhiều thành phần con, các thành phần này được xây dựng bởi các đội ngũ lập trình khác nhau. Thực ra, tư tưởng này không mới, và nó cũng có nhiều điểm tương đồng với cách tiếp cận của microservices. Tuy nhiên, việc đưa ý tưởng này để áp dụng cho phần giao diện thì vẫn còn khá xa lạ so với các mô hình làm web truyền thống trước đây, bởi các phạm trù liên quan đến micro- frontends mới chỉ xuất hiện trong khoảng thời gian từ 5 đến 6 năm trở lại đây.
Để hiểu rõ hơn về cách tiếp cận của micro-frontends, chúng ta xem xét một ví dụ sau.
Hình 2.5 mô tả giao diện một trang thông tin sản phẩm của một web bán hàng. Bố cục của trang này gồm ba thành phần: “Search” – thực hiện tính năng tìm kiếm sản phẩm, “Product List” – hiển thị danh sách sản phẩm và “Product Details” – hiển thị thông tin chi tiết của một sản phẩm mỗi khi người dùng chọn vào một sản phẩm bên phần “Product List”.
29
Hình 2.5. Trang thông tin sản phẩm của một web bán hàng
Theo hướng tiếp cận của micro-frontends, để xây dựng trang thông tin sản phẩm ở trên, người ta sẽ phát triển riêng biệt ba thành phần: “Search”, “Product List” và “Product Details”. Ba module này là ba ứng dụng riêng biệt, được giao cho ba đội phát triển, mỗi đội có thể lựa chọn các công nghệ khác nhau tùy theo thế mạnh của mình. Sau khi xây dựng xong, các module này sẽ được tích hợp lại để làm thành một trang hiển thị thông tin sản phẩm hoàn thiện.
Hình 2.6. Ba module riêng biệt của trang danh sách sản phẩm
Đối với nhóm phát triển, chúng ta thấy rằng công việc được phân phối cho từng đội với tính chuyên môn hóa rõ ràng. Mỗi đội phụ trách một phần việc chuyên biệt, và nhờ đó tốc độ xây dựng sản phẩm được đẩy lên cao do giảm được sự phụ thuộc chặt giữa các thành phần.
Như vậy, micro-frontends là một hướng kiến trúc được đề xuất cho sự phát triển ứng dụng web mà ở đó người ta phân tách một ứng dụng theo hướng nguyên khối thành nhiều thành phần con. Các thành phần này được xây dựng, phát triển độc lập và tích hợp lại để tạo thành một hệ thống tổng thể. Kế thừa tư tưởng của microservices, các
30
micro-frontends cần đảm bảo các nguyên tắc quan trọng khi thiết kế và phát triển như sau:
• Có sự tách biệt về mặt cấu trúc mã nguồn và đội phát triển.
• Đảm bảo tính đóng gói về mặt kỹ thuật và chức năng nghiệp vụ.
• Đảm bảo tính đơn nhiệm.
• Áp dụng việc mô hình hóa theo miền nghiệp vụ của bài toán.