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

Micro Frontends - YGLF, Tel Aviv

Micro Frontends - YGLF, Tel Aviv

The talk was presented at YGLF 2017 in Tel Aviv, Israel
https://www.youtube.com/watch?v=o1Sr39DVdOQ

Michael Geers

October 31, 2017
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. Micro Frontends
    Break up your web app!

    View Slide

  2. technology evolves quickly
    2005 2017
    ?

    View Slide

  3. frontend gets bigger

    View Slide

  4. we have a problem …

    View Slide

  5. Michael Geers
    Frontend Engineer
    naltatis
    on Twitter & GitHub
    Bremen, Germany

    View Slide

  6. Micro Frontends
    Verticalized Teams
    Self Contained Systems
    Vertical Decomposition
    UI Composition

    View Slide

  7. Architecture

    View Slide

  8. The Project
    Browser Stu!

    View Slide

  9. Frontend
    Backend

    View Slide

  10. Frontend
    Backend Monolith

    View Slide

  11. Frontend
    Reco
    Microservice
    Teaser
    Microservice
    Media
    Microservice
    Product
    Microservice
    Payment
    Microservice
    Basket
    Microservice
    Search
    Microservice

    View Slide

  12. Reco
    Microservice
    Teaser
    Microservice
    Media
    Microservice
    Product
    Microservice
    Payment
    Microservice
    Basket
    Microservice
    Search
    Microservice
    API Gateway: REST, BFF, GraphQL, …
    Frontend

    View Slide

  13. Frontend-Monolith
    Reco
    Microservice
    Teaser
    Microservice
    Media
    Microservice
    Product
    Microservice
    Payment
    Microservice
    Basket
    Microservice
    Search
    Microservice
    API Gateway: REST, BFF, GraphQL, …
    1.

    View Slide

  14. Media
    Microservice
    Product
    Microservice
    API Gateway: REST, BFF, GraphQL, …
    Please Implement
    VR Product Images!
    Frontend-Monolith
    Synchronize Multiple Teams
    Slow Communication, Frustration
    2.

    View Slide

  15. Customers
    High Distance
    to the Customer
    Abstraction Layers
    3.

    View Slide

  16. Technical
    Teams
    Specialize in a
    Technology

    View Slide

  17. Usecase
    Teams
    vs.
    Technical
    Teams
    Satisfy
    Customer
    Needs

    View Slide

  18. Get Inspired Decide What’s Best Buy It
    Customer Needs in E-Commerce

    View Slide

  19. View Slide

  20. End-to-End Teams / Micro Frontends
    Team
    Inspire
    Team
    Decide
    Team
    Checkout

    View Slide

  21. Team
    Inspire
    End-to-End Teams / Micro Frontends
    Team
    Decide
    Team
    Checkout
    frontend
    included

    View Slide

  22. Team
    Inspire
    Team
    Decide
    Team
    Checkout
    mission

    make it easy to
    purchase the product
    narrow scope

    doesn’t have to know
    about seo, search, …
    team isolation

    work & deploy on
    their own schedule
    End-to-End Teams / Micro Frontends

    View Slide

  23. View Slide

  24. Team Decide
    owns the page
    Team Inspire
    provides a fragment
    Team Checkout

    provides two fragments

    View Slide

  25. How to integrate?

    View Slide

  26. Web Components
    HTML
    Imports
    Custom
    Elements
    Shadow
    DOM
    HTML
    Template

    View Slide

  27. Web Components
    HTML
    Imports
    Custom
    Elements
    Shadow
    DOM
    HTML
    Template

    View Slide

  28. Custom Elements

    https://developers.google.com/web/fundamentals/getting-started/primers/customelements

    View Slide

  29. class CheckoutBasket extends HTMLElement {
    connectedCallback() {
    this.innerHTML = 'mini basket ...';

    }

    }

    customElements.define('checkout-basket', CheckoutBasket);
    Custom Elements
    !""
    Choo

    View Slide

  30. Element Lifecycle
    class CheckoutBasket extends HTMLElement {
    constructor() {...}

    connectedCallback() {...}

    attributeChangedCallback(attr, oldVal, newVal) {...}

    disconnectedCallback() {...}

    }
    is created
    attached to DOM
    removed from DOM, cleanup!
    someone change an attribute

    View Slide

  31. Custom Elements v1

    API stabilized end of last year
    Browser Support
    in development
    under consideration

    View Slide


  32. https://github.com/WebReflection/document-register-element
    Browser Support
    with Polyfill (5KB)
    11

    View Slide







  33. View Slide







  34. t_green
    t_green

    View Slide

  35. the DOM is the API
    Teams publish their Custom Elements Documentation
    Element-Name, Attributes, Events

    View Slide

  36. Framework Support
    Rob Dodson

    @robdodson
    custom-elements-everywhere.com
    Interoperability Test Suite
    for Frameworks

    View Slide

  37. But Progressive Enhancement?

    View Slide

  38. But Progressive Enhancement?

    View Slide

  39. No Universal Web Components

    View Slide


  40. el.innerHTML = "Related Products…")
    Browser Rehydration & User Interaction
    /inspire-reco?sku=t_red
    res.send("Related Products…")
    Server Initial Render

    View Slide

  41. SSI Server Side Includes

    View Slide

  42. Google Books
    2001

    View Slide

  43. Google Books
    2001
    The easiest way to import external content
    into a Web page is to use a server-side
    include.

    View Slide

  44. Custom Elements ❤ SSI



    server
    client

    View Slide










  45. View Slide

  46. Page Transitions

    View Slide

  47. Only Inside a Team
    Team A
    One Router per Team
    Hard
    Navigation

    Page
    Refresh
    Team B
    /product
    /list
    Soft

    Navigation
    Client
    Rendered
    /success
    /cart
    Soft

    Navigation
    Client
    Rendered

    View Slide

  48. Top Level Router
    Shared Universal Router & Page Fragments
    HTML Shell
    with Router
    id="12">


    name="toy">






    const routes = {
    '/:name': 'a-list',
    '/p/:id': 'a-product',
    '/cart': 'b-cart',

    '/success': 'b-success'
    }
    Page-Fragments
    Needs Shared Global Code!

    View Slide

  49. Things we’ve learned

    View Slide

  50. Use Browser API
    don’t build a meta framework

    avoid shared code

    View Slide

  51. Isolate Teams
    don’t share runtime, state or globals

    View Slide

  52. Talk to your Neighbors
    share best practices

    View Slide

  53. Pack light
    register custom elements immediately

    download code when needed

    View Slide

  54. Measure Performance
    HTTP/2 is great, optimize but don’t overoptimize

    View Slide

  55. Ownership is important
    use team prefixes when needed

    View Slide

  56. Have a Design System
    build a Style Guide or Pattern Library everybody can use

    View Slide

  57. Thanks for Listening
    micro-frontends.org @naltatis

    View Slide

  58. Synchronizing Multiple Teams

    View Slide

  59. Colorful Facade Scott Webb

    https://www.pexels.com/photo/abstract-art-artistic-
    blue-sky-305831/
    London New York Tokyo and Moscow
    Clocks Pixabay

    https://www.pexels.com/photo/london-new-york-
    tokyo-and-moscow-clocks-48770/
    Mom's spaghetti 0Four

    https://flic.kr/p/b6vjw6
    People Icons freepik

    https://www.flaticon.com/family/special/lineal-color
    Girl, magazine, wine Kaboompics

    https://www.pexels.com/photo/girl-magazine-
    wine-5923/
    Shopping Pixabay

    https://www.pexels.com/photo/adult-blur-bookcase-
    books-371249/
    Cash Burst

    https://www.pexels.com/photo/blur-cash-close-up-
    dollars-545065/
    Unicorn d97jro

    https://pixabay.com/de/lego-einhorn-
    spielzeug-671593/
    Broken Escalator Skitterphoto

    https://pixabay.com/photo-1746279
    Sad Lego Benny Cheezburger

    http://gph.is/1BCRCKh
    Never give up The Dodo

    https://www.thedodo.com/these-kittens-are-never-
    going-to-sit-still-for-this-picture-2381287587.html
    Tractors Manufactum

    https://www.manufactum.com/tin-toys-c193667/
    Image
    Credits
    built with Micro Frontends

    View Slide