Micro-frontends. Asynchronous approach to multi-team development

Have you ever wondered how to avoid delays due to synchronization of commands in the conditions of multi-team development of a modern product? Next, I will share the experience of such a development using the example of our Cyan.Finance team. Details of the vertical approach to development and why we do it that way.



Hi, my name is Igor Mikhailyuk, I am the lead developer in the Cyan team. Finance. We are developing financial services on the Cyan platform.



Cyan team history - finance



Our team joined Qian in May 2018 with a full complement of 18 people. From the very beginning, the team was built according to the principles by which many large IT companies work, including Pivotal.



The history of the team began in December 2016



The main principles adopted in our team:



  • Fast code delivery to prod
  • Microservice architecture
  • Cloud Native development
  • No testers, product owner interacts directly with the DevOps developer
  • Putting a service into production and maintaining it is the responsibility of the developer.


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