• Rethinking the front-end: Micro Frontend
  • Ritesh Kumar
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: IAMSHENSH
  • Proofread by: X. Zhuo

Rethink the front end: the micro front end

Assume that most Web applications being developed today face a similar situation: the front end gets bigger and bigger and less relevant to the back end.

Rethink how different front-end frameworks co-exist, for example, with old modules built using JQuery or AngularJS 1.x interfacing with new modules built using React or Vue.

The holistic approach is not appropriate for general Web applications.

It is easier to manage ten projects of ten people than one big project of a hundred.

Scalability is the main idea here. We can simplify to:

  • Independent warehouse
  • A separate deployment
  • Faster builds and releases
  • Autonomous team
  • Easier to test and process

Here’s an example:

Myapp.com/ – Static HTML built login page.

Myapp.com/settings – Old Settings module for AngularJS 1.x installed.

Myapp.com/dashboard – New dashboard module built with React.

I can imagine it has the following requirements:

  • Pure JavaScript shared code libraries, such as route management and user session management. And some CSS that can be shared. Both should be as light as possible.

  • A series of separate modules of “micro applications” designed in various frameworks, stored in different code bases.

  • A deployment architecture that ties modules from different code bases together and updates modules to the server when they are modified.

But it turns out others are thinking the same thing. The typical term is “micro front end”.

React has grown quickly and made developers’ lives easier over the years, making it by far the most popular microfront-end framework.

Implementing a micro front end

Here are a few different ways to implement a micro front end:

  1. Single-spa “meta-frameworks” combine multiple frameworks on the same page without refreshing (see examples combining frameworks like React, Vue, Angular 1, and Angular 2). See Bret Little’s explanation here.
  2. Multiple single-page applications that exist at different urls. These applications use NPM or Bower components to share functionality.
  3. Microapplications are isolated to IFrames through third-party libraries in conjunction with the Window.postMessage API.
  4. Web components as an integration layer.
  5. React’s black box component.

Happy reading!

Cheers, Ritesh 🙂

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.