Những cách implement microfrontend

/ vominh

Cũng giống như microservice, microfrontend là cách để implement frontend mà ta chia frontend ra thành nhiều phần độc lập với nhau.

Các giải pháp cho microfrontend

Cũng từ định nghĩa đơn giản đó, ta có thể có nhiều cách để chia một website thành nhiều phần nhỏ khác nhau. Tạm thời bỏ qua các tiêu chỉ để chia tách, mà sẽ chỉ nói đến cách để quản lý và implement các module này sao cho nó có thể làm việc được với nhau.

  1. NPM Package
  2. Iframe
  3. Federated Module
  4. Web component

Frontend sử dụng iframe

Đây là cách để implement microfrontend đơn giản và sơ khai nhất, cũng như dễ implement. Nhưng cũng có những limit riêng

Cách cài đặt

Cài đặt không quá phức tạp. Hiện thực các module thành những trang web riêng biệt, thương thì các trang này không có header, footer hoặc các thành phần thuộc về app shell. Nó chỉ bao gồm những gì phục vụ cho feature đó.

Shell là một website dùng để gắn các micro frontend vào một chỗ, quản lý share data, layout và navigation.

Ưu điểm

  1. Implement đơn giản
  2. Quen thuộc với cách implement truyền thống

Nhược điểm

Các microfrontend không thể chia sẻ dữ liệu với nhau trực tiếp được. Mà phải sử dụng cookie, hoặc thông qua server.

Frontend sử dụng package

Cài đặt

Làm một web app bình thường mà trong đó các micro frontend được implement thành các package khác nhau, giống như cách build, sử dụng những package bên thứ 3.

Ưu điểm

  1. Các module được phát triển độc lập.
  2. Dependency độc lập

Nhược điểm

  1. Cần phải build lại cả app khi có bất kì thay đổi nào trong các module.
  2. A/B testing, custom trải nghiệm người dùng thì phải build ra một bản khác.

Frontend sử dụng federated module

Cài đặt

Sử dụng Webpack để build các module một cách độc lập, rất giống với [[Microfrontend sử dụng package]], nhưng khác biệt ở chỗ các module này được build để có thể được require trong quá trình runtime. Dependency cũng được resolve trong lúc runtime.

Ưu điểm

  1. Các module được build, phát triển độc lập
  2. Khả năng custom, tạo nhiều phiên bản trải nghiệm cho người dùng mà không cần phải build lại.
  3. Rollout/rollback đơn giản, nhanh chóng và độc lập.
  4. Không cần phải build lại toàn bộ app khi release một micro frontend

Nhược điểm

  1. Implement có phần phức tạp hơn.