Dari satu aplikasi menjadi seratus. Jalur microfront ke Tinkoff Business

Hai, nama saya Vanya, saya baru-baru ini berbicara di CodeFest 11 , di mana saya berbicara tentang jalur Tinkoff Business di frontend dari satu aplikasi ke seratus. Tetapi karena semuanya berubah sangat cepat di TI, dan akan membutuhkan waktu lama untuk menunggu rekaman, sekarang saya akan memberi tahu Anda secara singkat tentang perjalanan enam tahun kami ke dunia mikro yang indah!

. . — , .

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, . , , .