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

Micro frontend and web components

Yas
June 19, 2019

Micro frontend and web components

Yas

June 19, 2019
Tweet

More Decks by Yas

Other Decks in Programming

Transcript

  1. Microapps
    Web Components
    @yashints yashints yashints

    View Slide

  2. Microapps
    Web Components
    @yashints yashints yashints

    View Slide

  3. yashints

    View Slide

  4. yashints
    Agenda
    ▪ Intro
    ▪ Core ideas
    ▪ Meet Ali and her team
    ▪ The issue
    ▪ Trials
    ▪ Final solution

    View Slide

  5. Lead consultant @Readify
    Yaser Adel Mehraban
    @yashints
    Almond croissant addict cleverly
    disguised as a web developer
    yashints.dev
    dev.to/yashints

    View Slide

  6. yashints
    I a good monolith

    View Slide

  7. yashints

    Don’t even consider microservices unless you
    have a system that’s too complex to manage as
    a monolith.
    Martin Fowler

    View Slide

  8. yashints

    Don’t even consider micro frontend unless you
    can vertically slice your system to enable your
    teams to act independently.
    Me

    View Slide

  9. yashints
    Core ideas
    ▪ Development speed
    ▪ Autonomous teams
    ▪ Customer focus
    ▪ Technology agnostic

    View Slide

  10. yashints
    Product owner
    CarZila

    View Slide

  11. yashints
    The issue
    Data Layer
    Business Layer
    User Interface

    View Slide

  12. yashints
    Technology agnostic
    Independent deployment
    Team ownership
    Develop independently
    Fast loading
    Smooth user interaction
    Sharing state
    Corporate identity
    Run independently Modular
    Native support

    View Slide

  13. yashints
    First try
    User Interface
    Search Insight
    Test Drive Order Payment
    Inventory

    View Slide

  14. yashints
    Technology agnostic
    Independent deployment
    Team ownership
    Develop independently
    Fast loading
    Smooth user interaction
    Sharing state
    Corporate identity
    Run independently Modular
    Native support

    View Slide

  15. yashints
    Vision
    Search Insight
    Test Drive Order Payment Inventory
    Frontend
    Backend
    Data store

    View Slide

  16. yashints
    If you want to go fast, go alone.
    If you want to go far, go together.

    View Slide

  17. yashints
    First attempt
    Hyperlinks

    View Slide

  18. yashints
    Hyperlinks
    Search Order
    Search.html order.html

    View Slide

  19. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Run independently
    Technology agnostic
    Independent deployment
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction

    View Slide

  20. yashints
    Integration vis composition
    ▪ Build time
    ▪ Run time on client side
    ▪ Run time on server side

    View Slide

  21. yashints
    Build time

    View Slide

  22. yashints
    Build time
    { Search }
    { Insight }
    { Test Drive }
    { Order }
    { Payment }
    { Inventory }
    Build Bundle

    View Slide

  23. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction

    View Slide

  24. yashints
    Server Side composition

    View Slide

  25. yashints
    SSI (Server Side Includes)

    View Slide

  26. yashints
    SSI (Server Side Include)

    View Slide

  27. yashints
    ESI (Edge Side Includes)
    Get
    Get Order

    View Slide

  28. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction

    View Slide

  29. yashints
    Client Side composition

    View Slide

  30. yashints
    IFrames

    View Slide

  31. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction

    View Slide

  32. yashints
    Web components

    View Slide

  33. yashints
    Custom Elements Shadow DOM
    ES6 Modules HTML Templates

    View Slide

  34. yashints
    API

    View Slide

  35. yashints
    API

    View Slide

  36. yashints
    API

    View Slide

  37. yashints
    App Shell

    View Slide

  38. yashints
    Framework support

    View Slide

  39. yashints
    Angular Elements Vue CLI
    Manual
    Community Soluttions Lit

    View Slide

  40. yashints
    Fast loading
    Native support
    Team ownership
    Develop independently
    Technology agnostic
    Independent deployment
    Run independently
    Corporate identity
    Sharing state
    Modular
    Smooth user interaction

    View Slide

  41. yashints
    Demo

    View Slide

  42. yashints
    Real use cases
    ▪ Migrate a large app to another framework
    ▪ Fix a bug in one app and deploy independently
    ▪ Reuse an entire app
    ▪ And more…

    View Slide

  43. yashints
    Taking balanced decisions is the
    secret ingredient for success

    View Slide

  44. yashints

    View Slide

  45. yashints

    View Slide

  46. yashints
    References
    ▪ The demo is on my GitHub repo yas.fyi/2FeIrI3
    ▪ Slides yas.fyi/2Kspzt8
    ▪ https://micro-frontends.org/
    ▪ A good reference list yas.fyi/2KXHaZD

    View Slide

  47. yashints
    Questions?

    View Slide