Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends - YGLF, Tel Aviv

Michael Geers
October 31, 2017

Micro Frontends - YGLF, Tel Aviv

The talk was presented at YGLF 2017 in Tel Aviv, Israel

Michael Geers

October 31, 2017

More Decks by Michael Geers

Other Decks in Technology


  1. Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment Microservice

    Basket Microservice Search Microservice API Gateway: REST, BFF, GraphQL, … Frontend
  2. Frontend-Monolith Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment

    Microservice Basket Microservice Search Microservice API Gateway: REST, BFF, GraphQL, … 1.
  3. Media Microservice Product Microservice API Gateway: REST, BFF, GraphQL, …

    Please Implement VR Product Images! Frontend-Monolith Synchronize Multiple Teams Slow Communication, Frustration 2.
  4. 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
  5. Team Decide owns the page Team Inspire provides a fragment

    Team Checkout
 provides two fragments
  6. class CheckoutBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini

    basket ...';
 customElements.define('checkout-basket', CheckoutBasket); Custom Elements !"" Choo
  7. Element Lifecycle class CheckoutBasket extends HTMLElement { constructor() {...}

 attributeChangedCallback(attr, oldVal, newVal) {...}
 disconnectedCallback() {...}
 } is created attached to DOM removed from DOM, cleanup! someone change an attribute
  8. Custom Elements v1
 API stabilized end of last year Browser

    Support in development under consideration
  9. the DOM is the API Teams publish their Custom Elements

    Documentation Element-Name, Attributes, Events
  10. <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
  11. Google Books 2001 The easiest way to import external content

    into a Web page is to use a server-side include.
  12. <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" -->
  13. 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
  14. 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!
  15. 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