Micro-frontends. Approche asynchrone du développement multi-équipes

Vous êtes-vous déjà demandé comment éviter les retards dus à la synchronisation des commandes dans les conditions de développement multi-équipes d'un produit moderne? Ensuite, je partagerai l'expérience d'un tel développement en utilisant l'exemple de notre équipe Cyan.Finance. Détails de l'approche verticale du développement et pourquoi nous le faisons de cette façon.



Bonjour, je m'appelle Igor Mikhailyuk, je suis le développeur principal de l'équipe Cyan. Nous développons des services financiers sur la plateforme Cyan.



Histoire de l'équipe Cyan - Finance



Notre équipe a rejoint Qian en mai 2018 avec un effectif complet de 18 personnes. Dès le début, l'équipe a été construite selon les principes sur lesquels travaillent de nombreuses grandes entreprises informatiques, y compris Pivotal.



L'histoire de l'équipe a commencé en décembre 2016



Les grands principes adoptés dans notre équipe:



  • Livraison rapide du code à la production
  • Architecture de microservices
  • Développement Cloud Native
  • Aucun testeur, le propriétaire du produit interagit directement avec le développeur DevOps
  • La mise en production et la maintenance du service sont de la responsabilité du développeur.


, , , , Pivotal University, , , .



, Cloud Foundry Kubernetes.



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



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



  



, : front, back, , .



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



image

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



, . .



, , . , , , , , .



, — .



image





image



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



, , , ?



:



  1. , , :

    1. .
    2. - — ,
  2. , .1


, , , . 



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





2 . 



  1. .
  2. , 10 . 


.



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



. preact: .





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



, .





image



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



image

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



2 (    hpe)



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



image

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



3 ( hpe)



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



image

. 5. 8 : 4 + 4 . HPE





. , .



Custom Elements



  • ,
  • cdn


.




All Articles