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

More Decks by Michael Geers

Other Decks in Technology


  1. 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
  2. Self Contained Systems team search cross functional team mission

    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
  3. 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
  4. 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
  5. 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
  6. 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
  7. Element Lifecycle class OrderMinicart extends HTMLElement { constructor() {...}

 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
  8. The DOM-Element is the API Teams publish their Custom Element

    Documentations Element-Name, Attributes, Events
  9. Custom Elements = Team Borders mini cart
 2 items product

    name add to cart products you might like color: black white team
 evaluate <explore-recos product="14" color="black" /> <order-minicart /> <order-button
 color="black" />
  10. Parent-Child Communication <explore-recos product="14" color="black" /> white parent updates attribute

    on child * Providing imperative methods like document.querySelector('video').pause() is also possible.
  11. Sibling Communication document.dispatchEvent(new Event('cartChanged'))
 broadcasting event through the body element

    document.addEventListener('cartChanged', refresh) <order-button /> <order-minicart />
  12. How SSI Works nginx /product/14 evaluate order /product/14 SSI include

 /minibasket user request user response <h1>Product 14</h1>
 <!—#include virtual="/minibasket“ --> <p>mini cart</p> <h1>Product 14</h1>
 <p>mini cart</p>
  13. Custom Elements ❤ SSI <order-minicart>
 <!--#include virtual="/order-minibasket“ -->
 </order-minicart> for

    initial server render gets replaced with initial markup by the web server handles lifecycle and triggers client rendering if needed
  14. 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
  15. 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
  16. team a team b Universal Router <home-page /> team a

 id=14 /> <cart-page /> 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
  17. Thanks! Michael Geers frontend developer naltatis on twitter & github

  18. 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