This is the fourth day of my participation in Gwen Challenge

Code word is not easy, your praise is my motivation to continue to update the creation.

The micro front end is a kind of technical means and method strategy that multiple teams jointly build modern Web applications by releasing functions independently.

The characteristics of

Think of a Web site or Web application as a combination of features owned by a separate team. Each team has a different business or task area that they care about and specialize in. A team develops its functionality end-to-end across functions, from the database to the user interface.

core idea

Stack independent

  • The core value of the micro front end is that it is “stack independent”. That’s why it was born, or that’s what convinced me to adopt the micro front end solution.

Independent development and deployment

The incremental upgrade

Build team prefixes

Native browser functionality over custom apis

Setting up elastic Sites

What problem was solved

  • Front-end collaborative development problems under controllable system (including coordination caused by space separation and upgrade and maintenance caused by time continuation)

  • Deconstructing megalithic applications

  • Avoid engineering problems with Stonehenge applications due to technology changes, product upgrades, and personnel turnover

What value does it bring

  • Product portfolio capability

  • Widget’s product output capability

  • It’s mostly engineering value, and product capability is just an extension of that

Architectural posture of the micro front end

Core principle: Technology stack irrelevant!!

  • Specifically: there should be no direct or indirect technology stacks, dependencies, or implementation coupling between applications

Architectural goals

  • The solution is as simple as using iframe to do a micro front end, and at the same time solves the various problems of experience brought by iframe

Contrast the iframe

The characteristics of the iframe

  • Advantages: Provides the browser native hard isolation solution, can perfectly solve the CSS and JS isolation problem
  • Disadvantages: Isolation cannot be broken, resulting in the inability to share context between applications, and the resulting poor development and production experience

Why not use iframe

  • The URL is not synchronized. The browser refresh iframe URL status is lost, and the back forward button is unavailable
  • The UI is not synchronized and the DOM structure is not shared
  • The global context is completely isolated and memory variables are not shared. Iframe internal and external system communication, data synchronization and other requirements, the cookie of the main application should be transparently transmitted to the sub-applications with different root domain names to achieve the effect of free registration.
  • Slow. Each child application entry is a process of browser context reconstruction and resource reloading.

At the widget level, what is the difference between a micro front end and a business component?

The core reason for adopting a micro front end is: technology stack independence! No matter for the transformation of heritage projects or the selection of architecture for new projects, the premise of technology stack independence can make the projects sustainable development, easy to use and easy to maintain.

The last

In fact, if all web stacks were unified and all library upgrades were downward compatible, we wouldn’t really need a micro front end