Mosaic Micro Frontends In Review

Mosaic Micro Frontends In Review

Dfe9845377f648b8a6076b14c7708915?s=128

Dmitriy Kubyshkin

May 15, 2018
Tweet

Transcript

  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