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

Micro Frontends: Building a modern webapp with multiple teams

Micro Frontends: Building a modern webapp with multiple teams

The talk was presented on JSUnconf.eu 2017 in Hamburg

Michael Geers

March 25, 2017
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. Micro Frontends
    building a modern webapp with multiple teams

    View Slide

  2. Michael Geers

    frontend developer
    naltatis on twitter & github
    Bremer Software-Manufaktur
    für E-Commerce

    View Slide

  3. Web Components
    magical creatures of the web

    View Slide

  4. Web Components
    first talked about in 2011

    View Slide

  5. the web moves fast

    View Slide

  6. https://fivethirtyeight.com/

    View Slide

  7. Show me your
    Frontend Stack
    … and I’ll tell your
    Project’s Age

    View Slide

  8. User Interaction Improvements
    server rendered
    ajax
    partial updates
    universal

    rendering

    View Slide

  9. rest api components
    testing
    routing data flow
    abstraction
    convenience
    frameworks

    View Slide

  10. rest api components
    testing
    routing data flow
    abstraction
    convenience
    your single page app

    View Slide

  11. rest api components
    testing
    routing data flow
    abstraction
    convenience
    your monolithic SPA

    View Slide

  12. monolithic application

    View Slide

  13. micro

    service
    micro

    service micro

    service
    micro

    service
    micro

    service
    micro

    service
    micro

    service
    erp-integration
    tracking
    recos
    teaser
    search-engine
    payment
    newsletter
    frontend
    Stefan Tilkov on
    Frontend Monoliths

    View Slide

  14. team
    explore
    team
    evaluate
    team
    order
    team
    search
    Self Contained Systems
    http://scs-architecture.org/

    View Slide

  15. Self Contained Systems
    team
    search
    cross functional team
    mission

    help customers to find the right product
    end-to-end-development

    communication is easy
    narrow scope

    doesn't have to know about payment, …
    doesn't reinforce specialization 

    learning from each other -> full stack

    View Slide

  16. Composing a Page
    mini cart

    2 items
    shopname
    product name
    add to cart
    products you might like
    color: black white
    team

    evaluate
    team

    order
    team

    explore

    View Slide

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

    View Slide

  18. People want component-oriented development experience, and
    interoperability. Currently web component is trying to solve both of them,
    but it turns out that it doesn’t solve the development experience issue
    very well on its own. IMO it is better if the spec focuses on
    interoperability alone, and leaves the dev experience part to frameworks.
    https://hacks.mozilla.org/2015/06/the-state-of-web-components/#comment-17855
    The State of Web Components
    Evan You

    @youyuxi | Creator of vue.js

    View Slide

  19. Custom Elements

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

    View Slide

  20. Custom Elements
    class OrderMinicart extends HTMLElement {
    connectedCallback() {
    this.innerHTML = 'mini cart ...';

    }

    }

    customElements.define('order-minicart', OrderMinicart);
    https://developers.google.com/web/fundamentals/getting-started/primers/customelements

    View Slide

  21. Browser Support
    Reliable Polyfill available (using Mutation Observers)

    https://github.com/WebReflection/document-register-element
    Custom Elements v1

    API stabilized end of last year
    supported in Chrome, Opera & Safari

    Firefox: in development

    Edge: under consideration

    View Slide

  22. Element Lifecycle
    class OrderMinicart extends HTMLElement {
    constructor() {...}

    connectedCallback() {...}

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

    disconnectedCallback() {...}

    }

    customElements.define('order-minicart', OrderMinicart);
    an element instance was created
    element was attached to the DOM
    element was removed from the DOM, cleanup
    someone change an attribute

    View Slide

  23. The DOM-Element is the API
    Teams publish their Custom Element Documentations
    Element-Name, Attributes, Events

    View Slide

  24. Custom Elements = Team Borders
    mini cart

    2 items
    product name
    add to cart
    products you might like
    color: black white
    team

    evaluate


    product="14"

    color="black" />

    View Slide

  25. Communication

    View Slide

  26. Parent-Child Communication

    white
    parent updates
    attribute on child
    * Providing imperative methods like document.querySelector('video').pause() is also possible.

    View Slide

  27. Child-Parent Communication
    document

    .querySelector('order-button')

    .addEventListener('success', () =>

    alert('tadda!')
    ) parent listens for
    DOM event on child

    View Slide

  28. Sibling Communication
    document.dispatchEvent(new Event('cartChanged'))

    broadcasting event through the body element
    document.addEventListener('cartChanged', refresh)


    View Slide

  29. two more things

    View Slide

  30. But Progressive Enhancement?

    View Slide

  31. No Web Components
    Isomorphic
    Universal

    View Slide

  32. Server Side Includes (SSI)

    Edge Side Includes (ESI) are an alternative solution

    View Slide

  33. How SSI Works
    nginx
    /product/14
    evaluate order
    /product/14
    SSI include needed

    /minibasket
    user request user response
    Product 14

    virtual="/minibasket“ -->
    mini cart
    Product 14

    mini cart

    View Slide

  34. Custom Elements ❤ SSI



    for initial server render
    gets replaced with initial
    markup by the web server
    handles lifecycle and triggers
    client rendering if needed

    View Slide

  35. Progressive Enhancement is like
    building a safety net. You can think
    of it as Technical Credit.
    https://www.youtube.com/watch?v=KxsCWCjEi2Q
    Jeremy Keith

    @adactio | Author of Resilient Web Design

    View Slide

  36. broken

    lazy loading
    Progressive
    Enhancement
    hides
    many bugs
    … and yes, this is a good thing.

    View Slide

  37. Page Transitions
    team a team b
    inside team
    soft navigation 

    client rendered
    between teams
    hard navigation 

    server rendered
    single page app

    with router
    single page app

    with router
    multiple single page apps

    View Slide

  38. team a team b
    Universal Router

    team a
    id=14 />

    const routes = {
    '/': 'home-page',
    '/p/:id': 'product-page',
    '/cart': 'cart-page',
    }
    simple page
    components
    without router
    client router

    updates page component

    according to browser url
    history api & custom elements
    /p/14 /p/15 /cart

    View Slide

  39. 3 Takeaways

    View Slide

  40. Use the DOM, Luke!

    View Slide

  41. Resilience !important

    View Slide

  42. Larger isn’t always Better

    View Slide

  43. Thanks!
    Michael Geers
    frontend developer
    naltatis on twitter & github
    speakerdeck.com/naltatis

    github.com/neuland/micro-frontends

    View Slide

  44. herbert2512 - Architecture

    https://pixabay.com/photo-1934703/

    d97jro - Lego Unicorn

    https://pixabay.com/photo-671593/

    ThePixelman - Sparkle Girl

    https://pixabay.com/photo-529013/
    Thanks to the Photographers
    Alexas_Fotos - Lego Benny

    https://pixabay.com/photo-674609/

    Skitterphoto - Broken Escalator

    https://pixabay.com/photo-1746279/

    Sad Lego Benny

    http://gph.is/1BCRCKh

    View Slide