Bài đăng này được viết bởi Luca Mezzalira, Principal Specialist Solutions Architect, Serverless.

Microservice là một mô hình phổ biến để xây dựng các hệ thống phân tán. Khi frontend developers đã sửa đổi cách tiếp cận của họ để xây dựng kiến trúc trên quy mô lớn, nhiều người đang xây dựng  micro-frontends.

Chuỗi blog này khám phá cách triển khaimicro-frontends bằng cách sử dụng phương pháp server-side rendering (SSR) với các dịch vụ AWS. Bài viết đầu tiên này đề cập đến các đặc điểm kiến trúc và các khối xây dựng để thiết kế kiến trúc micro-frontends thành công trong AWS Cloud.

Micro-frontend là gì?

Micro-frontend là đại diện kỹ thuật của tên miền phụ doanh nghiệp. Chúng cho phép các nhóm độc lập làm việc song song, giảm sự phụ thuộc bên ngoài và tăng thông lượng phân phối. Chúng thể hiện một số đặc điểm của microservices  như phân cấp quản trị, thiết kế cho sự thất bại và thiết kế tiến hóa.

Sự khác biệt chính giữa Micro-frontend và các thành phần có liên quan đến quyền sở hữu miền hiện có bên trong Micro-frontend. Với các thành phần, kiến thức về miền thường được ủy quyền cho vùng chứa của nó, nơi biết cách sử dụng thuộc tính của thành phần dựa trên ngữ cảnh. Việc sở hữu miền bên trong giao diện người dùng vi mô mang lại sự độc lập mà bạn mong đợi trong hệ thống phân tán. Điều này không có nghĩa là các micro-frontend không thể giao tiếp hoặc chia sẻ tài nguyên, nhưng tư duy thì khác so với các thành phần.

Nếu hiện nay bạn đang sử dụng microservices, bạn có thể hưởng lợi từ Micro-frontend để mở rộng quy mô ứng dụng giao diện người dùng của mình. Trước các Micro-frontend, việc mở rộng quy mô chủ yếu dựa vào chuyên môn của các nhà phát triển. Micro-frontend cho phép bạn hiện đại hóa các ứng dụng giao diện người dùng theo cách lặp đi lặp lại giống như bạn làm với vi dịch vụ. Mỗi người dùng chỉ tải xuống mã cần thiết để hoàn thành một tác vụ cụ thể, tăng hiệu suất và trải nghiệm của người dùng đối với ứng dụng web.

Đặc điểm kiến trúc

Chuỗi blog này xây dựng trang chi tiết sản phẩm của một trang web thương mại điện tử mẫu sử dụng Micro-frontend với cơ sở hạ tầng không có máy chủ.

Trang này bao gồm:

• Một template bao gồm một header. Điều này có thể bao gồm các phần phổ biến hơn nhưng sử dụng một phần trong ví dụ này.
• Micro-frontend thông báo được hiển thị phía máy khách. Hệ thống thông báo phải phản ứng với tương tác của người dùng, do đó không thể hiển thị phía máy chủ với phần còn lại của trang.
• Một chi tiết sản phẩm micro-frontend.
• Một đánh giá micro-frontend.

Mọi micro-frontend đều độc lập và có thể được phát triển bởi các nhóm khác nhau làm việc trong cùng một dự án. Điều này có thể làm giảm sự phụ thuộc bên ngoài và các lỗi tiềm ẩn trên toàn bộ ứng dụng.

Các đặc điểm hệ thống chính của dự án này là:

1. Server-side rendering: Hệ thống phải được thiết kế theo phương pháp Server-side rendering. Điều này giúp hiển thị trang nhanh chóng bên trong các trình duyệt hiện đại và giảm nhu cầu sử dụng JavaScript phía client để hiển thị trang
2. Framework agnostic: Giải pháp phải hoạt động với nhiều thư viện JavaScript có sẵn và không bị ràng buộc hoặc tối ưu hóa cho một khung cụ thể.
3. Sử dụng phương pháp tối ưu hóa tốt nhất: Tối ưu hóa là một tính năng chính cho các ứng dụng SSR. Nhiều ngành công nghiệp dựa vào những đặc điểm này để tăng doanh thu. Ví dụ này tóm tắt các chỉ số quan trọng về trang web, quá trình hydrat hóa lũy tiến và các cấp độ bộ nhớ đệm khác nhau để tăng tốc thời gian phản hồi của trang web.
4. Đội độc lập: Mọi micro-frontend phải được phát triển với mức độ phụ thuộc bên ngoài tối thiểu. Sự phối hợp liên tục giữa các nhóm có thể là dấu hiệu của sự kết hợp giữa thời gian thiết kế và làm mất hiệu lực mục đích đằng sau một hệ thống phân tán.
5. Cơ sở hạ tầng không có máy chủ dành cho frontend dev: Mô hình không có máy chủ giúp các nhà phát triển tập trung vào logic kinh doanh thay vì cơ sở hạ tầng, sử dụng mô hình “trả tiền theo giá trị”, giúp giảm chi phí. Bạn có thể lưu vào bộ nhớ đệm các phản hồi của giao diện người dùng vi mô và giảm lưu lượng truy cập trên nguồn gốc cũng như nhu cầu mở rộng quy mô mọi bộ phận của hệ thống theo cùng một cách.

Thiết kế kiến trúc cấp cao

Đây là thiết kế cấp cao để kết hợp các đặc điểm kiến trúc sau:

1. Điểm truy cập ứng dụng là mạng phân phối nội dung (CDN) được sử dụng vì lý do lưu trữ, hiệu suất và bảo mật.
2. Phương pháp SSR yêu cầu một nơi lưu trữ tất cả các tệp tĩnh để hydrat hóa mã JavaScript trong trình duyệt và để tạo kiểu cho các thành phần.
3. Yêu cầu trang yêu cầu trình soạn thảo giao diện người dùng truy xuất các giao diện người dùng vi mô và ghép chúng lại với nhau để cung cấp trang được trình duyệt sử dụng. Nó truyền trang HTML cuối cùng tới trình duyệt để nâng cao chỉ số hiển thị nội dung (LCP) lớn nhất từ các chỉ số quan trọng về web cốt lõi.
4. Việc tách các micro-frontend khỏi trình soạn thảo giao diện người dùng dựa trên hai cơ chế: Khám phá micro-frontend hoạt động giống như khám phá dịch vụ trong kiến trúc vi dịch vụ và mẫu HTML trên mỗi trang mô tả vị trí chèn các giao diện người dùng vi mô vào trong một trang. Các mẫu có thể nằm trong cùng một kho lưu trữ nơi có các tệp tĩnh khác.
5. Micro-frontend thông báo phản ứng với các tương tác của người dùng, cung cấp thông báo khi người dùng thêm sản phẩm vào giỏ hàng.
6. Chi tiết sản phẩm micro-frontend có dữ liệu có khả năng lưu vào bộ nhớ đệm cao nên không yêu cầu nhiều thay đổi theo thời gian.
7. Các bài đánh giá vi mô phải truy xuất các bài đánh giá của người dùng về một sản phẩm cụ thể.

Yếu tố then chốt để tránh sự trùng lặp về thời gian thiết kế trong kiến trúc này là việc khám phá các giao diện người dùng vi mô. Ưu điểm chính của phương pháp này là cung cấp khả năng khám phá để đơn giản hóa các chiến lược đa môi trường, đồng thời giảm bán kính vụ nổ nhờ sử dụng triển khai xanh lam/xanh lục hoặc phát hành canary. Chủ đề này sẽ được đề cập sâu hơn trong một bài viết sắp tới.

Từ thiết kế cấp cao đến triển khai

Cách tiếp cận bất khả tri về khung giúp cho phép kiểm soát sự phát triển của hệ thống. Nó đạt được điều này bằng cách sử dụng HTML qua mạng, trong đó mọi giao diện người dùng vi mô hiển thị một đoạn HTML và trả về cho trình soạn thảo giao diện người dùng.

Khi trình soạn thảo giao diện người dùng tập hợp các đoạn HTML, nó sẽ soạn trang cuối cùng để hiển thị bằng cách nhúng. Mỗi trang được thể hiện bằng một mẫu cụ thể được lưu trữ trong các tệp tĩnh. Trình soạn thảo giao diện người dùng truy xuất mẫu rồi truy xuất các tham chiếu phần giữ chỗ trong mẫu có thể được thay thế bằng các đoạn giao diện người dùng vi mô.

Đây là kiến trúc được sử dụng:

1. Amazon CloudFront cung cấp một điểm truy cập duy nhất cho ứng dụng. Bản phân phối có hai nguồn gốc: nguồn đầu tiên dành cho các tệp tĩnh và nguồn thứ hai dành cho trình soạn thảo giao diện người dùng.
2. Các tệp tĩnh được lưu trữ trong bộ chứa Amazon S3. Chúng được trình duyệt và trình soạn thảo giao diện người dùng sử dụng cho các mẫu HTML.
3. Trình soạn thảo giao diện người dùng chạy trên cụm bộ chứa trong AWS Fargate. Việc sử dụng giải pháp được đóng gói cho phép bạn sử dụng khả năng phát trực tuyến và kết xuất đa luồng nếu cần.
4. AWS Systems Manager Parameter Store được sử dụng làm hệ thống khám phá các micro-frontend cơ bản. Dịch vụ này là một kho lưu trữ key-value được trình soạn thảo giao diện người dùng sử dụng để truy xuất các điểm cuối của micro-frontend để sử dụng.
5. Micro-frontend thông báo lưu trữ gói JavaScript được tối ưu hóa trong S3 bucket. Điều này hiển thị trên máy khách vì nó phải phản ứng với các tương tác của người dùng.
6. Các bài đánh giá micro-frontend được tạo bởi hàm AWS Lambda với các bài đánh giá của người dùng được lưu trữ trong Amazon DynamoDB. Nó được hiển thị hoàn toàn phía máy chủ và xuất ra một đoạn HTML
7. Chi tiết sản phẩm micro-frontend là micro-frontend low-code sử dụng AWS Step Functions. Quy trình làm việc nhanh có thể được gọi một cách đồng bộ và chứa logic để hiển thị đoạn HTML và lớp bộ nhớ đệm. Điều này làm tăng hiệu suất nhờ tích hợp tự nhiên với hơn 200 dịch vụ AWS.

Khi sử dụng phương pháp này, mọi nhóm phát triển micro-frontend đều có thể độc lập xây dựng và phát triển miền kinh doanh của mình. Các điểm tiếp xúc chính với các nhóm khác có liên quan đến sự tích hợp ban đầu và cơ chế giao tiếp giữa các giao diện người dùng vi mô có trong cùng một trang. Khi đạt được những điểm này, mọi nhóm sẽ giảm bớt sự phụ thuộc vào bên ngoài và có thể nắm bắt được bản chất tiến hóa của micro-frontends.

Kết luận

Bài đăng đầu tiên này bắt đầu hành trình tìm hiểu micro-frontends, một kiến trúc phân tán dành cho các ứng dụng giao diện người dùng. Bài đăng tiếp theo sẽ khám phá trình soạn thảo giao diện người dùng và triển khai khám phá giao diện người dùng vi mô.

Nếu bạn muốn tìm hiểu thêm về micro-frontend, hãy xem khung quyết định về micro-frontend, một mô hình tinh thần được tạo ra cho sự phức tạp ban đầu của việc tiếp cận thiết kế micro-frontend. Khi được sử dụng như một ngôi sao bắc đẩu, khung quyết định sẽ đơn giản hóa việc phát triển các ứng dụng micro-frontend.

Trong phần kiến trúc tham chiếu AWS, bạn có thể tìm thấy sơ đồ hoàn chỉnh tương tự như ứng dụng được mô tả trong loạt blog này cùng với các chi tiết bổ sung.