Web UI - Patterns & Practices

Slide 1

Slide 1 text

Web UI Patterns & Practices Thomas Reinsch | Jörg Neumann

Slide 2

Slide 2 text

THOMAS REINSCH THEMEN · Mobile Web Development · Frontend-Architekturen und Frameworks · UI, UX und SEO KONTAKT · Mail: [email protected] · Twitter: @confector666 · GitHub: https://github.com/confector · Xing: https://www.xing.com/profile/thomas_reinsch5

Slide 3

Slide 3 text

JÖRG NEUMANN THEMEN · Mobility, UI Technologies, Machine Learning · Consulting, Coaching, Training KONTAKT · Mail: [email protected] · Twitter: @JoergNeumann · GitHub: https://github.com/JoergNeumann · Blog: www.HeadWriteLine.BlogSpot.com

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

MICRO FRONTENDS

Slide 6

Slide 6 text

BACKEND FRONTEND

Slide 7

Slide 7 text

FRONTEND SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES

Slide 8

Slide 8 text

FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS

Slide 9

Slide 9 text

FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS SELF-CONTAINED SYSTEM

Slide 10

Slide 10 text

DOCUMENTS (content centric) THE DOCUMENT TO APPLICATION CONTINUUM APPLICATIONS (behavior centric) Quelle: Aral Balkan WEB SITES WEB APPS server-side rendering client-side rendering

Slide 11

Slide 11 text

MICRO FRONTENDS

Slide 12

Slide 12 text

PAGE COMPOSITION Team Checkout Team Product Team Inspire

Slide 13

Slide 13 text

MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

Slide 14

Slide 14 text

MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

Slide 15

Slide 15 text

Slide 16

Slide 16 text

 Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit

Slide 17

Slide 17 text

+ - …

 Global Scoping  Namenskonflikte  Styling-Konflikte

Slide 18

Slide 18 text

 Semantik  Local Scoping  Konfiguration  Bundle Import

Slide 19

Slide 19 text

CUSTOM ELEMENTS Eine API zur Registrierung von eigenen HTML Elementen HTML TEMPLATES UI-Vorlage für eine Komponente SHADOW DOM Kapselung der inneren DOM- Bestandteile eines Elements HTML IMPORTS / ES MODULES Importieren von Komponenten WEB COMPONENTS

Slide 20

Slide 20 text

Custom Elements HTML Imports Shadow DOM HTML Templates

Slide 21

Slide 21 text

DEMO

Slide 22

Slide 22 text

CUSTOM ELEMENTS DEFINITION  Eigene HTML-Elemente erstellen  Das Verhalten ist vom Dokument entkoppelt  Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …)

Slide 23

Slide 23 text

CUSTOM ELEMENTS ENTWICKLUNG  Definition erfolgt in Form von ES6-Klassen  Ableitung von HTMLElement oder vorhandenem Element möglich  Custom Element muss im Browser registriert werden class MyPerson extends HTMLElement { constructor(){ super(); this._firstName = null; } get firstName(){ return this._firstName; } set firstName(newName){ this._firstName = newName; } } customElements.define("my-person", MyPerson);

Slide 24

Slide 24 text

DEMO

Slide 25

Slide 25 text

class MyElement extends HTMLElement { constructor() { super(); } connectedCallback() { // render … } disconnectedCallback() { // release … } attributeChangedCallback(attr, oldValue, newValue) { // refresh … } static get observedAttributes() { return ['myProperty']; } adoptedCallback(oldDocument, newDocument) { // change … } } customElements.define('my-element', MyElement); }); Element wird erstellt Element wurde in ein neues Dokument verschoben Element wurde aus Dokument entfernt Attribut wurde geändert Attribute für Verfolgung registrieren Element registrieren Element wurde ins Dokument eingefügt CUSTOM ELEMENTS – LIFECYCLE METHODS

Slide 26

Slide 26 text

DEMO

Slide 27

Slide 27 text

HTML TEMPLATES DEFINITION  HTML Element  Enthält Content der nach dem Laden nicht direkt gerendert wird  Wird erst bei Verwendung gerendert  Das Fragment kann im Dokument wiederverwendet werden Nr. Name

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

SHADOW DOM DEFINITION  Bietet ein gekapseltes DOM / CSS für eine Komponente FEATURES  Isolated DOM: Lokale Elemente der Komponente sind von außen nicht sichtbar.  Scoped CSS: Lokale CSS-Definitionen wirken sich nur auf die Komponente aus.  Composition: Komponente kann von außen per Markup erweitert werden.  Einfaches CSS: Keine Konflikte mit id/class-Namen von außen.  Produktivität: App besteht aus gekapselten, wiederverwendbaren Komponenten.

Slide 30

Slide 30 text

DEMO

Slide 31

Slide 31 text

SHADOW DOM - STYLING FUNKTIONSWEISE  Über Element im Shadow DOM  Alle Styles sind lokal var shadow = document.querySelector('#host') .attachShadow({mode: 'open'}); shadow.innerHTML = '<span>Some new text</span>' + '<style>span { color: red; }';

Slide 32

Slide 32 text

SHADOW DOM - STYLING CSS SELECTORS  Pseudo-classes: :host, :host(), :host-context()  Pseudo-elements: ::slotted()  Combinator: >>> * :host { display: block; width: fit-content; font-size: 30px; background: #78909c; margin: 1px; padding: 14px; } span { background: white; font-size: 30px; } Document Element (Shadow Host) Shadow Root Content

Slide 33

Slide 33 text

+ -

kg Verwendung: Template: SHADOW DOM - COMPOSITION DEFINITION  Ermöglicht das Einbetten von benutzerdefinierten Elementen  -Element im Template dient als Platzhalter  slot-Eigenschaft im Host stellt die Verbindung her

Slide 34

Slide 34 text

DEMO

Slide 35

Slide 35 text

HTML IMPORTS DEFINITION  Dienen zum Paketieren von Komponenten  Kann CSS und JavaScript enthalten  Einbindung erfolgt über:  Wird zukünftig von ES6-Modulen abgelöst Human Being

What is a body without a heart?

var link = document.querySelector('link[rel=import]'); var heart = link.import; // Access DOM of the document in /imports/heart.html var pulse = heart.querySelector('div.pulse');

Slide 36

Slide 36 text

BROWSER-KOMPATIBILITÄT CUSTOM ELEMENTS V1 HTML TEMPLATES SHADOW DOM V1 HTML IMPORTS

Slide 37

Slide 37 text

BROWSER-KOMPATIBILITÄT Chrome Firefox IE 11+/ Edge Opera Safari 9+ Chrome (Android) Safari (iOS 9+) Template Native Native Partial Native Native Native Native HTML Imports Native Polyfill Polyfill Native Polyfill Native Polyfill Custom Elements Native Polyfill Polyfill Native Partial Native Partial Shadow DOM Native Polyfill Polyfill Native Partial Native Partial

Slide 38

Slide 38 text

WEB COMPONENT POLYFILLS FUNKTIONSWEISE  Rüstet partiell fehlende Features nach  Funktioniert in neueren Browsern  Asynchroner Ladevorgang window.addEventListener('WebComponentsReady', function() {  class MyElement extends HTMLElement { … } });

Slide 39

Slide 39 text

DEMO

Slide 40

Slide 40 text

POLYMER WEB COMPONENTS-FRAMEWORK VON GOOGLE  Version 1.0 wurde 2015 veröffentlicht  Aktuell: Version 3 FEATURES  Einfache Entwicklung von Custom Elements  Two-Way Data Binding  Computed Properties  Conditional & Repeat Templates  Gesture Events  Element Library

Slide 41

Slide 41 text

MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

Slide 42

Slide 42 text

 Hypothese aufstellen  Metriken definieren  Minimum Viable Product implementieren  Nutzungsdaten sammeln  Feedback aufnehmen Daten analysieren Hypothese bewerten IDEA BUILD LEARN MEASURE DATA CODE LEAN STARTUP

Slide 43

Slide 43 text

Design Prozess Development Prozess IDEA BUILD LEARN MEASURE DATA CODE STORYBOARDING STORY PRODUCT OWNER DEVELOPER STAKE HOLDER STORY BOARD  Layout, Style  Behavior DESIGNER STAKE HOLDER

Slide 44

Slide 44 text

DEMO

Slide 45

Slide 45 text

MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

Slide 46

Slide 46 text

PATTERN LIBRARIES DEFINITION  Einheitliche Implementierung eines Style Guides  Erleichtert die Zusammenarbeit zwischen Designern und Entwicklern, sowie zwischen Teams  Zentraler Ablageort für gemeinsam UI-Fragmente (Komponenten, Styles, Assets, …)

Slide 47

Slide 47 text

DEMO

Slide 48

Slide 48 text

Shared Styling (Colors, Fonts, ….) Micro Frontend 1 Micro Service 1 Micro Frontend 2 Micro Service 2 Micro Frontend 3 Micro Service 3 Shared Components (Buttons, Slider, ….) Pattern Library App Shared UI Package Shared UI Package Shared UI Package

Slide 49

Slide 49 text

DEMO

Slide 50

Slide 50 text

http://atomicdesign.bradfrost.com ATOMIC DESIGN ZIEL  Design Konzept zur Organisation von UI-Fragmenten auf einem Screen BUILDING BLOCKS › Atoms – Tag Elements › Molecules – Pairs or Groups of Tags › Organisms – Container incl. Atoms & Molecules › Templates – Configured set of Organisms › Pages – Templates with real content OK Modecule OK Atom Organism

Slide 51

Slide 51 text

Organism Atom Molecule Template

Slide 52

Slide 52 text

DEMO

Slide 53

Slide 53 text

CSS FRAMEWORKS MATERIAL DESIGN  Enthält neben Styles und Layout auch komplexe Komponenten BOOTSTRAP  Enthält vorgefertigte Styles für Standardelemente TAILWIND  Rudimentäre Infrastruktur für Styling und Layout  Enthält keine Komponenten oder vorgefertigte Styles

Slide 54

Slide 54 text

DEMO

Slide 55

Slide 55 text

CSS PREPROCESSORS LESS  Enthält Variablen, Verschachtelung, Mixins, Mathematische Funktionen Sass  Ähnliche Funktionalität wie LESS, aber vereinfachte Syntax  Sehr weit verbreitet in der Community SCSS  Gleiche Funktionalität wie SASS  Syntax orientiert sich an CSS SCSS

Slide 56

Slide 56 text

DEMO

Slide 57

Slide 57 text

MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

Slide 58

Slide 58 text

LAYOUT FLEXBOX  Vertikale und horizontale Positionierung von Elementen  Reagiert dynamisch auf Änderungen des Viewport  Behält immer die Relation zum jeweiligen Parent-Element  Saubere Layouts sind mit Flexbox wesentlich zuverlässiger, schneller und mit weniger Code-Aufwand zu erreichen GRID  Wird durch gängige Frameworks bereitgestellt

Slide 59

Slide 59 text

1 2 3 DESKTOP 1 2 3 MOBILE

Slide 60

Slide 60 text

DEMO

Slide 61

Slide 61 text

FLEXIBLE AUSRICHTUNG

Slide 62

Slide 62 text

Umgang mit Bildern

Slide 63

Slide 63 text

UMGANG MIT BILDERN

Slide 64

Slide 64 text

DEMO

Slide 65

Slide 65 text

ZUSAMMENFASSUNG  Micro Frontends fördern die Skalierung von Projekten durch vertikale Aufteilung  Mit Web Components können die Bereiche der App gekapselt und wiederverwendet werden  Storyboards helfen ein gemeinsames Zielbild der App zu definieren  Pattern Libs helfen bei Organisation von UI-Fragmenten  NPM Module helfen beim Paketieren und Verteilen der Assets  Flexbox und Grid helfen bei der Umsetzung eines flexibles Layouts  Icomoon erstellt responsive Symbol-Grafiken

Slide 66

Slide 66 text

Q & A