Is componentization obsolete? Introduction to micro front end architecture

Strange millet for writing code 2021-09-15 06:31:21
componentization obsolete introduction micro end


When I went to the interview two years ago , The interviewer may ask you , Have you written about components , How parent and child components communicate ? How sibling components communicate ? Have you ever used state management tools ?

I've been through a lot of interviews recently , There is an obvious feeling , Most interviewers will ask you , Have you ever touched the micro front end ? Do you know qiankun?

Maybe with age , Salary requirements will also increase , A company that can afford money , Development teams may all have a certain size , So in this situation , The interviewer asked you about the micro front end , It's very natural .

Because the company adopts micro front-end Architecture , I've also recently started learning about the micro front end . Bought books related to micro front end . Next , I'd like to introduce you to the micro front end .

Statement : The main content of this paper comes from 《 Front end architecture From entry to micro front end 》-- Huang Fengda . There are also some of their own understanding .

What is micro front end architecture

Micro front end is an architecture similar to back-end micro services , The concept of micro service is applied to the browser side , That is, multiple single page front-end applications are transformed from a single single application to multiple small front-end applications . Each front-end application can also be developed separately 、 Deploy .

For example, one of our projects has 10 Wan line code , Split into 10 A project , Each item consists of 1 Wan line code . It will be much easier to develop and maintain each project independently . We just need to develop and deploy independently .

  • The development process : And in the development process , If it is 10 Wan line code , Then the packaging and compilation time is very long .
  • Testing process : If each project is published separately , Then the scope and workload of testing can be reduced to a certain extent .
  • Online maintenance : If a single online application goes down , We just need to maintain a single application . There is no need to republish the whole project . Greatly reduce maintenance costs .

So the micro front-end architecture has its own characteristics :

  • Autonomous applications

Multiple applications can be developed by different teams , Decouple from each other , At the right time , We can replace any of these applications , And the whole is not affected .

  • Single responsibility

The architecture concept of micro front end should meet the principle of single responsibility . But to achieve a single responsibility , It's not that easy .

  • Technology stack independent

Between different applications within the project , We can use different technology stacks , For example, applications a May adopt vue,b use react,c use angular,d use jquery etc. .

Why use micro front-end Architecture

1, Legacy system migration Old systems , We want to synthesize into the new system , But I don't want to rewrite the old system , We can use micro front-end Architecture , Embed the old system into the micro front-end project . 2, Back end decoupling , Front end aggregation A lot of times , The back end adopts micro service architecture , Different businesses can be decoupled . But on the front end , There is a trend in mobile applications , A large commercial company , There may be a lot of applications , And so many applications , There will be many entrances . But in the eyes of users , These applications are from the same company , Just one entrance . Now , Micro front end architecture can be adopted , Aggregate different applications .

The front-end technology is split

  • Distributed routing

Directly through different url To access different applications , In this split mode , The same link only corresponds to one micro application . Different applications can be through localstorage、cookie、indexedDB And so on , Because they are in the same domain name .

  • Front end microservice

Front end microservice , Is that each application is completely independent , Have an independent technology stack 、 Independent development 、 Independent deployment 、 Independent build , And run autonomously . Finally, a complete front-end application is combined in a modular way . Multiple micro applications can exist on the same page . But in the case of routing distribution , Only one micro application is running at the same time .

  • Combined integration : Micro application

Micro application , It means that applications are developed in a single way 、 There are forms of micro applications , Runtime , Then merge these applications by building a system , And combine it into a new application .

  • Miniaturization

Microcomponent , It's a piece of code that can be embedded directly into the application , Pre compiled by developers , There is no need to make any modification and compilation during loading .

And the widget under the micro front end , It means that you don't write your own business code for the business team , And deploy the compiled business code to the development server . At run time , We only need to load the corresponding business module . When updating the code , We just need to update the corresponding module .

  • Front end container :iframe

iframe As a very old man, everyone thinks that ordinary Technology , It's always worked , You can effectively embed one page into another , get out iframe Code for parent-child component communication , Other parts of the code are completely isolated .

  • combination Web Components structure

web components It's a different set of technologies , Allow developers to create reusable custom elements , And in web Use them in your application . About web components You can find the details of .

The service splitting method of micro front end

The business splitting method mentioned here , Is to look at things from a business perspective , It is different from the technology splitting method .

  • Split by business

For example, an e-commerce system , Including products 、 Order 、 invoice 、 logistics 、 Inventory and other business modules , Split in this way .

  • Split according to permissions

For websites with multiple roles and different permissions at the same time , You can split by permission . In particular, the functions corresponding to different permissions are separated .

  • Split according to update frequency

Some businesses in the system iterate frequently , Some things iterate slowly , In this way , Those parts that don't iterate often won't get much impact .

  • Split according to the organizational structure

Communication between different teams has a certain cost , Cross team cooperation also has some costs . If the project is developed by multiple teams , Consider this split form .

  • Following the split of the back-end microservices

In fact, the back-end microservices are split , There is no necessary connection with the front-end project organization form , But if the back-end micro service is split , Corresponding front end part , It may also be decoupled .

  • DDD And event storm

DDD Domain Driven events , I won't go into details .

Architecture mode of micro front end

  • Pedestal mode

In the micro front-end architecture of this mode , The base undertakes the foundation and core technology of micro front-end application . Pedestal mode , It is a system composed of a main application and some columns of sub applications , And this master application is used to manage other sub applications , It includes the life cycle of sub applications to the communication mechanism between applications . The base application can be just a simple base function , It can also have business functions , But business function refers to the business function of the core part . Pictured :  Unnamed file .png

As the foundation and core of the application , It also :

  • Maintain the application registry .
  • Manage other sub applications . Including when to load the application 、 Uninstall the application at the time of core .

To adopt the micro front-end architecture of this mode , Just design the corresponding application loading mechanism , Therefore, it is more convenient to implement .

  • Self organizing model

Self organizing , It means that each subsystem within the system can form a certain mechanism or function according to certain rules . This mode can make various front-end applications in the system , Each has a small base management function , Each application can be a base . Most of the time , We will not adopt the micro front-end architecture of self-organizing mode , Because its design is complex , Have a lot of duplicate code

Book recommendation

Interested students can read this book , It's very systematic . b932afe164328fb6.jpg If you have any questions, you can leave a message , If this article helps you , Hope to like + Focus on , thank you .

本文为[Strange millet for writing code]所创,转载请带上原文链接,感谢

  1. Flutter: résoudre le futur blocage en utilisant Isolate
  2. Résumé des opérations courantes pour les données de structure de l'arbre frontal
  3. Ant Design Transfer Twin Tree Shuttle box "make Wheels"
  4. De la carte de pensée à la base et à l'approfondissement, prenez note de l'expérience d'entrevue d'un octet sautant le poste de recherche et développement Java.
  5. Apprenez les composants d'implémentation de vue et Publiez - les à NPM
  6. [Questions d'entrevue à haute fréquence] À vous de choisir
  7. Une faible connaissance de beginpath () provoque une superposition de style lors de la peinture d'un dessin en toile
  8. React Hooks, laisse - moi t'emmener étudier.
  9. Comment la copie profonde résout - elle les références circulaires?
  10. JavaScript Advanced Programming (3rd Edition) Reading note 6
  11. Analyse de l'URL
  12. Discussion préliminaire sur xss
  13. Solution: développement de la page Web Wechat, obtenir la fosse Piétinée par le flux d'entrée de la caméra via navigator.mediadevice.getusermedia ()
  14. Des milliers de questions d'entrevue sélectionnées n'ont pas encore ét é effacées.
  15. Les questions d'entrevue de niveau intermédiaire et avancé d'Android au fil des ans sont entièrement incluses, et l'algorithme est distribué microservice
  16. J'ai résumé toutes les questions d'entrevue.
  17. Compréhension de la réactivité des données de vue
  18. Note de service CSS (vi): Flex, page mobile et mise en page réactive
  19. Non-ASCII character ‘\xe5‘ in file on line 4, but no encoding declared; see http://python.or
  20. 手把手教你搭建微信小程序服务器(HTTPS)
  21. JavaScript Review sketch - 1
  22. Analyse du bootstrap webpack
  23. sqli-labs-less-18 http头user agent+报错注入
  24. Génération de code nest pour l'outil CLI de nestjs
  25. JS | This
  26. Augmentation des variables
  27. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  28. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  29. Summary of basic knowledge points of JavaScript language (mind map)
  30. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  31. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  32. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  33. Non - ASCII character 'xe5' in file on Line 4, but no Encoding declared;Voirhttp://python.or
  34. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  35. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  36. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  37. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  38. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  39. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  40. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  41. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  42. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  43. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  44. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  45. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  46. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  47. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  48. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  49. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  50. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  51. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  52. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  53. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  54. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  55. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  56. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  57. Basic knowledge of components in Vue "I"
  58. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  59. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  60. Want to know the implementation and application of single instance mode in the front end?