Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mosaic Micro Frontends In Review

Mosaic Micro Frontends In Review

Dmitriy Kubyshkin

May 15, 2018

More Decks by Dmitriy Kubyshkin

Other Decks in Programming



    -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. 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
  4. 6 S TA R T E D W IT H

    A MO N OL I TH
 ( 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 …
  6. 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
  7. 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
  8. 1 7 M O RE V IS U A L

  9. 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
  10. 2 3 A U TO N O M Y Deployments

    are mostly independent with some teams deploying their fragment several times per day.
  11. 2 4 S C AL E 20+ teams 50+ fragments

    1 000s page rps 10 000s total rps
  12. 2 5 P E RF O R M AN CE

    Direct overhead of the infrastructure is in low 10s of milliseconds
  13. 2 7 React Redux Node.js Webpack Hot Reloading PostCSS Express

    OAuth Circuit Breakers Monitoring TEAMS NEED A LOT OF EXPERTISE
  14. 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.
  15. 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.
  16. 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 …
  17. 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?
  18. 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?
  19. 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?
  20. 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?
  21. 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?
  22. 3 8 S E RV E R L ES S

    & FAAS Possibility of enabling less technical stakeholders
 to do real-world experimentation.
  23. 3 9 WEB ASSEMBLY Code (algorithm) re-use on the client

    with potential
 of executing heavy workloads (i.e. ML)
  24. 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.
  25. 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
  26. @ZalandoTech tech.zalando.com D M I T R I Y K

    U B Y S H K I N @d_kubyshkin [email protected] 1 5 - 0 5 - 2 0 18