Frontend

Monolithen

 Eine einvernehmliche Trennung?

Elisabeth Engel

@_lizzelo_

@_lizzelo_

Seiteneffekte

Komplexität

Abhängigkeiten

Koordination

Schwer neu einzusteigen

Prozess-Exzesse

Kaum Innovation

Migrieren?

@_lizzelo_

Microservices

werden kommen und uns retten!

Keep It

Simple & Stupid

@_lizzelo_

Wie's halt so geht

Backend

Microservices

Frontend

Frontend ?

@_lizzelo_

@_lizzelo_

1 Firma = 1 Website

mit Frontend Technologien

Speed Dating

https://www.flickr.com/photos/lmdo/6404420503

/home

/content

/settings

→

→

→

Links

↔

Links

↔

@_lizzelo_

<html>
     <body>

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

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

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

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

     </body>
</html>

@_lizzelo_

/home

/content

/settings

→

→

→

iFrames ?!?

CMS

Links

↔

Links

↔

→

→

@_lizzelo_

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

→

→

→

→

→

→

→

@_lizzelo_

Seiten Template

<html>
     <body>

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

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

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

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

     </body>
</html>

@_lizzelo_

Server Side Includes (SSI)

/home

/content

/settings

→

Transklusion

→

→

→

→

→

→

→

@_lizzelo_

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

@_lizzelo_

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_

@_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

@_lizzelo_

Ernsthaft !?!?

https://unsplash.com/photos/TdM_fhzmWog

/home

/content

/settings

→

App Shell

→

→

→

@_lizzelo_

App Shell

→

/content

→

@_lizzelo_

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

→

@_lizzelo_

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

@_lizzelo_

Initialisierung

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

App Shell

→

→

JS

CSS

App Shell

@_lizzelo_

/home

/content

/settings

→

App Shell

@_lizzelo_

→

→

→

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

@_lizzelo_

Modularität

Alltags-

tauglichkeit

MB

CPU

Produktivität

@_lizzelo_

vs.

Framework

unabhängig

Modularität

Zweites Date

Mitgliederbereich

SEO Bereich

@_lizzelo_

Sollen wir?

@_lizzelo_

App Shell

[Micro Frontends]

@_lizzelo_

klein genug für 1 Team

Produktion unabhängig

Framework unabhängig

kurze Ladezeiten

nativ einsetzbar

einheitliches Erscheinungsbild

geteilte Basis

flüssige Interaktionen

Modularität

Komplexe Umgebung

Build Skripte

Fehlerbehandlung

Redundanz

Geteilte Bibliotheken

😳

🤔

🙄

 

😇

🤕

Unabhängigkeit

Leicht zu testen

Einsteiger freundlich

🎉

🎉

🎉

zukunftssicher

Resilienz

🎉

🎉

Wartbar

🎉

[Micro Frontends]

@_lizzelo_

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);

Billy D Stagg - https://uxdesign.cc/cutting-the-fat-from-product-design-5b01b28ff8ed

https://www.saga.co.uk/magazine/technology/mobile-tablet/phones-and-tablets/2016/make-your-smartphone-easier-to-read

http://pro-pedikur.ru/wp-content/uploads/2016/05/noski.jpg

vs.

Pixel Perfect Design

[kein Kommentar]

Billy D Stagg - https://uxdesign.cc/cutting-the-fat-from-product-design-5b01b28ff8ed

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

Living Styleguide 

Style-
guide

komplette Integration

nur CSS

nach Bedarf

React
Version

nur CSS

Nach der Trennung

@_lizzelo_

Youtube: Micro Frontends

Zeef: Micro Frontends

Umschauen

http://bit.ly/2zIhQzd

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

@_lizzelo_

Dating

@_lizzelo_

Nichts Überstürzen

Klein anfangen

Erstmal in einem Repository

Namenskonventionen

Review & Feedback

@_lizzelo_

👶🏼

👶🏻

👶🏽

👶🏾

gründe eine

Micro Frontend Familie!

Nach der Trennung

vom

Frontend Monolithen

@_lizzelo_

Danke ans Team

Folien und Gimmick:

@_lizzelo_

engel@interfacewerk.de

Credits

gutefrage.net GmbH

interfacewerk GmbH

 

Katharina Brinck

Thomas Zolynski

François Godet

Johannes Weber

Sebastian Ullherr

 

Pixabay