Mosaic Micro Frontends In Review

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

3. 3
   ZALANDO AT A GLANCE
   

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

5. 5
   OUR JOURNEY
   

   View Slide

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

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

8. 8
   TEAMS OWN BACKEND APIS
   

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

10. 1 0
    WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS
    

    View Slide

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

    View Slide

12. 1 2
    TEAMS OWN FRAGMENTS
    

    View Slide

13. 1 3
    FRAGMENTS USE THE BACKEND APIS
    

    View Slide

14. 1 4
    LAYOUT SERVICE ASSEMBLES FRAGMENTS
    

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

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

    View Slide

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

    View Slide

18. 1 8
    OUTFIT FRAGMENT
    RECOMMENDATION
    FRAGMENT
    FOOTER FRAGMENT
    

    View Slide

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

    View Slide

20. 2 0
    WHAT WENT WELL
    

    View Slide

21. 2 1
    TRANSITION
    Having an easily configurable global router

    (reverse proxy) is immensely powerful.
    

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

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

    View Slide

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

    View Slide

26. 2 6
    THINGS TO FOCUS MORE ON
    

    View Slide

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

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

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

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

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

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

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

    of executing heavy workloads (i.e. ML)
    

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

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
    

    View Slide