Micro frontend là gì ?
Micro frontend là gì ? Nói một cách đơn giản, project web phức tạp chia thành project nhỏ hơn và hiển thị c cùng nhau trên một trang bằng iframe.
Iframes không phải là cách duy nhất để làm điều đó. ãy cùng khám phá lý do tại sao chúng ta nên sử dụng micro frontend
Tại sao các công ty sử dụng nó?
Quản lý 10 dự án với mỗi dự án gồm 10 người sẽ dễ hơn quản lý một dự án lớn gồm 100 người. Khái niệm quan trọng ở đây là khả năng scale(mở rộng). Bằng cách chia nhỏ các dự án lớn, chúng ta nhận được:
- Kho riêng
- Triển khai độc lập
- Build và release nhanh hơn
- Mỗi team tự quản lý project của team mình
- Dễ dàng debugging và maintenance
Chia ứng dụng theo domain
Hãy tưởng tượng rằng bạn tạo ứng dụng React phức tạp cho luồng phim. Bạn có nhiều developer nhưng vẫn rất khó khăn để quản lý nó. Vì lý do đó, bạn có thể chia ứng dụng thành bốn domain chính. Và đó chính micro frontend
- Movies catalog
- Video player
- User’s profile
- Account payments
Bây giờ bạn tạo ứng dụng React riêng biệt cho mỗi domain và sử dụng tài nguyên, như iframe, để tổng hợp một trang hiển thị bốn ứng dụng như một cho người dùng.
Nếu bạn thêm phương thức thanh toán mới vào Account payments, bạn chỉ cần deploy lại ứng dụng của nó chứ không phải toàn bộ trang web.
Micro frontend hoạt động như thế nào
Iframes
Cách đơn giản nhất để bắt đầu. Chúng ta có thể sử dụng cửa sổ postMessage () để kết nối giữa các ứng dụng. Chúng ta sẽ sử dụng điều này trong ví dụ microfrontend.
Single SPA
Đây là framework để soạn các ứng dụng trên frontend. Nếu bạn cần bắt đầu dự án thực tế, hãy chọn nó.
Frint
Một framework khác để soạn các ứng dụng trên frontend. Linh hoạt hơn so với Single SPA nhưng mới hơn và chưa được phổ biến
Web components
Nó không phải framework mà là một tính năng trình duyệt và có thể là tương lai của internet.
Taylor
Nó sử dụng một cách tiếp cận khác bằng cách kết hợp routing của backend với NodeJS
Tạo micro frontends với 3 files
Bây giờ, chúng tôi sẽ tạo ra một tích hợp micro frontend đơn giản với 3 tệp:
- Products Catalog, a micro frontend được viết bằng javascript.
- Shopping Cart, another micro frontend viết bằng Vue.js.
- Composition, file html hiển thị cả 2 page
Ý tưởng chính là danh mục sản phẩm với số lược của chúng, sau đó cho phép người dùng thêm vào giỏ hàng. PostMessage () là hàm cho phép chúng ta thực hiện giao tiếp cha / con.
Và đây là đoạn code trong 3 file
composition.html
<style>
body {
display: flex;
}
iframe {
flex: 1;
border: none;
}
</style>
<iframe src="./catalog/index.html" id="catalog"></iframe>
<iframe src="./cart/index.html" id="cart"></iframe>
<script>
const cart = document.querySelector("#cart");
window.addEventListener("message", event => {
cart.contentWindow.postMessage(event.data, "*");
});
</script>Trên dòng 13, chúng ta liên kết iframe giỏ hàng với một hằng số. Trên dòng 14, chúng ta set trang composition để listen các sự kiện message và sau đó chuyển hướng cùng một message đến iframe giỏ hàng.
catalog/index.html
<h1>Products catalog</h1>
<h2>Apple <button value="apple">Add to cart</button></h2>
<h2>Banana <button value="banana">Add to cart</button></h2>
<h2>Orange <button value="orange">Add to cart</button></h2>
<script>
const addToCart = e => window.parent.postMessage(e.target.value, "*");
document
.querySelectorAll("button")
.forEach(button => button.addEventListener("click", addToCart));
</script>Ở đây chúng ta liên kết mỗi lần click vào button với addToCartfunction. Điều này gửi message đến trang composition, với giá trị, đó là fruit name(tên trái cây)
cart/index.html
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="main">
<h1>Shopping cart</h1>
<p>Apples: {{ products.apple }}</p>
<p>Bananas: {{ products.banana }}</p>
<p>Oranges: {{ products.orange }}</p>
</div>
<script>
new Vue({
el: "#main",
data: {
products: {
apple: 0,
banana: 0,
orange: 0
}
},
methods: {
add: function(event) {
this.products[event.data]++;
}
},
beforeMount() {
window.addEventListener("message", this.add);
},
beforeDestroy() {
window.removeEventListener("message", this.add);
}
});
</script>Và cuối cùng, giỏ hàng viết bằng Vue.js. Trên beforeMount (), chúng ta set cart để listen các message từ cha. Phương thức add () thêm 1 vào dữ liệu products, theo fruit name.
Git repository
Bạn có thể tham khảo thêm project này trên GitHub.
https://github.com/andregardi/micro-frontends-iframe
Kết luận
Chúng ta đã hiểu được micro fronted , cách hoạt động và ưu điểm của nó.
Tham khảo thêm : Hướng dẫn tạo Login Form React sử dụng Formik
Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.
Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.
