Kiến trúc ứng dụng frontend cho doanh nghiệp

• Codebase càng lớn = càng khó hiểu và cũng càng khó sửa đổi

• Cách giải quyết là gì? Giữ codebase ở quy mô nhỏ.

• Tách codebase theo từng domain & micro frontend to rescue!

• Nhu cầu như thiết lập quan hệ phụ thuộc giữa các thư viện trong monorepo & kiểm tra dependency được giải quyết bằng cách áp dụng Nx

• Tách mã thành application và library

• Application đảm nhiệm vai trò inject dependency và cấu hình

• Phần lớn tính năng được triển khai trong library

  • Trong library không chỉ có design system dùng chung, quốc tế hóa, module bên thứ ba mà còn cả những đoạn mã không tái sử dụng như hero banner của trang chủ, trang chi tiết sản phẩm, lịch sử đơn hàng, v.v.

Library Feature

• Về cơ bản, mọi component được dùng trong một trang sẽ được viết trong library Feature cùng tên

  • ví dụ) Mọi component của trang SignInPage trong domain account sẽ được viết trong library account/feature-sign-in

• Component được chia sẻ giữa từ hai trang trở lên trong cùng một domain sẽ được tách thành một feature riêng trong domain đó

  • ví dụ) Nếu component KakaoLoginButton được dùng chung ở SignInPage và SignUpPage của domain account, thì component đó sẽ được viết trong library account/feature-social-login

• Component được chia sẻ giữa các trang thuộc những domain khác nhau sẽ được tách thành một feature riêng trong domain dùng chung

  • ví dụ) Component GlobalNavigation được chia sẻ giữa HomePage của domain landing và LecturePage của domain classroom sẽ được viết trong library shared/feature-navigation

Library Shell

• Kết hợp các component của library Feature và UI để tạo thành các trang

  • ví dụ) Component SignInPage là component của library account/shell-kr-web. Trong đó còn có SignUpPage, PhoneVerificationPage, v.v.

• Library Shell là điểm vào của một domain cụ thể được cung cấp cho application

• Có thể cung cấp các điểm vào khác nhau cho từng application

  • Ví dụ..

  • Các component được dùng trong component HomePage được viết trong library landing/feature-home.

  • Nhưng dù cùng là HomePage, cấu hình sẽ khác nhau tùy đó là HomePage của site Mỹ, site Nhật hay site Hàn Quốc.

  • Vì vậy có thể tạo các library shell cho từng application truy cập vào domain landing. (shell-us-web, shell-jp-web, shell-kr-web)

Library Provider

• Library quản lý trạng thái được chia sẻ giữa từ hai library Feature trở lên

  • ví dụ) shared/provider-auth-state quản lý trạng thái đăng nhập

Library UI

• Tập hợp các component trình bày được chia sẻ giữa từ hai library trở lên.

Library Utility

• Mọi module không thuộc 4 nhóm ở trên

• Cần cung cấp các chức năng đủ độc lập để có thể kiểm thử và triển khai mà không liên quan tới domain model của Class101.

  • ví dụ) shared/utils-apollo-client, shared/utils-i18n

Application

• Chỉ còn đảm nhiệm vai trò quản lý cấu hình và dependency = gần như không có mã ở application