Micro Frontends - YGLF, Tel Aviv

The talk was presented at YGLF 2017 in Tel Aviv, Israel
https://www.youtube.com/watch?v=o1Sr39DVdOQ

Transcript

1. Micro Frontends Break up your web app!
2. technology evolves quickly 2005 2017 ?
3. frontend gets bigger
4. we have a problem …
5. Michael Geers Frontend Engineer naltatis on Twitter & GitHub Bremen, Germany
6. Micro Frontends Verticalized Teams Self Contained Systems Vertical Decomposition UI Composition
7. Architecture
8. The Project Browser Stu!
9. Frontend Backend
10. Frontend Backend Monolith
11. Frontend Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment Microservice Basket Microservice Search Microservice
12. Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment Microservice Basket Microservice Search Microservice API Gateway: REST, BFF, GraphQL, … Frontend
13. Frontend-Monolith Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment Microservice Basket Microservice Search Microservice API Gateway: REST, BFF, GraphQL, … 1.
14. Media Microservice Product Microservice API Gateway: REST, BFF, GraphQL, … Please Implement VR Product Images! Frontend-Monolith Synchronize Multiple Teams Slow Communication, Frustration 2.
15. Customers High Distance to the Customer Abstraction Layers 3.
16. Technical Teams Specialize in a Technology
17. Usecase Teams vs. Technical Teams Satisfy Customer Needs
18. Get Inspired Decide What’s Best Buy It Customer Needs in E-Commerce
20. End-to-End Teams / Micro Frontends Team Inspire Team Decide Team Checkout
21. Team Inspire End-to-End Teams / Micro Frontends Team Decide Team Checkout frontend included
22. 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
24. Team Decide owns the page Team Inspire provides a fragment Team Checkout
 provides two fragments
25. How to integrate?
26. Web Components HTML Imports Custom Elements Shadow DOM HTML Template
27. Web Components HTML Imports Custom Elements Shadow DOM HTML Template
28. Custom Elements <checkout-basket></checkout-basket> https://developers.google.com/web/fundamentals/getting-started/primers/customelements
29. class CheckoutBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini basket ...';
 }
 }
 customElements.define('checkout-basket', CheckoutBasket); Custom Elements !"" Choo
30. 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
31. Custom Elements v1
 API stabilized end of last year Browser Support in development under consideration
32. 
 https://github.com/WebReflection/document-register-element Browser Support with Polyfill (5KB) 11
33. <inspire-reco sku="t_red">
 </inspire-reco> <checkout-basket>
 </checkout-basket> <checkout-buy sku="t_red">
 </checkout-buy>
34. <inspire-reco sku="t_red">
 </inspire-reco> <checkout-basket>
 </checkout-basket> <checkout-buy sku="t_red">
 </checkout-buy> t_green t_green
35. the DOM is the API Teams publish their Custom Elements Documentation Element-Name, Attributes, Events
36. Framework Support Rob Dodson
 @robdodson custom-elements-everywhere.com Interoperability Test Suite for Frameworks
37. But Progressive Enhancement?
38. But Progressive Enhancement?
39. No Universal Web Components
40. <inspire-reco sku="t_red"></inspire-reco> el.innerHTML = "<h3>Related Products</h3><ul>…") Browser Rehydration & User Interaction /inspire-reco?sku=t_red res.send("<h3>Related Products</h3><ul>…") Server Initial Render
41. SSI Server Side Includes <!--#include virtual="/some-url" -->
42. Google Books 2001
43. Google Books 2001 The easiest way to import external content into a Web page is to use a server-side include.
44. Custom Elements ❤ SSI <inspire-reco sku="t_red">
 <!--#include virtual="/inspire-reco?sku=t_red" -->
 </inspire-reco> server client
45. <inspire-reco sku="t_red">
 <!--#include virtual="/inspire-reco?sku=t_red" -->
 </inspire-reco> <checkout-basket>
 <!--#include virtual="/checkout-basket" -->
 </checkout-basket> <checkout-buy sku="t_red">
 <!--#include virtual="/checkout-buy?sku=t_red" -->
 </checkout-buy>
46. Page Transitions
47. 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
48. Top Level Router Shared Universal Router & Page Fragments HTML Shell with Router <a-product id="12">
 </a-product> <a-list name="toy">
 </a-list> <b-success>
 </b-success> <b-cart>
 </b-cart> const routes = { '/:name': 'a-list', '/p/:id': 'a-product', '/cart': 'b-cart',
 '/success': 'b-success' } Page-Fragments Needs Shared Global Code!
49. Things we’ve learned
50. Use Browser API don’t build a meta framework
 avoid shared code
51. Isolate Teams don’t share runtime, state or globals
52. Talk to your Neighbors share best practices
53. Pack light register custom elements immediately
 download code when needed
54. Measure Performance HTTP/2 is great, optimize but don’t overoptimize
55. Ownership is important use team prefixes when needed
56. Have a Design System build a Style Guide or Pattern Library everybody can use
57. Thanks for Listening micro-frontends.org @naltatis
58. Synchronizing Multiple Teams
59. 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