🤔 preface

This article will summarize the process of exploring the microfront-end Emp framework in the past 2020 from the perspective of the members of the Microfront-end Emp project. Welcome to Star: github.com/efoxTeam/em…

✨ timeline, EMP continues to be put into production

  • At the beginning of the exploration phase in May, single SPA was used for construction
  • Mid-exploration phase is set up with Module Federation in mid-June
  • In late June, the feasibility stage was confirmed to discuss the packaging model
  • In mid-July, it was decided to use the CLI model to encapsulate the reference Create React app and implement the remote type reference model
  • Emp version 1.0 was released in late July, with built-in dev,build, build-ts and antD for production environment
  • Added hot update to add and optimize demo cases in August
  • TuneDtsPlugin comes in September as a standalone Webpack plusin and improves compatibility with older browsers
  • In October, webPack 5.1 was upgraded and caching was added. CSS Type detection, CSS Module TS support and COCOS support were added
  • November emP officially open source, add Github CI test, init function, add EMP support use cases, add EMP cross-framework call each other
  • December explore the introduction of ESbuild, ESM, SWC, separate ES environment in EMP

Exploratory stage

Investigate Single SPA and Module Federation separately

Single SPA

  • Multiple frameworks coexist, independently developed and deployed, and status is not shared
  • Base station mode centralized operation
  • Complete with scaffolding and seed items
  • Some modules need to be modified to call

In summary, the introduction of single-SPA increases the cost of deployment, maintenance, and modification. So turn to Module Federation.

Module Federation

  • Let code share arbitrary content (context, state, component, method, module) directly between projects through remote calls
  • Decentralized operation
  • The shared module is close to 100% applicable and the transformation cost is close to zero
  • Scaffolding and seed items are not available

Conclusion: Develop a micro-front-end framework with scaffolding and seed projects based on Module Federation, while allowing existing projects to quickly access.

Design and development stage

Refer to Create React App to develop scaffolding and its commands

The underlying scaffolding architecture references the mature React scaffolding command line tool Create React App. Provided separately

  • dev
  • build
  • test
  • info
  • serve
  • analyze
  • tss

Including but not limited to the above commands

emp.config.js

Use Webpack Chain to expose the built-in Webpack configuration to enable project configuration in emp.config.js

Typescript remote type references

Using React + Typescript as a stack for a long time, I found that remote component calls have no type and can only be redefined. The idea is to generate a type file in a remote project and then make the call in this project. Make Typescript work on the micro front end.

👨🏻💻 Summary and thanks

This year is the first year for me to work officially. I am lucky to join the Web group of Zhongtai Technology Center of Happy Time as a fresh graduate. Special thanks to Ken, Climbing and Jeremy for their patient guidance this year. This year has been the most progressive year of my development career so far.

Code structure

In the beginning, the requirements for their code still stay in the usable stage. After the guidance and patient code review, I learned how to achieve high reuse and “high cohesion, low coupling” of packaging functions, gained new insights into MVVM, MVC and other design patterns, and continuously injected the development ideas in “Refactoring” into daily development. Of course, during this period, I have been consolidating my foundation and business understanding and development ability.

Business development capability

In the process of participating in business projects, learn the whole loop of the development process: Requirements review -> analysis of product documents and design draft -> development schedule -> actual development based on product documents and design draft -> CI automated deployment -> domain name and international deployment configuration -> test -> bug repair -> online -> bug repair and continuous maintenance. This process is rigorous and necessary.

Why you need a micro front end

As MY understanding of the code and business grew, Ken proposed to explore the microfront-end architecture. Armed with the basics of code structure and business development, I instantly understood the need for a microfront end: the most efficient way to reuse valuable functionality.

The author



Benny Shi

Denver annual essay | 2020 technical way with me The campaign is under way…