Come abbiamo scalato Dazn con micro-architetture
•
0 likes•357 views
Luca Mezzaira ha presentato il case study di DAZN spiegando cosa sono le micro-architetture e focalizzandosi sui micro-frontends. Durante l'intervento, il relatore ci ha spiegato come DAZN si è approcciato allo sviluppo della propria piattaforma evolvendola da una single page application a micro-frontends. E' seguito poi uno spazio per domande e curiosità riguardo la tematica affrontata nell’intervento.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Come abbiamo scalato Dazn con micro-architetture
Similar to Come abbiamo scalato Dazn con micro-architetture (20)
More from Commit University
More from Commit University (20)
Recently uploaded
Recently uploaded (20)
Come abbiamo scalato Dazn con micro-architetture
- 2. Ciao :) Luca Mezzalira VP of Architecture at DAZN Google Developer Expert London Javascript Community Manager 2
- 4. 4 Scaling our applications with microfrontends SPA DB Microservice DB Microservice DB Microservice API Gateway
- 5. 5 Scaling our applications with microfrontends Microfrontend DB Microservice DB Microservice DB Microservice API Gateway Microfrontend Microfrontend Routing On the edge, Server side Or Client side* API Gateway
- 6. “Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with same or different technology choices, finally they should avoid sharing logic with other subdomains and they are own by a single team 6 From Domain Driven Design (DDD)
- 7. 7
- 10. Design for hundreds of developers We are going to have hundreds of developers working on DAZN. Bear in mind when you design our new architecture! 10 100 100 100 “ “
- 11. 11 DAZN teams structure DX Team Payments BE Cloud Engineers Catalog FE+BE My Account team Help team Sports Data team SREs Onboarding FE+BE Mobile Native teams TVs FE only Video Player FE
- 12. 12 DAZN implementation Landing Pages Authentication Discovery and Playback Customers Support My Account Bootstrap
- 13. 13 DAZN implementation Micro-frontends ▧ Each Micro-frontend represents a subdomain matching the business structure ▧ It’s technology/framework agnostic ▧ A Micro-frontend is AUTONOMOUS ▧ Inside a Micro-frontend the team can share components, code, styles or any other asset ▧ Independent building systems ▧ 1 Micro-frontend loaded per time ▧ 1 team own 1 Micro-frontend
- 15. 15 How bootstrap works </> bootstrap www.dazn.com Bootstrap is responsible for: . application startup . I/O operations . routing between micro-frontends . sharing configurations across multiple micro-frontends
- 16. 16 How bootstrap works <html> <head> <script src=”./bootstrap.js” /> </head> <body> ... </body> </html> ▧ Bootstrap loaded as first element and always available ▧ Tiny JS layer responsible to load micro-frontends ▧ Exposes APIs for different micro-frontends
- 17. 17 How bootstrap works </> {...} …. <html> <head> <script src=”./bootstrap.js” /> <style type=”text/css”>...</style> </head> <body> <div> … </div> <script src=”./catalogue.js” /> <script src=”./cat-vendor.js” /> </body> </html>
- 18. 18 How bootstrap works Window.DAZN = { Lifecycle: { OnLoad: function(){...} OnunLoad: function(){...} }, Localstorage: {...}, ... } ▧ DAZN object exposes methods and properties for all the micro-frontends ▧ Each micro-frontend has lifecycle callbacks available ▧ This object abstracts the platform exposing common APIs
- 19. Components 19 {...} ▧ Components available on NPM private repos ▧ Components need to work with any framework ▧ They expose a contract for the micro-frontend to interact with ▧ Components are own by specific teams ▧ They can be shared within same team
- 20. 20 Deployment 2.0 1.0 cloudfront https://bit.ly/2Afy44t ▧ Based on some scenarios I can redirect the user to a version or another ▧ Don’t need to do a big bang deployment ▧ Canary releases or Blue Green deployment on Frontend! (Amplify-like)
- 21. 21 DAZN teams structure DX Team Cloud Engineers SREs Payments BE Catalog FE+BE My Account team Help team Video Player FE Onboarding FE+BE Mobile Native teams TVs FE only Sports Data team Core Global Core+SupportingGeneric
- 22. 5 teamsOnboarded on the same projects in 3 weeks De-risk our releases 2 years without S1 incidents, multiple releases per day, doubling the user base every year 400 techiesWorking on the same platform 22
- 23. 23 QnA
- 24. Thank YOU You can find me at: @lucamezzalira lucamezzalira.com 24 -> many MFE posts!