Pro Yearly is on sale from $80 to $50! »

Micro Frontends - YGLF, Tel Aviv

457365e2e75c27f3e1c3a3744f5c5e4b?s=47 Michael Geers
October 31, 2017

Micro Frontends - YGLF, Tel Aviv

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

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

October 31, 2017
Tweet

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
  19. None
  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
  23. None
  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