From one application to a hundred. The path of the microfront to Tinkoff Business

Hi, my name is Vanya, I recently spoke at CodeFest 11 , where I talked about Tinkoff Business's path on the frontend from one application to a hundred. But since everything changes very quickly in IT, and it will take a long time to wait for the recording, now I will briefly tell you about our six-year journey into the wonderful world of the 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, . , , .