What is a micro front end

The micro front end is a word with a very high frequency in the front end entertainment circle in recent years. In fact, technological evolution is the result of qualitative change caused by quantitative change as problem complexity increases. New technologies can solve more complex problems, which in turn drives the increase of problem complexity. Therefore, in fact, the emergence of the concept of micro front end is the product of qualitative change caused by quantitative change. With the quantity grows, the application of the front-end architecture as well as the need to manage the complexity of the data becomes larger, for some to the application of B, sometimes often dozens or even hundreds of pages need to manage, it is easy to become brittle and difficult to maintain stone application, at this time, we hope to introduce like micro back-end service architecture of the system, let the front-end application can do it:

  1. The technology stack is decoupled between applications, which can be incrementally upgraded
  2. Code repositories and development teams are decoupled between applications, and each application provides relatively independent functions developed and maintained by a relatively independent team
  3. With the decoupling of deployment between applications, each microapplication can be deployed and published separately, and then choreographed and aggregated in a collection of applications
  4. After aggregation, applications have the ability to communicate with each other, and can achieve cross-script data exchange

What problems should the landing micro front end solve

Micro front end is a concept that neither old nor new. At present, the well-known open source micro front end library includes single-SPA from abroad, Qiankun of Ali from China based on this package, and icestark, a relatively independent micro front end library also from Ali. Meanwhile, in various front-end communication meetings, Many companies have also shared their own micro front-end solutions. Based on various materials on the network, several problems that need to be solved during the implementation of the micro front-end can be roughly summarized:

  • How to register and load microapplication resources (Choreography)
  • How microapplications communicate (Communication)
  • How to ensure that global variables and styles do not affect each other between microapplications (container)

What is obvious. Js

As mentioned above, the micro front end needs to solve three major problems: choreography, communication, and containers. However, most of the current microfront-end frameworks and articles focus on the implementation of container functionality. As a developer who has experienced the micro-front-end architecture in production practice, the author personally feels that the layout and communication are more basic and urgent in the implementation process of micro-front-end. And the existing framework, I think in these two aspects of flexibility, scalability are not enough. So I tried to write my own micro-front-end framework — obvious. Js.

Obvious is an incremental microfront-end framework that focuses on the choreography and communication of microapplications. It features:

  • Provides communication capability based on global status, event broadcast, event unicast, flexible and convenient communication mechanism
  • Dependencies can be declared when micro-applications are defined and automatically activated when micro-applications are activated, so that micro-applications can be split and combined freely
  • With flexible middleware mechanism and open resource loading middleware, developers can customize unified registration and loading rules of resources freely in the form of writing middleware to realize automatic registration; At the same time, open resources run middleware, so that developers can gracefully access log, JS sandbox and other functions
  • Natural support to load multiple micro applications in a single screen page, can be based on it to encapsulate a high-level SPA micro front-end framework, while the activation conditions of micro applications are completely determined by the developer, no longer limited to route hijacking
  • The concept is simple, the functional API is clear and easy to understand, and can be developed without documentation

What can you learn from obvious

Obvious is my first open source project, and I’ve written a very detailed document about it in order to get more people to recognize its value

Obvious. Js: an incremental micro-front-end framework

It’s accompanied by a simple but comprehensive tutorial that takes you step-by-step through implementing a simple micro-front-end architecture with Obvious:

  • If you don’t know much about the microfront end, follow obvious’s documentation and you’ll be able to quickly build a production-usable microfront end architecture.

  • If you already have experience with other microfront-end frameworks, trust obvious’s application choreography, middleware mechanisms, and other processes to give you some new thinking and discover another possibility for microfronds

At the same time, in the process of implementing obvious, I also sensed some skills and fun in the framework design. The source code of OBVIOUS is very simple and easy to understand. Trying to see its implementation may make you feel the beauty of programming like I do.

Project and document addresses

This is a sincere work that I have squeezed time to develop and polish after 996. I will be very happy if I can help you. I also hope you can give me a star to support my project

Github: Runnan/Obvious

Js: a progressive micro-front-end framework