Micro Frontend là gì ? Hướng dẫn tạo micro frontend

Nếu như micro-services là một lời giải cho kiến trúc back-end cho những dự án quy mô, phức tạp, nhiều người, ... thì một khái niệm "tương tự" cho front-end cũng xuất hiện trong thời gian gần đây: "micro-frontend". Đây là gì? Hãy cùng lướt qua bài viết để tìm hiểu ngay nào


1059

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ó?

micro frontend

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

micro frontend

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

micro frontend

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


Like it? Share with your friends!

1059