Micro-Frontends. Asynchroner Ansatz für die Entwicklung mehrerer Teams

Haben Sie sich jemals gefragt, wie Sie Verzögerungen aufgrund der Synchronisierung von Befehlen unter den Bedingungen der Entwicklung eines modernen Produkts in mehreren Teams vermeiden können? Als nächstes werde ich die Erfahrungen einer solchen Entwicklung am Beispiel unseres Cyan.Finance-Teams teilen. Details zum vertikalen Entwicklungsansatz und warum wir das so machen.

Hallo, mein Name ist Igor Mikhailyuk, ich bin der Hauptentwickler im Cyan-Team. Finanzen. Wir entwickeln Finanzdienstleistungen auf der Cyan-Plattform.

Cyan Team Geschichte - Finanzen

Unser Team kam im Mai 2018 mit 18 Mitarbeitern zu Qian. Das Team wurde von Anfang an nach den Prinzipien vieler großer IT-Unternehmen, einschließlich Pivotal, aufgebaut.

Die Geschichte des Teams begann im Dezember 2016

Die wichtigsten Prinzipien in unserem Team:

• Schnelle Code-Lieferung an das Produkt
• Microservice-Architektur
• Cloud Native-Entwicklung
• Kein Tester, Produktbesitzer interagiert direkt mit dem DevOps-Entwickler
• Es liegt in der Verantwortung des Entwicklers, einen Service in Produktion zu bringen und zu warten.

, , , , 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
• …

.