Micro

Frontends

Elisabeth Engel

Seiteneffekte

Komplexität

Abhängigkeiten

Koordination

Schwer neu einzusteigen

Prozess-Exzesse

Kaum Innovation

Migrieren?

Wie's halt so geht

Backend

Microservices

Frontend

Frontend ?

1 Firma = 1 Website

mit Frontend Technologien

/home

/content

/settings

Links

Links

<html>
     <body>

        <div class="navigation">...</div>

        <div class="content">...</div>

        <div class="sidebarA">...</div>

        <div class="sidebarB">...</div>

     </body>
</html>
 

/home

/content

/settings

iFrames ?!?

CMS

Links

Links

klein genug für 1 Team

5  bestanden

4  fehlgeschlagen

Produktion unabhängig

Framework unabhängig

kurze Ladezeiten

nativ einsetzbar

einheitliches Erscheinungsbild

geteilte Basis

flüssige Interaktionen

Modularität

/home

/content

/settings

Transklusion

Seiten Template

<html>
     <body>

        <!--#include virtual="/navigation" -->

        <!--#include virtual="/content" -->

        <!--#include virtual="/sidebar?version=A" -->

        <!--#include virtual="/sidebar?version=B" -->

     </body>
</html>
 

Server Side Includes (SSI)

/home

/content

/settings

Transklusion

klein genug für 1 Team

6  bestanden

3  fehlgeschlagen

Produktion unabhängig

Framework unabhängig

kurze Ladezeiten

nativ einsetzbar

einheitliches Erscheinungsbild

geteilte Basis

flüssige Interaktionen

Modularität

Perspektiven Wechsel?

https://unsplash.com/photos/kvv5bm1dgc8

/home

/content

/settings

Integration im Code

Bundle

Lazy

Loading

Web Components

klein genug für 1 Team

6  bestanden

3  fehlgeschlagen

Produktion unabhängig

Framework unabhängig

kurze Ladezeiten

nativ einsetzbar

einheitliches Erscheinungsbild

geteilte Basis

flüssige Interaktionen

Modularität

Web Components

<html>
     <body>

          <navigation></navigation>

          <content></content>

          <sidebar version="A"></sidebar>

          <sidebar version="B"></sidebar>

     </body>
</html>
 

@_lizzelo_


class NewHTMLElement extends HTMLElement {

  createdCallback() {...}

  attachedCallback() {...}

  attributeChangedCallback(attr, oldVal, newVal) {...}

  detachedCallback() {...}
}


document.registerElement('new-tag', NewHTMLElement);
  

@_lizzelo_


class ContentElement extends HTMLElement {

  createdCallback() {
   this.addInputField();
   this.addSubmitButton();
   this.listenToSubmit();
 }

  ... 

}

document.registerElement('content', ContentElement);
  
<html>
 <body>

  <navigation></navigation>

  <content></content>

  <sidebar version="A"></sidebar>

  <sidebar version="B"></sidebar>

 </body>
</html>

Submit

Ernsthaft !?!?

https://unsplash.com/photos/TdM_fhzmWog

/home

/content

/settings

App Shell

App Shell

/content

Routen

const routeEntries = [
  {
    name: 'home', 
    path: 'xy.com/home'
  },
  {
    name: 'content',
    path: 'xy.com/content'
  },
  {
    name: 'settings',
    path: 'xy.com/settings'
  }
}

/content

xy.com/content

Laden via Manifest Dateien

{
 "name": "Content",
 "version": "1.0.1",
 "content": {
   "js": [
     "/js/bundle.min.js"
    ],
   "css": [
     "/css/style.min.css"
    ]
 }
}

App Shell

JS

CSS

xy.com/content

Initialisierung

window.xy.content.init(
    applicationUrl, 
    path, 
    dependencies,
    ...
)

App Shell

JS

CSS

App Shell

/home

/content

/settings

App Shell

klein genug für 1 Team

6  bestanden

3  Herausforderungen

Produktion unabhängig

Framework unabhängig

kurze Ladezeiten

nativ einsetzbar

einheitliches Erscheinungsbild

geteilte Basis

flüssige Interaktionen

Modularität

Framework

unabhängig

Modularität

Alltags-

tauglichkeit

MB

CPU

Produktivität

vs.

Framework

unabhängig

Modularität

Komplexe Umgebung

Build Skripte

Fehlerbehandlung

Redundanz

Geteilte Bibliotheken

😳

🤔

🙄

 

😇

🤕

Unabhängigkeit

Leicht zu testen

Einsteiger freundlich

🎉

🎉

🎉

zukunftssicher

Resilienz

🎉

🎉

Wartbar

🎉

[Micro Frontends]

Konsistente UX?

https://unsplash.com/photos/re2LZOB2XvY

Look

&

Feel

?

?

?

?

Styleguide

Schriftart: League Spartan
Schriftfarbe: #28A2FF
Schriftgröße: 30 Punkt

Schriftart: Lato
Schriftstil: hervorgehoben
Hintergrundfarbe: #FF793F

Überschrift

Button

CSS

Überschrift

Button

font-family: 'League Spartan', sans-serif;
color: #28A2FF;
font-size: 4rem;
...
font-family: 'Lato', sans-serif;
background-color: #FF793F;
font-weight: 600;
...

CSS + JS

Bereitstellung z.B. per CDN oder CMS

Überschrift mit Tooltip

Button mit Dialog

addEventListener(
    'click', openDialog);
addEventListener(
    'mouseenter', showTooltip);
addEventListener(
    'mouseleave', removeTooltip);

https://github.com/interfacewerk/iwerk-angular-ui

Living Styleguide 

Style-
guide

komplette Integration

nur CSS

nach Bedarf

React
Version

nur CSS

Youtube: Micro Frontends

Zeef: Micro Frontends

Umschauen

http://bit.ly/2zIhQzd

https://www.youtube.com/playlist?list=PLI1AtZo9B3YL_xpi19IuxFcTuCi2_thQT

Leitplanken

Klein anfangen

Erstmal in einem Repository

Namenskonventionen

Review & Feedback

Danke ans Team

Credits

gutefrage.net GmbH

interfacewerk GmbH

 

Katharina Brinck

Thomas Zolynski

François Godet

Johannes Weber

Sebastian Ullherr

 

Pixabay

Micro Frontends

By Elisabeth Engel

Micro Frontends

German Version - 2018

  • 1,690