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

Micro Frontends - YGLF, Tel Aviv

Michael Geers
October 31, 2017

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 full-size slide

  2. technology evolves quickly
    2005 2017
    ?

    View full-size slide

  3. frontend gets bigger

    View full-size slide

  4. we have a problem …

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Architecture

    View full-size slide

  8. The Project
    Browser Stu!

    View full-size slide

  9. Frontend
    Backend

    View full-size slide

  10. Frontend
    Backend Monolith

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  16. Technical
    Teams
    Specialize in a
    Technology

    View full-size slide

  17. Usecase
    Teams
    vs.
    Technical
    Teams
    Satisfy
    Customer
    Needs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    provides two fragments

    View full-size slide

  23. How to integrate?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Custom Elements

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

    View full-size slide

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

    }

    }

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

    View full-size slide

  28. 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 full-size slide

  29. Custom Elements v1

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

    View full-size slide


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

    View full-size slide







  31. t_green
    t_green

    View full-size slide

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

    View full-size slide

  33. Framework Support
    Rob Dodson

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

    View full-size slide

  34. But Progressive Enhancement?

    View full-size slide

  35. But Progressive Enhancement?

    View full-size slide

  36. No Universal Web Components

    View full-size slide


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

    View full-size slide

  38. SSI Server Side Includes

    View full-size slide

  39. Google Books
    2001

    View full-size slide

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

    View full-size slide

  41. Custom Elements ❤ SSI



    server
    client

    View full-size slide










  42. View full-size slide

  43. Page Transitions

    View full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

  46. Things we’ve learned

    View full-size slide

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

    avoid shared code

    View full-size slide

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

    View full-size slide

  49. Talk to your Neighbors
    share best practices

    View full-size slide

  50. Pack light
    register custom elements immediately

    download code when needed

    View full-size slide

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

    View full-size slide

  52. Ownership is important
    use team prefixes when needed

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Synchronizing Multiple Teams

    View full-size slide

  56. 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 full-size slide