Mosaic Micro Frontends In Review

1. MOSAIC
 MICRO FRONTENDS IN REVIEW 1 5 - 0 5 -2 0 1 8 D M I T R I Y K U B Y S H K I N
2. tech.zalando.com D M I T R I Y K U B Y S H K I N Principal Engineer Digital Premises 1 5 - 0 5 - 2 0 18
3. 3 ZALANDO AT A GLANCE
4. 4 ZALANDO AT A GLANCE ~ 4.5 BILLION EUR revenue 2017 > 75% of visits via 
 mobile devices > 200 million visits per month > 23 million active customers > 300,000 product choices > 15,000 employees in 
 Europe 15 countries ~ 2,000 brands as of March 2018
5. 5 OUR JOURNEY
6. 6 S TA R T E D W IT H A MO N OL I TH
7. 7 THE PROMISE OF MICROSERVICES 
 ( A ND M I CR O F R ON T EN DS) decision autonomy ease of scaling the organization language & framework independence more digestible code easy to experiment and explore easier transition from legacy code …
8. 8 TEAMS OWN BACKEND APIS
9. 9 A P I S A R E U S E D B Y A F R O N T E N D M O N O L I T H
10. 1 0 WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS
11. 11 M O SA I C https://www.mosaic9.org
12. 1 2 TEAMS OWN FRAGMENTS
13. 1 3 FRAGMENTS USE THE BACKEND APIS
14. 1 4 LAYOUT SERVICE ASSEMBLES FRAGMENTS
15. 1 5 A S S E M B L E D C O N T E N T I S S T R E A M E D TO T H E C L I E N T
16. 1 6 M O SA I C CO M P ONE NT S
17. 1 7 M O RE V IS U A L RE P R ESENTAT ION HEADER FRAGMENT PRODUCT FRAGMENT
18. 1 8 OUTFIT FRAGMENT RECOMMENDATION FRAGMENT FOOTER FRAGMENT
19. 1 9 LEARN MORE https://www.youtube.com/watch?v=E0s3EGCefB0
20. 2 0 WHAT WENT WELL
21. 2 1 TRANSITION Having an easily configurable global router
 (reverse proxy) is immensely powerful.
22. 2 2 S K I PP ER https://github.com/zalando/skipper low latency streaming proxy built in DSL for route definition runtime route updates can handle 100 000s of routes easy to extend open source community
23. 2 3 A U TO N O M Y Deployments are mostly independent with some teams deploying their fragment several times per day.
24. 2 4 S C AL E 20+ teams 50+ fragments 1 000s page rps 10 000s total rps
25. 2 5 P E RF O R M AN CE Direct overhead of the infrastructure is in low 10s of milliseconds
26. 2 6 THINGS TO FOCUS MORE ON
27. 2 7 React Redux Node.js Webpack Hot Reloading PostCSS Express OAuth Circuit Breakers Monitoring TEAMS NEED A LOT OF EXPERTISE
28. 2 8 U S E F U L M I C R O S E RV I C E S Services should be genuinely useful for a particular
 customer or business flow.
29. 2 9 QUALITY & READY-TO-USE TOOLS The overall quality of the frontend will be close to the
 quality of templates and tools you provide.
30. 3 0 C E N T R A L I Z AT I O N M A K E S S E N S E
 FOR CERTAIN THINGS routing logging tracking A/B testing page composition …
31. 3 1 MICRO F RONTE ND P REF LIGHT C H E C K L I S T
32. 3 2 M I CR O F RO N T E N D P R E F L I GHT C H E C K L I S T What problem are you trying to solve with micro frontends?
33. 3 3 M I CR O F RO N T E N D P R E F L I GHT C H E C K L I S T Does the proposed infrastructure solve the hard problems
 instead of leaving it for the teams?
34. 3 4 M I CR O F RO N T E N D P R E F L I GHT C H E C K L I S T What is the contribution model to the infrastructure itself?
35. 3 5 M I CR O F RO N T E N D P R E F L I GHT C H E C K L I S T Is it possible to adjust the organizational boundaries?
36. 3 6 WHAT TO LOOK FORWARD TO FOR MICRO FRONTENDS
37. 3 7 B E T T E R S E RV I C E O R C H E S T R AT I O N What if we could schedule all pieces of
 a particular page on the same VM?
38. 3 8 S E RV E R L ES S & FAAS Possibility of enabling less technical stakeholders
 to do real-world experimentation.
39. 3 9 WEB ASSEMBLY Code (algorithm) re-use on the client with potential
 of executing heavy workloads (i.e. ML)
40. 4 0 C S S E N C A P S U L AT I O N — S H A D O W D O M Allows to encapsulate styles and markup
 for a particular DOM subtree.
41. 4 1 J S E N C A P S U L AT I O N — R E A L M S A programmatic way to construct a new JS global environment: const globalOne = window; const globalTwo = new Realm().global; console.log(globalOne.Array === globalTwo.Array) // false Currently Stage 1 Proposal
42. @ZalandoTech tech.zalando.com D M I T R I Y K U B Y S H K I N @d_kubyshkin dmitriy.kubyshkin@zalando.de 1 5 - 0 5 - 2 0 18