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

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

March 25, 2017
Tweet

Transcript

  1. Micro Frontends building a modern webapp with multiple teams

  2. Michael Geers frontend developer naltatis on twitter & github Bremer

    Software-Manufaktur für E-Commerce
  3. Web Components magical creatures of the web

  4. Web Components first talked about in 2011

  5. the web moves fast

  6. https://fivethirtyeight.com/

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

    Project’s Age
  8. User Interaction Improvements server rendered ajax partial updates universal
 rendering

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

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

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

    monolithic SPA
  12. monolithic application

  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
  14. team explore team evaluate team order team search Self Contained

    Systems http://scs-architecture.org/
  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
  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
  17. Web Components HTML Imports Custom Elements Shadow DOM HTML Template

  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
  19. Custom Elements <order-minicart></order-minicart> https://developers.google.com/web/fundamentals/getting-started/primers/customelements

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

    Documentations Element-Name, Attributes, Events
  24. 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
 product="14"
 color="black" />
  25. Communication

  26. 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.
  27. Child-Parent Communication document
 .querySelector('order-button')
 .addEventListener('success', () =>
 alert('tadda!') ) parent

    listens for DOM event on child
  28. Sibling Communication document.dispatchEvent(new Event('cartChanged'))
 broadcasting event through the body element

    document.addEventListener('cartChanged', refresh) <order-button /> <order-minicart />
  29. two more things

  30. But Progressive Enhancement?

  31. No Web Components Isomorphic Universal

  32. Server Side Includes (SSI) <!--#include virtual="/minibasket“ --> Edge Side Includes

    (ESI) are an alternative solution
  33. How SSI Works nginx /product/14 evaluate order /product/14 SSI include

    needed
 /minibasket user request user response <h1>Product 14</h1>
 <!—#include virtual="/minibasket“ --> <p>mini cart</p> <h1>Product 14</h1>
 <p>mini cart</p>
  34. 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
  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
  36. broken
 lazy loading Progressive Enhancement hides many bugs … and

    yes, this is a good thing.
  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
  38. team a team b Universal Router <home-page /> team a

    <product-page
 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
  39. 3 Takeaways

  40. Use the DOM, Luke!

  41. Resilience !important

  42. Larger isn’t always Better

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

    speakerdeck.com/naltatis
 github.com/neuland/micro-frontends
  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