Slide 1

Slide 1 text

Micro Frontends building a modern webapp with multiple teams

Slide 2

Slide 2 text

Michael Geers frontend developer naltatis on twitter & github Bremer Software-Manufaktur für E-Commerce

Slide 3

Slide 3 text

Web Components magical creatures of the web

Slide 4

Slide 4 text

Web Components first talked about in 2011

Slide 5

Slide 5 text

the web moves fast

Slide 6

Slide 6 text

https://fivethirtyeight.com/

Slide 7

Slide 7 text

Show me your Frontend Stack … and I’ll tell your Project’s Age

Slide 8

Slide 8 text

User Interaction Improvements server rendered ajax partial updates universal
 rendering

Slide 9

Slide 9 text

rest api components testing routing data flow abstraction convenience frameworks

Slide 10

Slide 10 text

rest api components testing routing data flow abstraction convenience your single page app

Slide 11

Slide 11 text

rest api components testing routing data flow abstraction convenience your monolithic SPA

Slide 12

Slide 12 text

monolithic application

Slide 13

Slide 13 text

micro
 service micro
 service micro
 service micro
 service micro
 service micro
 service micro
 service erp-integration tracking recos teaser search-engine payment newsletter frontend Stefan Tilkov on Frontend Monoliths

Slide 14

Slide 14 text

team explore team evaluate team order team search Self Contained Systems http://scs-architecture.org/

Slide 15

Slide 15 text

Self Contained Systems team search cross functional team mission
 help customers to find the right product end-to-end-development
 communication is easy narrow scope
 doesn't have to know about payment, … doesn't reinforce specialization 
 learning from each other -> full stack

Slide 16

Slide 16 text

Composing a Page mini cart
 2 items shopname product name add to cart products you might like color: black white team
 evaluate team
 order team
 explore

Slide 17

Slide 17 text

Web Components HTML Imports Custom Elements Shadow DOM HTML Template

Slide 18

Slide 18 text

People want component-oriented development experience, and interoperability. Currently web component is trying to solve both of them, but it turns out that it doesn’t solve the development experience issue very well on its own. IMO it is better if the spec focuses on interoperability alone, and leaves the dev experience part to frameworks. https://hacks.mozilla.org/2015/06/the-state-of-web-components/#comment-17855 The State of Web Components Evan You
 @youyuxi | Creator of vue.js

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Custom Elements class OrderMinicart extends HTMLElement { connectedCallback() { this.innerHTML = 'mini cart ...';
 }
 }
 customElements.define('order-minicart', OrderMinicart); https://developers.google.com/web/fundamentals/getting-started/primers/customelements

Slide 21

Slide 21 text

Browser Support Reliable Polyfill available (using Mutation Observers)
 https://github.com/WebReflection/document-register-element Custom Elements v1
 API stabilized end of last year supported in Chrome, Opera & Safari
 Firefox: in development
 Edge: under consideration

Slide 22

Slide 22 text

Element Lifecycle class OrderMinicart extends HTMLElement { constructor() {...}
 connectedCallback() {...}
 attributeChangedCallback(attr, oldVal, newVal) {...}
 disconnectedCallback() {...}
 }
 customElements.define('order-minicart', OrderMinicart); an element instance was created element was attached to the DOM element was removed from the DOM, cleanup someone change an attribute

Slide 23

Slide 23 text

The DOM-Element is the API Teams publish their Custom Element Documentations Element-Name, Attributes, Events

Slide 24

Slide 24 text

Custom Elements = Team Borders mini cart
 2 items product name add to cart products you might like color: black white team
 evaluate

Slide 25

Slide 25 text

Communication

Slide 26

Slide 26 text

Parent-Child Communication white parent updates attribute on child * Providing imperative methods like document.querySelector('video').pause() is also possible.

Slide 27

Slide 27 text

Child-Parent Communication document
 .querySelector('order-button')
 .addEventListener('success', () =>
 alert('tadda!') ) parent listens for DOM event on child

Slide 28

Slide 28 text

Sibling Communication document.dispatchEvent(new Event('cartChanged'))
 broadcasting event through the body element document.addEventListener('cartChanged', refresh)

Slide 29

Slide 29 text

two more things

Slide 30

Slide 30 text

But Progressive Enhancement?

Slide 31

Slide 31 text

No Web Components Isomorphic Universal

Slide 32

Slide 32 text

Server Side Includes (SSI) Edge Side Includes (ESI) are an alternative solution

Slide 33

Slide 33 text

How SSI Works nginx /product/14 evaluate order /product/14 SSI include needed
 /minibasket user request user response

Product 14

mini cart

Product 14

mini cart

Slide 34

Slide 34 text

Custom Elements ❤ SSI 
 
 for initial server render gets replaced with initial markup by the web server handles lifecycle and triggers client rendering if needed

Slide 35

Slide 35 text

Progressive Enhancement is like building a safety net. You can think of it as Technical Credit. https://www.youtube.com/watch?v=KxsCWCjEi2Q Jeremy Keith
 @adactio | Author of Resilient Web Design

Slide 36

Slide 36 text

broken
 lazy loading Progressive Enhancement hides many bugs … and yes, this is a good thing.

Slide 37

Slide 37 text

Page Transitions team a team b inside team soft navigation 
 client rendered between teams hard navigation 
 server rendered single page app
 with router single page app
 with router multiple single page apps

Slide 38

Slide 38 text

team a team b Universal Router team a const routes = { '/': 'home-page', '/p/:id': 'product-page', '/cart': 'cart-page', } simple page components without router client router
 updates page component according to browser url history api & custom elements /p/14 /p/15 /cart

Slide 39

Slide 39 text

3 Takeaways

Slide 40

Slide 40 text

Use the DOM, Luke!

Slide 41

Slide 41 text

Resilience !important

Slide 42

Slide 42 text

Larger isn’t always Better

Slide 43

Slide 43 text

Thanks! Michael Geers frontend developer naltatis on twitter & github speakerdeck.com/naltatis
 github.com/neuland/micro-frontends

Slide 44

Slide 44 text

herbert2512 - Architecture https://pixabay.com/photo-1934703/ d97jro - Lego Unicorn https://pixabay.com/photo-671593/ ThePixelman - Sparkle Girl https://pixabay.com/photo-529013/ Thanks to the Photographers Alexas_Fotos - Lego Benny https://pixabay.com/photo-674609/ Skitterphoto - Broken Escalator https://pixabay.com/photo-1746279/ Sad Lego Benny http://gph.is/1BCRCKh