Micro Frontends: Building a modern webapp with multiple teams

The talk was presented on JSUnconf.eu 2017 in Hamburg

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