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: thomas.reinsch@acando.de
· Twitter: @confector666
· GitHub: https://github.com/confector
· Xing: https://www.xing.com/profile/thomas_reinsch5
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; }';
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
WEB COMPONENT POLYFILLS
FUNKTIONSWEISE
Rüstet partiell
fehlende Features nach
Funktioniert in neueren
Browsern
Asynchroner Ladevorgang
window.addEventListener('WebComponentsReady', function() {
<!-- Web Component Definition -->
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
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, …)
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