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. 12.

    Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment Microservice

    Basket Microservice Search Microservice API Gateway: REST, BFF, GraphQL, … Frontend
  2. 13.

    Frontend-Monolith Reco Microservice Teaser Microservice Media Microservice Product Microservice Payment

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

    Media Microservice Product Microservice API Gateway: REST, BFF, GraphQL, …

    Please Implement VR Product Images! Frontend-Monolith Synchronize Multiple Teams Slow Communication, Frustration 2.
  4. 19.
  5. 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
  6. 23.
  7. 24.

    Team Decide owns the page Team Inspire provides a fragment

    Team Checkout
 provides two fragments
  8. 29.

    class CheckoutBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini

    basket ...';
 }
 }
 customElements.define('checkout-basket', CheckoutBasket); Custom Elements !"" Choo
  9. 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
  10. 31.

    Custom Elements v1
 API stabilized end of last year Browser

    Support in development under consideration
  11. 35.

    the DOM is the API Teams publish their Custom Elements

    Documentation Element-Name, Attributes, Events
  12. 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
  13. 43.

    Google Books 2001 The easiest way to import external content

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