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 đã sửa đổi phương pháp của họ để xây dựng kiến trúc quy mô, nhiều người đang xây dựng micro-frontends.

Loạt bài viết 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ụ của AWS. Bài viết đầu tiên này tập trung vào các đặc tính 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 Cloud AWS.

Micro-frontends là gì?

Micro-frontends là sự đại 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 sự phụ thuộc bên ngoài và tăng khả năng vận chuyển. Chúng tập trung vào một số đặc điểm của các microservice như phân tán quản trị, 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 quản trị miền được xác định bởi sự sở hữu miền có trong một micro-frontend. Với các thành phần, kiến thức miền thường được ủy quyền cho khung 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 bối cảnh. Sở hữu miền trong một micro-frontend cho phép độ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 tư duy khác biệt so với các thành phần.

Nếu bạn đang sử dụng các microservices hiện nay, bạn có thể tận dụng được 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 cập nhật ứng dụng frontend một cách trực quan 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 hiệu suất và trải nghiệm người dùng của một ứng dụng web.

Đặc tính kiến trúc

Loạt bài viết này xây dựng một trang chi tiết sản phẩm của một trang web thương mại điện tử ví dụ bằng cách sử dụng các micro-frontend với cơ sở hạ tầng serverless.

Trang bao gồm:

• Một mẫu bao gồm tiêu đề. Điều này có thể bao gồm nhiều phần chung hơn nhưng chỉ sử dụng một trong ví dụ này.
• Một micro-frontend thông báo được kết xuất phía client. 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ể được kết xuất phía máy chủ 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 đề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 trên cùng một dự án. Điều này có thể giảm thiểu sự phụ thuộc bên ngoài và các lỗi tiềm ẩn trong toàn bộ ứng dụng.

Các đặc điểm chính của kiến trúc dự án này là:

1. Server-side rendering: Hệ thống phải được thiết kế với phương pháp server-side rendering. Điều này cung cấp khả năng hiển thị trang web nhanh trong các trình duyệt hiện đại và giảm sự cần thiết của JavaScript phía máy khách để hiển thị trang.
2. Không ràng buộc với framework: Giải pháp phải hoạt động với nhiều thư viện JavaScript khác nhau có sẵn và không bị ràng buộc hoặc tối ưu hóa cho một framework cụ thể.
3. Sử dụng các best practices để tối ưu hóa: Tối ưu hóa là một tính năng chính cho các ứng dụng server-side rendering. Nhiều ngành công nghiệp dựa 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 chính về yếu tố trang web cốt lõi, progressive hydration và các cấp độ cache khác nhau để tăng tốc độ phản hồi của các trang web.
4. Độc lập giữa các nhóm phát triển: Mỗi micro-frontend phải được phát triển với tối thiểu các phụ thuộc bên ngoài. Liên tục phối hợp giữa các nhóm có thể là dấu hiệu của kết nối thời gian thiết kế không hợp lý, làm mất mục đích của hệ thống phân phối.
5. Cơ sở hạ tầng serverless cho các nhà phát triển frontend: Mô hình serverless 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 cho giá trị”, giúp giảm chi phí. Bạn có thể lưu cache các phản hồi micro-frontend và giảm lưu lượng truy cập trên nguồn gốc và nhu cầu tăng tỷ lệ các phần khác nhau của hệ thống 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 các đặc điểm kiến trúc:

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 để lưu trữ tất cả các tệp tĩnh cần thiết để tạo hiệu ứng JavaScript trong trình duyệt và cho các thành phần định dạng.
2. Cách tiếp cận server-side rendering yêu cầu một nơi lưu trữ tất cả các tệp tĩnh để tạo hiệu ứng mã JavaScript trong trình duyệt và định dạng các thành phần.
3. Yêu cầu trang web cần một trình soạn thảo giao diện người dùng (UI composer) lấy các micro-frontend và khâu chúng lại với nhau để cung cấp trang web được tiêu thụ bởi trình duyệt. Nó truyền tải trang HTML cuối cùng đến trình duyệt để cải thiện độ phức tạp nội dung lớn nhất (LCP) từ các chỉ số trung tâm cơ bản của web (core web vitals).
4. Tách các micro-frontend khỏi UI composer dựa trên hai cơ chế: Khám phá micro-frontend (micro-frontends discovery) hoạt động giống như khám phá dịch vụ trong kiến trúc microservices, và một mẫu HTML cho mỗi trang mô tả nơi để chèn các micro-frontend vào bên trong trang. Các mẫu có thể được lưu trữ trong cùng kho lưu trữ với các tệp tĩnh khác.
5. Micro-frontend thông báo phản ứng với tương tác 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 lưu trữ bộ nhớ đệm cao không đòi hỏi nhiều thay đổi trong thời gian.
7. Micro-frontend đánh giá phải lấy đánh giá của người dùng cho một sản phẩm cụ thể.

Yếu tố chính để tránh kết cấu kết nối 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 tính khả tìm thấy để đơn giản hóa chiến lược đa môi trường và giảm bán kính tác động nhờ sử dụng triển khai blue/green hoặc phát hành canary. Chủ đề này sẽ được đề cập kỹ trong một bài viết sắp tới.

Từ thiết kế cấp cao đến thực hiện

Phương pháp độc lập khung làm việc giúp cho việc kiểm soát quá trình tiến hóa hệ thống. Nó đạt được điều này bằng cách sử dụng HTML-over-the-wire, trong đó mỗi micro-frontend hiển thị một mảnh HTML và trả về nó cho UI composer.

Khi UI composer thu thập các mảnh HTML, nó tạo ra trang cuối cùng để hiển thị bằng cách sử dụng transclusion. Mỗi trang được đại diện bằng một mẫu cụ thể được lưu trữ trong các tệp tĩnh. UI composer truy xuất mẫu sau đó truy xuất các tham chiếu placeholder trong mẫu có thể được thay thế bằng các mảnh micro-frontend.

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

1. Amazon CloudFront cung cấp một điểm vào độc đáo cho ứng dụng. Phân phối này có hai nguồn gốc: một cho các tệp tĩnh và một cho UI composer.
2. Các tệp tĩnh được lưu trữ trong một khay đựng Amazon S3. Chúng được tiêu thụ bởi trình duyệt và UI composer cho các mẫu HTML.
3. UI composer chạy trên một cụm container trong AWS Fargate. Sử dụng một giải pháp containerized cho phép bạn sử dụng khả năng streaming và đa luồng nếu cần thiết.
4. AWS Systems Manager Parameter Store được sử dụng làm hệ thống phát hiện micro-frontends cơ bản. Dịch vụ này là một kho giá trị khóa-chủ để được sử dụng bởi UI composer để lấy các điểm cuối micro-frontends để tiêu thụ.
5. Micro-frontend thông báo lưu trữ bản tối ưu hóa cho bundle JavaScript trong khay S3. Nó được hiển thị trên client vì phải phản ứng với tương tác người dùng.
6. Micro-frontend đánh giá được tạo thành bởi một hàm AWS Lambda với đánh giá người dùng được lưu trữ trong Amazon DynamoDB. Nó được hiển thị hoàn toàn trên máy chủ và đầu ra là một đoạn mã HTML.
7. Micro-frontend chi tiết sản phẩm là một micro-frontend low-code sử dụng AWS Step Functions. Luồng làm việc Express có thể được gọi đồng bộ và chứa logic để hiển thị đoạn mã HTML và một lớp caching. Điều này tăng hiệu suất do tích hợp gốc 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à tiến hóa miền kinh doanh của mình. Những điểm tiếp xúc chính với các nhóm khác liên quan đến việ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 thiểu các phụ thuộc bên ngoài và có thể chấp nhận tính 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-frontend, 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 UI composer và micro-frontends discovery.

Nếu bạn muốn 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 cho sự phức tạp ban đầu của thiết kế micro-frontends. Khi được sử dụng như một ngôi sao phương bắc, khung 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 của AWS, bạn có thể tìm thấy một sơ đồ đầy đủ tương tự với ứng dụng được miêu tả trong loạt bài đăng này với các chi tiết bổ sung.

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