Tweet
Tweet

Slide 1

Slide 1 text

Micro Frontends Think Smaller, Avoid the Monolith Love the Backend Web Rebels, Oslo 2018 | Michael Geers

Slide 2

Slide 2 text

technology evolves quickly 2005 2018 ?

Slide 3

Slide 3 text

frontend gets bigger

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Michael Geers Frontend Engineer naltatis on Twitter & GitHub Bremen, Germany e-commerce

Slide 6

Slide 6 text

Micro Frontends Microservices in the Frontend? ! Small Frontends?

Slide 7

Slide 7 text

Micro Frontends Verticalized Teams Self Contained Systems Vertical Decomposition UI Composition

Slide 8

Slide 8 text

How to implement? Why is it better? What is it?

Slide 9

Slide 9 text

Backend Frontend The Project

Slide 10

Slide 10 text

Backend Frontend Backend Frontend

Slide 11

Slide 11 text

Team Inspire Team Search Team Decide Team Checkout Backend Frontend Frontend Teaser Service Product Service Price Service Availability Service Payment Service Basket Service Customer Service API Gateway (Rest, BFF, GraphQL, …) Microservice Architecture

Slide 12

Slide 12 text

Backend Frontend Team Inspire Micro Frontends Team Search Team Decide Team Checkout

Slide 13

Slide 13 text

Backend Frontend Team Inspire Self Contained Systems Team Search Team Decide Team Checkout has its own Technology Stack ships its Own UI is run by a Cross Functional Team stores its Own Data is assigned a Specific Mission smells like a Fat & T all Microservice

Slide 14

Slide 14 text

How we use this 4 projects
 e-commerce 2-7 teams per project 4-8 people per team

Slide 15

Slide 15 text

Others who work like this Ikea Zalando Otto O!ce 365 AutoScout24 Facebook Amazon? Hello Fresh gutefrage Spotify

Slide 16

Slide 16 text

Why Micro Frontends?

Slide 17

Slide 17 text

Development Speed

Slide 18

Slide 18 text

Small Autonomous Teams with a clear mission

Slide 19

Slide 19 text

Customer Focus every team ships directly no pure api teams

Slide 20

Slide 20 text

Reduced Scope

Slide 21

Slide 21 text

Reduced Scope everything fits
 into memory again ❤ my

Slide 22

Slide 22 text

Frontend Renovation without throwing everything away

Slide 23

Slide 23 text

How to implement?

Slide 24

Slide 24 text

Team Inspire Team Decide Team Checkout Homepage Product List Product Details Basket Success A Page is Owned by one Team connected via Links … …

Slide 25

Slide 25 text

Team Decide owns the page Team Inspire provides a fragment Team Checkout
 provides two fragments

Slide 26

Slide 26 text

Integration in the Browser

Slide 27

Slide 27 text

Web Components HTML Imports Custom Elements Shadow DOM HTML Template

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

class CheckoutBasket extends HTMLElement { connectedCallback() { this.innerHTML = 'mini basket ...';
 }
 }
 customElements.define('checkout-basket', CheckoutBasket); Custom Elements

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Custom Elements by Default Angular
 Elements hyperHTML Element

Slide 32

Slide 32 text

Custom Elements v1
 API stabilized end of 2016 Browser Support under consideration in nightly

Slide 33

Slide 33 text


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

Slide 34

Slide 34 text


 
 


Slide 35

Slide 35 text


 
 
 t_green t_green

Slide 36

Slide 36 text

the DOM is the API Teams publish their Custom Elements documentation Element-Name, Attributes, Events

Slide 37

Slide 37 text

Framework Support Rob Dodson
 @robdodson custom-elements-everywhere.com Interoperability Test Suite for Frameworks

Slide 38

Slide 38 text

But Progressive Enhancement?

Slide 39

Slide 39 text

But Progressive Enhancement?

Slide 40

Slide 40 text

Resilient Web Design Jeremy Keith
 @adactio

Slide 41

Slide 41 text

Integration on the Server

Slide 42

Slide 42 text

SSI Server Side Includes

Slide 43

Slide 43 text

Google Books 2001

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Server Side Includes Server Team Decide nginx Server Team Checkout /red-tractor

Slide 46

Slide 46 text

Server Side Includes Server Team Decide nginx Server Team Checkout /red-tractor /red-tractor

Slide 47

Slide 47 text

Server Side Includes Server Team Decide nginx Server Team Checkout /red-tractor

Tractor

/red-tractor

Slide 48

Slide 48 text

Server Side Includes Server Team Decide nginx Server Team Checkout /red-tractor

Tractor

/checkout/basket /checkout/buy /red-tractor

Slide 49

Slide 49 text

Server Side Includes Server Team Decide nginx Server Team Checkout /red-tractor

Tractor

/checkout/basket /checkout/buy /red-tractor buy for 66 € 0 items 0 items

Tractor

buy for 66 €

Slide 50

Slide 50 text

No Universal Web Components

Slide 51

Slide 51 text

el.innerHTML = "

Related Products

    …") Browser Rehydration & User Interaction /inspire-reco?sku=t_red res.send("

    Related Products

      …") Server Initial Render

Slide 52

Slide 52 text

Custom Elements ❤ SSI 
 
 server client

Slide 53

Slide 53 text


 
 
 
 
 


Slide 54

Slide 54 text

Page Transitions

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Top Level Router Shared Universal Router & Page Fragments HTML Shell with Router 
 
 
 
 const routes = { '/:name': 'a-list', '/p/:id': 'a-product', '/cart': 'b-cart',
 '/success': 'b-success' } Page-Fragments also take a look at single-spa

Slide 57

Slide 57 text

Shared Fundamentals CSS Resets JS Polyfills Basic Typography Error Reporting? RUM? App Shell? Tracking?

Slide 58

Slide 58 text

Common Design System

Slide 59

Slide 59 text

As Global Stylesheet one globally included css file includes only styling used via css classes Pros -simple solution / easy to use -consistent look Cons -global css tends to grow -no easy way to detect unused css -breaking changes are hard cdn.example.org/global/styleguide.css à la Bootstrap

Slide 60

Slide 60 text

As Versioned Package distributed via npm
 components with template & styling Pros -only used css is shipped -teams can upgrade independently -fragments don’t relay on outer styles Cons -requires build process (webpack, …) -common html-templating needed -temporary visual inconsistencies v1.1 v1.3 v2-beta v1.3

Slide 61

Slide 61 text

#perfmatters

Slide 62

Slide 62 text

Be reasonable! don’t use all frameworks togeher! do you really need a big framework?

Slide 63

Slide 63 text

Measure Performance set a performance budget & know your numbers

Slide 64

Slide 64 text

Some more things …

Slide 65

Slide 65 text

Don’t Share State no shared globals

Slide 66

Slide 66 text

Value Independence its tempting to unify everything

Slide 67

Slide 67 text

Learn from Colleagues teach them how CSS works

Slide 68

Slide 68 text

T alk to your Neighbors share best practices

Slide 69

Slide 69 text

Ownership is important use team prefixes when needed

Slide 70

Slide 70 text

anks for Listening micro-frontends.org @naltatis

Slide 71

Slide 71 text

Colorful Wood Structure Alexas_Fotos
 https://pixabay.com/en/background-colorful-wood- structure-3412048/ Clocks Pixabay
 https://www.pexels.com/photo/london-new-york-tokyo-and- moscow-clocks-48770/ Octan Tower The Lego Movie
 https://www.youtube.com/watch?v=GZT5z4K6uw4
 recaptioned by @peeofive Action Bicycling Roman Pohorecki
 https://www.pexels.com/photo/action-bicycling-bike- biking-287398/ Four Playing Pieces Pixabay
 https://www.pexels.com/photo/set-of-4-wooden-elongated- accessory-209651/ Wooden Counter David Siglin
 https://www.pexels.com/photo/blur-blurry-bokeh-close- up-347139/ The Tool Guy Tirachard Kumtanom
 https://unsplash.com/photos/UuW4psOb388 Woodshop Igor Ovsyannykov
 https://unsplash.com/photos/iXV0i4Wo4yc Unicorn d97jro
 https://pixabay.com/de/lego-einhorn-spielzeug-671593/ Browser Logos Cătălin Mariș
 https://github.com/alrra/browser-logos Broken Escalator Skitterphoto
 https://pixabay.com/photo-1746279
 https://freesound.org/people/dobroide/sounds/15227/ https://freesound.org/people/sittstav/sounds/171665/ Sad Lego Benny Cheezburger
 http://gph.is/1BCRCKh Wired Elements
 https://wiredjs.com/ Tractors Manufactum
 https://www.manufactum.com/tin-toys-c193667/ Credits built with Micro Frontends