微前端。多团队开发的异步方法

您是否曾经想过如何在现代产品的多团队开发条件下避免由于命令同步而造成的延迟?接下来,我将以我们的Cyan.Finance团队为例,分享这种开发的经验。垂直发展方法的详细信息以及我们为什么要这样做。



嗨,我叫Igor Mikhailyuk,我是Cyan团队的首席开发人员。我们正在Cyan平台上开发金融服务。



青色队的历史-财务



我们的团队于2018年5月加入Qian并由18名成员组成。从一开始,就根据许多大型IT公司(包括Pivotal)的工作原理建立了团队。



团队的历史始于2016年12月



我们团队采用的主要原则:



  • 快速将代码交付给产品
  • 微服务架构
  • 云原生开发
  • 没有测试人员,产品所有者直接与DevOps开发人员进行交互
  • 将服务投入生产并维护它是开发人员的责任。


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


.




All Articles