Micro-frontends. Enfoque asincrónico para el desarrollo de varios equipos

¿Alguna vez te has preguntado cómo evitar retrasos debido a la sincronización de comandos en las condiciones de desarrollo de varios equipos de un producto moderno? A continuación, compartiré la experiencia de tal desarrollo utilizando el ejemplo de nuestro equipo Cyan.Finance. Detalles del enfoque vertical del desarrollo y por qué lo hacemos de esa manera.



Hola, mi nombre es Igor Mikhailyuk, soy el desarrollador líder del equipo Cyan. Finanzas. Estamos desarrollando servicios financieros en la plataforma Cyan.



Historia del equipo cian - finanzas



Nuestro equipo se unió a Qian en mayo de 2018 con un complemento completo de 18 personas. Desde el principio, el equipo se creó de acuerdo con los principios utilizados por muchas grandes empresas de TI, incluida Pivotal.



La historia del equipo comenzó en diciembre de 2016



Los principios fundamentales adoptados en nuestro equipo:



  • Entrega rápida de código a la producción
  • Arquitectura de microservicio
  • Desarrollo nativo en la nube
  • Sin probadores, el propietario del producto interactúa directamente con el desarrollador de DevOps
  • Poner el servicio en producción y mantenerlo es responsabilidad del desarrollador.


, , , , Pivotal University, , , .



, Cloud Foundry Kubernetes.



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



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



  



, : front, back, , .



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



imagen

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



, . .



, , . , , , , , .



, — .



imagen





imagen



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



, , , ?



:



  1. , , :

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


, , , . 



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





2 . 



  1. .
  2. , 10 . 


.



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



. preact: .





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



, .





imagen



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



imagen

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



2 (    hpe)



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



imagen

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



3 ( hpe)



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



imagen

. 5. 8 : 4 + 4 . HPE





. , .



Custom Elements



  • ,
  • cdn


.




All Articles