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
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

    View full-size slide

  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

    View full-size slide

  3. 3
    ZALANDO AT A GLANCE

    View full-size slide

  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

    View full-size slide

  5. 5
    OUR JOURNEY

    View full-size slide

  6. 6
    S TA R T E D W IT H A MO N OL I TH

    View full-size slide

  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

    View full-size slide

  8. 8
    TEAMS OWN BACKEND APIS

    View full-size slide

  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

    View full-size slide

  10. 1 0
    WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS

    View full-size slide

  11. 11
    M O SA I C
    https://www.mosaic9.org

    View full-size slide

  12. 1 2
    TEAMS OWN FRAGMENTS

    View full-size slide

  13. 1 3
    FRAGMENTS USE THE BACKEND APIS

    View full-size slide

  14. 1 4
    LAYOUT SERVICE ASSEMBLES FRAGMENTS

    View full-size slide

  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

    View full-size slide

  16. 1 6
    M O SA I C CO M P ONE NT S

    View full-size slide

  17. 1 7
    M O RE V IS U A L RE P R ESENTAT ION
    HEADER FRAGMENT
    PRODUCT FRAGMENT

    View full-size slide

  18. 1 8
    OUTFIT FRAGMENT
    RECOMMENDATION
    FRAGMENT
    FOOTER FRAGMENT

    View full-size slide

  19. 1 9
    LEARN MORE
    https://www.youtube.com/watch?v=E0s3EGCefB0

    View full-size slide

  20. 2 0
    WHAT WENT WELL

    View full-size slide

  21. 2 1
    TRANSITION
    Having an easily configurable global router

    (reverse proxy) is immensely powerful.

    View full-size slide

  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

    View full-size slide

  23. 2 3
    A U TO N O M Y
    Deployments are mostly independent with some teams deploying
    their fragment several times per day.

    View full-size slide

  24. 2 4
    S C AL E
    20+ teams
    50+ fragments
    1 000s page
    rps
    10 000s total
    rps

    View full-size slide

  25. 2 5
    P E RF O R M AN CE
    Direct overhead of the infrastructure is in low 10s of milliseconds

    View full-size slide

  26. 2 6
    THINGS TO FOCUS MORE ON

    View full-size slide

  27. 2 7
    React
    Redux
    Node.js
    Webpack
    Hot Reloading
    PostCSS
    Express OAuth
    Circuit Breakers
    Monitoring
    TEAMS NEED A LOT OF EXPERTISE

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  31. 3 1
    MICRO F RONTE ND P REF LIGHT
    C H E C K L I S T

    View full-size slide

  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?

    View full-size slide

  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?

    View full-size slide

  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?

    View full-size slide

  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?

    View full-size slide

  36. 3 6
    WHAT TO LOOK FORWARD TO
    FOR MICRO FRONTENDS

    View full-size slide

  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?

    View full-size slide

  38. 3 8
    S E RV E R L ES S & FAAS
    Possibility of enabling less technical stakeholders

    to do real-world experimentation.

    View full-size slide

  39. 3 9
    WEB ASSEMBLY
    Code (algorithm) re-use on the client with potential

    of executing heavy workloads (i.e. ML)

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  42. @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

    View full-size slide