Web UI - Patterns & Practices

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

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

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

MICRO FRONTENDS

BACKEND FRONTEND

FRONTEND SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES

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

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

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

MICRO FRONTENDS

PAGE COMPOSITION <body> <red-details> <blue-basket></blue-basket> <green-recos></green-recos> </red-details> </body> Team Checkout
Team Product Team Inspire

MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>
 Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"> <span id="label"></span>
<button id="incButton">+</button> <button id="decButton">-</button> … </div> </body> </html>  Global Scoping  Namenskonflikte  Styling-Konflikte

<html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"
maximum="1"> </number-pad> </body> </html>  Semantik  Local Scoping  Konfiguration  Bundle Import

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

<html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"
maximum="1"> </number-pad> </body> </html> Custom Elements HTML Imports Shadow DOM HTML Templates

CUSTOM ELEMENTS DEFINITION  Eigene HTML-Elemente erstellen  Das Verhalten
ist vom Dokument entkoppelt  Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …) <my-person firstName="Jörg"></my-person>

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

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

HTML TEMPLATES DEFINITION  HTML Element <template>  Enthält Content
der nach dem Laden nicht direkt gerendert wird  Wird erst bei Verwendung gerendert  Das Fragment kann im Dokument wiederverwendet werden <table id="producttable"> <thead> <tr> <td>Nr.</td> <td>Name</td> </tr> </thead> <tbody>  </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template>

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.

SHADOW DOM - STYLING FUNKTIONSWEISE  Über <style> 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; }</style>';

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

<div id="frame"> <span> <span id="label"></span> <slot name="addition"></slot> </span> <button id="increment-button">+</button>
<button id="decrement-button">-</button> </div> <number-pad value="3" minimum="1" maximum="5"> <span slot="addition">kg</span> </number-pad> Verwendung: Template: SHADOW DOM - COMPOSITION DEFINITION  Ermöglicht das Einbetten von benutzerdefinierten Elementen  <slot>-Element im Template dient als Platzhalter  slot-Eigenschaft im Host stellt die Verbindung her

HTML IMPORTS DEFINITION  Dienen zum Paketieren von Komponenten 
Kann CSS und JavaScript enthalten  Einbindung erfolgt über: <link rel="import">  Wird zukünftig von ES6-Modulen abgelöst <html> <head> <title>Human Being</title> <link rel="import" href="/imports/heart.html"> </head> <body> <p>What is a body without a heart?</p> </body> </html> 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');

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

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

WEB COMPONENT POLYFILLS FUNKTIONSWEISE  Rüstet partiell fehlende Features nach
 Funktioniert in neueren Browsern  Asynchroner Ladevorgang <html> <head>  <script src="…/webcomponentsjs/webcomponents-loader.js"> </script> <script> window.addEventListener('WebComponentsReady', function() {  class MyElement extends HTMLElement { … } }); </script> </head> <body> <my-element></my-element> </body> </html>

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

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

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

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, …)

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

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

Organism Atom Molecule Template

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

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

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

1 2 3 DESKTOP 1 2 3 MOBILE

FLEXIBLE AUSRICHTUNG

Umgang mit Bildern

UMGANG MIT BILDERN

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

Web UI - Patterns & Practices

Web UI - Patterns & Practices

More Decks by Jörg Neumann

Other Decks in Programming

Featured

Transcript