$30 off During Our Annual Pro Sale. View Details »

Mosaic Micro Frontends In Review

Mosaic Micro Frontends In Review

Dmitriy Kubyshkin

May 15, 2018
Tweet

More Decks by Dmitriy Kubyshkin

Other Decks in Programming

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