What is the micro front end and what benefits can it bring

Giguli 2020-11-10 15:10:46
micro end benefits bring

From the original gold digger 《 What exactly is a micro front end , What benefits can it bring 》

This article will explain the background of the birth of micro front end , Explain in detail the reason of the concept of micro front end and its in-depth understanding , After reading this article , I believe you have a comprehensive understanding of the micro front end , Understand what problems it can solve for your team and the entire enterprise , What's the payoff .

One . background

Now many enterprises , Basically, the application code is isolated physically , Implement a single application, a single library , Closed loop deployment updates test environment 、 Pre release environment and formal environment . therefore , What we're talking about is , Based on different applications Different libraries and Independent deployment Under the circumstances , How to implement multiple application Between Resource sharing

In the past, a lot of processing methods were npm Package form Extract and quote , For example, between multiple application projects , There may be a business logic module or something else that is reusable , He pulled it out to npm Management and use of packages in the form of . But this has brought about the following problems :

  • Publishing is inefficient . If you need to iterate npm The logical business within the package , It needs to be released first npm After the package , Every time you use it npm Package applications are updated once npm Package version , Build and release each other again , The process is tedious . If there are more applications involved , It takes more manpower and energy .
  • Multi team cooperation is easy to be irregular . Containing general modules npm Packages as shared assets ,“ everyone ” Have it , But in practice , This usually means that no one owns it . It will soon Full of clutter Of Inconsistent style Code for , There is no clear agreement or technical vision .

npm Way of tedious update process

These questions make us realize , Expand the scale of front-end development to facilitate Multiple teams Sure Develop at the same time A large and complex product is a Important but tricky Of problem .

therefore , As early as 2016 year , The concept of micro front end was born .

Two . Micro front end concept

Micro Frontends Official website The concept of micro front end is defined :

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

Translate into Chinese :

 Chinese translation of micro front end concept

from Micro Frontends Official website You can see that , The concept of micro front end is from Micro suit The concept of service is extended from , Abandon the large monomer approach , Decompose the whole front end into small and simple blocks , These blocks can Independent development 、 Testing and deployment , And still polymerization For a product to appear in front of customers . It can be understood that the micro front end is a kind of multi Can be delivered independently Small front end applications of polymerization As a whole Architectural style .

There are several points worth noting :

  • Microfront It's not a specific technology , It's about Integrating Technology 、 Strategies and methods , Maybe with scaffolding 、 Auxiliary plug-ins and specifications constrain this ecosystem Show the form , It's a kind of macro framework . This architecture currently has Multiple solutions , Both have advantages and disadvantages , But as long as the application of the current business scenario is a good solution .
  • Micro front end and There is no technology stack constraint . The design of each micro front end solution , It's all based on actual needs . If it's used by multiple teams react Technology stack , There may be no requirement for cross technology stack usage of micro front end solutions ; If multiple teams use it at the same time react and vue Technology stack , It may have higher requirements on the cross technology stack of micro front end .

3、 ... and . Advantages of micro front end

Synchronize updates

Contrast npm Bag mode pull away , Let's realize Update process and efficiency Importance . Micro front end is the aggregation of multiple sub applications , If multiple business applications depend on the function module of the same service application , Just update the service application , Other business applications can be updated immediately , This shortens the update process and saves the update cost .

 Synchronous update of micro front end

Incremental upgrade

Because of the burden of history , There are teams that still exist, using old and huge Front end monomer mode , Being held back by outdated technology stacks or the quality of code that has been rushed to completion , It's so serious that people want to overturn the rewriting . in order to Avoid the risk of completely rewriting , We're more inclined to put old apps Gradually renovate , At the same time, it will continue to provide new functions to our customers without any impact .

Micro front end can make us more free to make all parts of the product Independent decision making , Let the team continue to add new features and make almost no changes to the original whole , Make our architecture 、 Both dependency and user experience can Incremental upgrade .

in addition , If there is a major incompatible update in the main frame , Each micro front end can choose to update when appropriate , Instead of being forced to suspend current development and update immediately . If we want to try new technologies , Or a new interaction model , The impact on the whole will be less .

Simple 、 Decoupled code base

Each individual Micro front end project The source code base will be far away from Less than One Single front end project Source code base of . These small code bases will Easier to develop . What's more, it's worth mentioning , We avoid unintentionally inappropriate coupling between unrelated components . By enhancing the boundaries of the application Reduce the occurrence of such unexpected coupling .

Yes, of course , An independent 、 Advanced architecture ( For example, micro front end ), It's not a replacement for good old, clean code . We don't want to avoid code optimization and code quality improvement . contrary , We make it harder to make wrong decisions , Increase the possibility of making the right decisions , So that we fall into the trap of success . for example , We make it difficult to share domain models across borders , So developers are unlikely to do this . Again , The micro front end enables you to clearly and carefully understand how data and events pass between different parts of the application , This is something that we should have started long ago !

Independent deployment

Like microservices , Micro front end Independent deployability Is the key . It reduces the scope of deployment , This reduces the associated risks . No matter where your front-end code is hosted , Each micro front end should have its own continuous delivery channel , This channel can build 、 Test and deploy it all the way to the production environment . We should be able to deploy each microservice without considering other codebases or channels . Even if the original single project is fixed, release the version manually on a quarterly basis , Or other teams submit unfinished or problematic code to their main branch , It doesn't have an impact on the current project . If a micro front end project is ready for production , It should have this ability , And the decision is in the hands of the team that builds and maintains it .

 Each micro front end is independently deployed to the production environment

Autonomous teams

The higher-level benefits of separating our code base from the release cycle , It's what makes us have A completely independent team , Can participate in the design of their own products 、 Production and subsequent processes . Each team has all the resources needed to deliver value to customers , This allows them to To be fast and effective Earth action . In order to achieve this goal , Our team needs to be based on Business function Divide vertically , Not according to the type of Technology . One simple way is to segment the product based on what the end user will see , So each micro front end encapsulates a single page of the application , And a team is in charge of . And depending on the type of technology or “ The transverse ” concerns ( Like the pattern 、 Form or validation ) To form a team , This will make team work more Cohesion .

 Each application is owned by a team

Four . Types of micro front end solutions

At present, the domestic micro front-end solutions are roughly divided into :

  • Pedestal mode : By building a base 、 Configuration center to manage sub applications . Based on SIngle Spa The universal scheme of heaven and earth , There are also customized solutions based on their own team business .
  • Self organizing model : Exchange by agreement , But there are problems with dealing with third-party dependencies .
  • Decentralized mode : Off base mode , Each application can share resources with each other . Based on Webpack 5 Module Federation Realized EMP Micro front end solution , Multiple applications can share resources with each other .

among , At present, it is worth noting that Decentralized mode Medium EMP Micro front end solution , It can be realized Cross technology stack calls , It can also be used between applications of the same technology stack Deep customization of shared resources , If you're just starting to research the micro front end , You can try to understand EMP Micro front end solution , Maybe it will bring you a good experience .

Specific multi scheme in-depth comparative analysis , In the next article 《 Compared with a variety of micro front-end solutions 》 Detailed explanation , Welcome to pay attention wiki post First update .

EMP Microfront wiki post Update the catalog :

Basic knowledge analysis

What exactly is a micro front end , What benefits can it bring

Compared with a variety of micro front-end solutions

webpack5 module Federation Principle learning

EMP Design framework

Multi scene tutorial

react How to use and access the project EMP

vue How to use and access the project EMP

Vue and React How projects call each other remotely

cocos2d How to use and access the project EMP

Teach you base station building skills

How to use the auxiliary plug-in


  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple