3.4.2.1. Khái quát về Single-SPA
Single-SPA29 là một framework viết bằng JavaScript, được sử dụng để phát triển các ứng dụng micro-frontends một cách nhanh chóng. Single-SPA mang lại nhiều tính năng hữu ích như [28]:
• Kết hợp được các ứng dụng xây dựng trên các framework khác nhau (Angular, ReactJS, VueJS) vào cùng một trang.
• Triển khai các micro-frontends một cách độc lập.
• Tái sử dụng được nhiều thành phần trong quá trình phát triển ứng dụng, giảm thiểu thời gian viết lại các đoạn mã nguồn lặp đi lặp lại.
• Cung cấp nhiều cơ chế khác nhau như “lazy loading”30 để tối ưu hóa hiệu năng trong quá trình khởi tạo, nạp ứng dụng.
Điểm khác biệt chính giữa một ứng dụng theo hướng SPA truyền thống và ứng dụng sử dụng single-spa nằm ở chỗ single-spa cho phép kết hợp nhiều chương trình SPA khác nhau vào trong cùng một ứng dụng thống nhất. So với một số công cụ khác như SystemJS31 hay Luigi32, single-spa được xem là một framework toàn diện để phát triển và tích hợp các micro-frontends tính đến thời điểm hiện tại.
3.4.2.2. Kiến trúc của ứng dụng single-spa
Ứng dụng single-spa được cấu thành bởi hai thành phần chính [29]:
• single-spa root config: thành phần này chịu trách nhiệm kết xuất ra các trang
HTML và JavaScript để đăng ký các ứng dụng.
• applications: thành phần này được xem là một tập các ứng dụng theo kiểu
SPA được đóng gói thành các module. Mỗi một module này có quy trình hoạt động như khởi tạo, đăng ký và hủy đăng ký để nạp vào trong cấu trúc DOM của ứng dụng.
Ví dụ trong hình 3.3 mô tả kiến trúc tổng thể của một ứng dụng single-spa. Ứng dụng này được tạo thành bởi ba ứng dụng con viết bằng AngularJS, ReactJS và VueJS. Các thành phần con được tích hợp lại vào một ứng dụng hợp nhất bằng cách sử dụng “single-spa-root config”.
29 https://single-spa.js.org/
30 https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading 31 https://github.com/systemjs/systemjs
46
Hình 3.3. Kiến trúc tổng thể của một ứng dụng single-spa