Micro-frontends. Abordagem assíncrona para o desenvolvimento de várias equipes

Você já se perguntou como evitar atrasos devido à sincronização de comandos nas condições de desenvolvimento multi-equipe de um produto moderno? A seguir, compartilharei a experiência de tal desenvolvimento usando o exemplo de nossa equipe Cyan.Finance. Detalhes da abordagem vertical do desenvolvimento e por que o fazemos dessa forma.

Olá, meu nome é Igor Mikhailyuk, sou o desenvolvedor líder da equipe do Cyan. Finanças. Estamos desenvolvendo serviços financeiros na plataforma Cyan.

História da equipe Cyan - finanças

Nossa equipe se juntou à Qian em maio de 2018 com um complemento total de 18 pessoas. Desde o início, a equipe foi construída de acordo com os princípios pelos quais muitas grandes empresas de TI trabalham, incluindo a Pivotal.

A história da equipe começou em dezembro de 2016

Os principais princípios adotados em nossa equipe:

• Entrega rápida de código para produção
• Arquitetura de microsserviço
• Desenvolvimento nativo em nuvem
• Sem testadores, o product owner interage diretamente com o desenvolvedor DevOps
• Colocar um serviço em produção e mantê-lo é responsabilidade do desenvolvedor.

, , , , Pivotal University, , , .

, Cloud Foundry Kubernetes.

cloud native . 10 12 DevOps , , 3 , git , merge request, , . , , , . , ,   / , . 

, , , , — , - , , -. . .

  

, : front, back, , .

https://www.cian.ru/ipoteka/ 

. 1. .

CI/CD

CI/CD, , . .

. code-review. . .

, - , , , code review. , , , . , , 4 , 4 , .

, back-end , SaaS , API, - . , back , front?

. : https://micro-frontends.org/. , . - , , .

, ,   . , , . nginx . — , . . - . 

? CI/CD. , ,   .. . , . , . . . , . 100%. 

, , , MQ, , devops .. : , CI/CD , . CDN, DevOps-, . 

, , ., . , , , , (typescript vs javascript, React vs Custom Elements), , . , Cloud Foundry . — Kubernetes, . Java, Node.js, Kotlin Python. . React ( Next.js) preact, Svelte, JS . 

, , , React Angular. , , js . , , ts-lint , , , . 

 

fin.cian.ru , . — . ,   reverse proxy, . .

, , , , , . . 

4 , 10 , . , .. , , .

, . .

, , . , , , , , .

, — .

. , , . .. (, , , ..), — .

, , , ?

:

1. , , :
   
   
   1. .
   3. - — ,
2. , .1

, , , . 

, web . : React. . , — . . . React, , , . 

2 . 

1. .
2. , 10 . 

.

. , — , . — , .. , . , , . . 

. preact: .

? , , : DEV, STAGING, PROD. , . . 

, .

. 2. () DEV . — STAGE. DEV. . PROD, . STAGE . STAGE PROD, .

, , . . ( , ) . , , — . 

— . . . — . , , , . . , . 

web . yandex . YouTube , .

: , , . , , , .   . front . 

. — -. . 

, , ( ). , , , . , ,  , - , — .

 

, :

• ,
• / ,
• - P&L
• , front back, .   4 (iOS app, Android app, Web desktop, Web adaptive), 1 , 4.
• full stack — , 2 10 — .
• high performance employee (hpe) netflix (https://jobs.netflix.com/culture)

Velocity . , ( ).

— Velocity , , , Velocity   profit (NPS).

.. , , velocity high performance employee.

1 ( hpe)

, , . .

Velocity  2,  2 , front+back . , — . 

. 3. 8 : 2 , 2 2 . — , HPE —

2 (    hpe)

, velocity . , web-view. - , ( web-view)  2 , . , . 

. 4. 8 : 3 , 1 3 . , HPE  —

3 ( hpe)

, high performance employee, . web view . .. , 2 , . Velocity 4, 2 , 1. 

. 5. 8 : 4 + 4 . HPE

. , .

Custom Elements

• ,
• cdn
• …

.