D'une application à une centaine. Le chemin du microfront vers Tinkoff Business

Bonjour, je m'appelle Vanya, j'ai récemment pris la parole à CodeFest 11 , où j'ai parlé du chemin parcouru par Tinkoff Business sur le frontend d'une application à une centaine. Mais comme tout change très vite en informatique, et qu'il faudra attendre longtemps pour l'enregistrement, je vais maintenant vous raconter brièvement notre voyage de six ans dans le monde merveilleux du microfront !

. . — , .

1. AngularJS 2014—2015 .

   
   
   
   
   

2. Angular2.

   
   
   
   
   

3. .

   
   
   
   
   

4. 100 .

   
   
   
   
   

2015 . : « ! , , ». AngularJS, . , . - .

, 2017 . , . — «». , , — , , .

2017—2018 , , .

-, 3—5 , 25 ! : - , ! - ! .

- , , .

. .

.

, . , , . , .

iframe , . . , «» .

Frame Manager

Frame Manager' ( ).

, iframe, .

, , . , , window. , , .

:

• - index.html.

  
  
  
  
  

• .

  
  
  
  
  

— iframe, - . 

: « Google Chrome, . , !» : - — . . , , , -, . , , , iframe src . , , .

-

: « iframe. ? !» — . - — , , ;-) 

— . , :

— :

1. Webpack- — , .

   
   
   
   
   

2. Angular builder — .

   
   
   
   
   

3. Angular schematics — AST.

   
   
   
   
   

2021 , Webpack 5 Module Federation, , 2018 , Angular , 12 2021 . , MF , .

, iframe, Single SPA. , Angular .

, , .

Angular builder schematics, , , , , :

ng update @scripts/deframing
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

, , . :

1. . , , .

   
   
   
   
   

2. , : , , . - (stub), — . .

   
   
   
   
   

, . : .

— «» , . , :

.my-pretty-header {
    display: none;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

- , !

: , , :

id , .

— , , :

, . .

Microzord

. , ? npm scope @microzord



.

— Angular, . , , .