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!
   

   View Slide

2. technology evolves quickly
   2005 2017
   ?
   

   View Slide

3. frontend gets bigger
   

   View Slide

4. we have a problem …
   

   View Slide

5. Michael Geers
   Frontend Engineer
   naltatis
   on Twitter & GitHub
   Bremen, Germany
   

   View Slide

6. Micro Frontends
   Verticalized Teams
   Self Contained Systems
   Vertical Decomposition
   UI Composition
   

   View Slide

7. Architecture
   

   View Slide

8. The Project
   Browser Stu!
   

   View Slide

9. Frontend
   Backend
   

   View Slide

10. Frontend
    Backend Monolith
    

    View Slide

11. Frontend
    Reco
    Microservice
    Teaser
    Microservice
    Media
    Microservice
    Product
    Microservice
    Payment
    Microservice
    Basket
    Microservice
    Search
    Microservice
    

    View Slide

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

    View Slide

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

    View Slide

14. Media
    Microservice
    Product
    Microservice
    API Gateway: REST, BFF, GraphQL, …
    Please Implement
    VR Product Images!
    Frontend-Monolith
    Synchronize Multiple Teams
    Slow Communication, Frustration
    2.
    

    View Slide

15. Customers
    High Distance
    to the Customer
    Abstraction Layers
    3.
    

    View Slide

16. Technical
    Teams
    Specialize in a
    Technology
    

    View Slide

17. Usecase
    Teams
    vs.
    Technical
    Teams
    Satisfy
    Customer
    Needs
    

    View Slide

18. Get Inspired Decide What’s Best Buy It
    Customer Needs in E-Commerce
    

    View Slide

19. View Slide

20. End-to-End Teams / Micro Frontends
    Team
    Inspire
    Team
    Decide
    Team
    Checkout
    

    View Slide

21. Team
    Inspire
    End-to-End Teams / Micro Frontends
    Team
    Decide
    Team
    Checkout
    frontend
    included
    

    View Slide

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
    

    View Slide

23. View Slide

24. Team Decide
    owns the page
    Team Inspire
    provides a fragment
    Team Checkout

    provides two fragments
    

    View Slide

25. How to integrate?
    

    View Slide

26. Web Components
    HTML
    Imports
    Custom
    Elements
    Shadow
    DOM
    HTML
    Template
    

    View Slide

27. Web Components
    HTML
    Imports
    Custom
    Elements
    Shadow
    DOM
    HTML
    Template
    

    View Slide

28. Custom Elements
    
    https://developers.google.com/web/fundamentals/getting-started/primers/customelements
    

    View Slide

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

    }

    }

    customElements.define('checkout-basket', CheckoutBasket);
    Custom Elements
    !""
    Choo
    

    View Slide

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
    

    View Slide

31. Custom Elements v1

    API stabilized end of last year
    Browser Support
    in development
    under consideration
    

    View Slide

32. 

    https://github.com/WebReflection/document-register-element
    Browser Support
    with Polyfill (5KB)
    11
    

    View Slide

33. 

    
    

    
    

    
    

    View Slide

34. 

    
    

    
    

    
    t_green
    t_green
    

    View Slide

35. the DOM is the API
    Teams publish their Custom Elements Documentation
    Element-Name, Attributes, Events
    

    View Slide

36. Framework Support
    Rob Dodson

    @robdodson
    custom-elements-everywhere.com
    Interoperability Test Suite
    for Frameworks
    

    View Slide

37. But Progressive Enhancement?
    

    View Slide

38. But Progressive Enhancement?
    

    View Slide

39. No Universal Web Components
    

    View Slide

40. 
    el.innerHTML = "Related Products…")
    Browser Rehydration & User Interaction
    /inspire-reco?sku=t_red
    res.send("Related Products…")
    Server Initial Render
    

    View Slide

41. SSI Server Side Includes
    
    

    View Slide

42. Google Books
    2001
    

    View Slide

43. Google Books
    2001
    The easiest way to import external content
    into a Web page is to use a server-side
    include.
    

    View Slide

44. Custom Elements ❤ SSI
    

    

    
    server
    client
    

    View Slide

45. 

    

    
    

    

    
    

    

    
    

    View Slide

46. Page Transitions
    

    View Slide

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
    

    View Slide

48. Top Level Router
    Shared Universal Router & Page Fragments
    HTML Shell
    with Router
    id="12">

    
    name="toy">

    
    

    
    

    
    const routes = {
    '/:name': 'a-list',
    '/p/:id': 'a-product',
    '/cart': 'b-cart',

    '/success': 'b-success'
    }
    Page-Fragments
    Needs Shared Global Code!
    

    View Slide

49. Things we’ve learned
    

    View Slide

50. Use Browser API
    don’t build a meta framework

    avoid shared code
    

    View Slide

51. Isolate Teams
    don’t share runtime, state or globals
    

    View Slide

52. Talk to your Neighbors
    share best practices
    

    View Slide

53. Pack light
    register custom elements immediately

    download code when needed
    

    View Slide

54. Measure Performance
    HTTP/2 is great, optimize but don’t overoptimize
    

    View Slide

55. Ownership is important
    use team prefixes when needed
    

    View Slide

56. Have a Design System
    build a Style Guide or Pattern Library everybody can use
    

    View Slide

57. Thanks for Listening
    micro-frontends.org @naltatis
    

    View Slide

58. Synchronizing Multiple Teams
    

    View Slide

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
    

    View Slide