by James Beswick | on 07 NOV 2022 | in AWS Fargate, AWS Lambda, Serverless | Permalink |  Share

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

Microservices là một mẫu phổ biến để xây dựng các hệ thống phân tán. Khi các nhà phát triển frontend đã điều chỉnh phương pháp của họ để xây dựng các kiến trúc với quy mô lớn, nhiều người đang xây dựng các micro-frontends.

Nhiều bài blog này khám phá cách triển khai micro-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 sẽ đi sâu vào các đặc điểm kiến trúc và các khối xây dựng để thiết kế một kiến trúc micro-frontends thành công trên AWS Cloud.

Micro-frontends là gì?

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

Sự khác biệt chính giữa micro-frontends và các thành phần liên quan đến sự sở hữu của miền được hiện diện bên trong một micro-frontend. Với các thành phần, kiến thức về miền thường được ủy quyền cho bộ chứa của nó, ngườ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 một micro-frontend cho phép sự độc lập mà bạn mong đợi trong một hệ thống phân tán. Điều này không có nghĩa là micro-frontends không thể giao tiếp hoặc chia sẻ tài nguyên, nhưng cách suy nghĩ khác biệt so với các thành phần.

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

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

Loạt bà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 bằng cách sử dụng micro-frontends với cơ sở hạ tầng serverless.

Trang bao gồm:

• Một mẫu bao gồm một phần tiêu đề. Điều này có thể bao gồm các phần thông thường hơn nhưng chỉ sử dụng một phần trong ví dụ này.
• Một micro-frontend thông báo được render 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, vì vậy không thể được render phía máy chủ cùng với phần còn lại của trang.
• Một micro-frontend chi tiết sản phẩm.
• Một micro-frontend đánh giá.

Mỗi micro-frontend là độc lập và có thể được phát triển bởi các nhóm khác nhau làm việc trên cùng một dự án. Điều này có thể giảm thiểu các 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ế với một phương pháp render phía máy chủ. Điều này cung cấp việc render trang nhanh chóng trong các trình duyệt hiện đại và giảm thiểu sự cần thiết của JavaScript phía máy khách để render trang.
2. Framework không phụ thuộc: Giải pháp phải hoạt động với một loạt các thư viện JavaScript khả dụng và không bị ràng buộc hoặc tối ưu hóa cho một framework cụ thể.
3. Áp dụng các 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 render phía máy chủ. Nhiều ngành công nghiệp phụ thuộc vào các đặc điểm này để tăng doanh số bán hàng. Ví dụ này bao gồm các thước đo về core web vitals, progressive hydration và các cấp độ bộ nhớ cache khác nhau để tăng tốc thời gian phản hồi của các trang web.
4. Độc lập của nhóm: Mỗi micro-frontend phải được phát triển với ít phụ thuộc bên ngoài nhất có thể. Sự phối hợp liên tục giữa các nhóm có thể là dấu hiệu của việc liên kết ở design-time coupling, làm mất mục đích của một hệ thống phân tán.
5. Hạ tầng serverless cho nhà phát triển frontend: Mô hình không dùng máy chủ giúp nhà phát triển tập trung vào logic kinh doanh thay vì hạ tầng, sử dụng một mô hình “trả tiền cho giá trị”, giúp giảm chi phí. Bạn có thể cache các phản hồi của micro-frontend và giảm lưu lượng truy cập trên nguồn gốc cũng như cần phải mở rộng mỗi 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 để tích hợp những đặc điểm kiến trúc này:

1. Điểm nhập ứng dụng là một mạng phân phối nội dung (CDN) được sử dụng để cache, tăng hiệu suất và bảo mật.
2. Phương pháp render phía máy chủ yêu cầu một nơi để lưu trữ tất cả các tệp tĩnh để hydrate mã JavaScript trong trình duyệt và cho việc thiết kế các thành phần.
3. Các yêu cầu trang yêu cầu một bộ ghép giao diện người dùng (UI composer) để truy xuất các micro-frontend và nối chúng lại để cung cấp trang được trình duyệt tiêu thụ. Nó truyền luồng trang HTML cuối cùng đến trình duyệt để tăng cường chỉ số largest contentful paint (LCP)  từ nhân văn đạt được quan trọng.
4. 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ỉ largest contentful paint (LCP) lớn nhất từ ​​các chỉ số quan trọng của trang web.
5. Micro-frontend thông báo phản ứng với tương tác của người dùng, cung cấp thông báo khi người dùng thêm một sản phẩm vào giỏ hàng.
6. Micro-frontend chi tiết sản phẩm có dữ liệu có thể lưu trữ trong bộ nhớ cache cao, không đòi hỏi nhiều thay đổi qua thời gian.
7. Micro-frontend đánh giá phải lấy đánh giá của người dùng về một sản phẩm cụ thể.

Yếu tố chính để tránh sự liên kết ở thời gian thiết kế trong kiến trúc này là khám phá micro-frontends. Các lợi ích 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, và cũng giảm thiểu phạm vi ảnh hưởng nhờ sử dụng triển khai xanh/lam hoặc phát hành canary. Chủ đề này sẽ được thảo luận sâu hơn trong một bài viết sắp tới.

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

Phương pháp không phụ thuộc vào framework giúp kiểm soát quá trình tiến hóa của hệ thống. Điều này được thực hiện bằng cách sử dụng HTML-over-the-wire, trong đó mỗi micro-frontend render một đoạn mã HTML và trả về cho bộ ghép giao diện người dùng.

Khi bộ ghép giao diện người dùng thu thập các đoạn mã HTML, nó ghép thành trang cuối cùng để render bằng cách sử dụng transclusion. Mỗi trang được đại diện bởi một mẫu cụ thể được lưu trữ trong các tệp tĩnh. Bộ ghép giao diện người dùng truy xuất mẫu sau đó lấy các tham chiếu địa chỉ trong mẫu có thể được thay thế bằng các đoạn mã HTML của micro-frontend.

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

1. Amazon CloudFront cung cấp một điểm nhập duy nhất vào ứng dụng. Phân phối có hai nguồn gốc: nguồn gốc đầu tiên cho các tệp tĩnh và nguồn gốc thứ hai cho bộ ghép giao diện người dùng.
2. Các tệp tĩnh được lưu trữ trong một bucket Amazon S3. Chúng được trình duyệt và bộ ghép giao diện người dùng tiêu thụ cho các mẫu HTML.
3. Bộ ghép giao diện người dùng chạy trên một cụm container trong AWS Fargate. Sử dụng một giải pháp được đóng gói thành container cho phép bạn sử dụng các khả năng truyền luồng và kết xuất đa luồng nếu cần.
4. The UI composer runs on a container cluster in AWS Fargate. Using a containerized solution allows you to use streaming capabilities and multithreading rendering if needed.
5. AWS Systems Manager Parameter Store được sử dụng như một hệ thống khám phá micro-frontends cơ bản. Dịch vụ này là một kho lưu trữ key-value được bộ ghép giao diện người dùng sử dụng để lấy các điểm cuối micro-frontends để tiêu thụ.
6. Micro-frontend thông báo lưu trữ bản gói JavaScript tối ưu hóa trong bucket S3. Điều này được render trên máy khách vì nó phải phản ứng với tương tác của người dùng.
7. Micro-frontend đánh giá được tạo bởi một hàm  AWS Lambda với các đánh giá của người dùng được lưu trữ trong  Amazon DynamoDB. Nó được kết xuất hoàn toàn phía máy chủ và đầu ra là một đoạn mã HTML.
8. Micro-frontend chi tiết sản phẩm là một micro-frontend low-code sử dụng  AWS Step Functions. Các công việc Express Workflow có thể được gọi đồng bộ và chứa logic để kết xuất đoạn mã HTML và một lớp lưu trữ cache. Điều này tăng hiệu suất do tích hợp tự nhiên với hơn 200 dịch vụ AWS.

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

Kết luận

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

Nếu bạn quan tâm đến việc tìm hiểu thêm về micro-frontends, hãy xem micro-frontends decisions framework, một mô hình tư duy được tạo ra để giải quyết sự phức tạp ban đầu khi tiếp cận thiết kế micro-frontends. Khi sử dụng như một ngôi sao phương bắc, framework quyết định giúp đơn giản hóa việc phát triển các ứng dụng micro-frontends.

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

Để biết thêm tài nguyên học tập về serverless, hãy truy cập  Serverless Land.