Web UI - Patterns & Practices

Web UI - Patterns & Practices

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

October 14, 2019
Tweet

Transcript

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

  2. 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
  3. JÖRG NEUMANN THEMEN · Mobility, UI Technologies, Machine Learning ·

    Consulting, Coaching, Training KONTAKT · Mail: Neumann.Joerg@Outlook.de · Twitter: @JoergNeumann · GitHub: https://github.com/JoergNeumann · Blog: www.HeadWriteLine.BlogSpot.com
  4. None
  5. MICRO FRONTENDS

  6. BACKEND FRONTEND

  7. FRONTEND SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES

  8. FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1

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

    SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS SELF-CONTAINED SYSTEM
  10. DOCUMENTS (content centric) THE DOCUMENT TO APPLICATION CONTINUUM APPLICATIONS (behavior

    centric) Quelle: Aral Balkan WEB SITES WEB APPS server-side rendering client-side rendering
  11. MICRO FRONTENDS

  12. PAGE COMPOSITION <body> <red-details> <blue-basket></blue-basket> <green-recos></green-recos> </red-details> </body> Team Checkout

    Team Product Team Inspire
  13. MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

  14. MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

  15. <div></div>

  16. <html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>

     Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit
  17. <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
  18. <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
  19. 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
  20. <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
  21. DEMO

  22. 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>
  23. 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);
  24. DEMO

  25. 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
  26. DEMO

  27. 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> <!-- wird dynamisch mit inhalt gefüllt --> </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template>
  28. DEMO

  29. 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.
  30. DEMO

  31. 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>';
  32. 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
  33. <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
  34. DEMO

  35. 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');
  36. BROWSER-KOMPATIBILITÄT CUSTOM ELEMENTS V1 HTML TEMPLATES SHADOW DOM V1 HTML

    IMPORTS
  37. 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
  38. WEB COMPONENT POLYFILLS FUNKTIONSWEISE  Rüstet partiell fehlende Features nach

     Funktioniert in neueren Browsern  Asynchroner Ladevorgang <html> <head> <!-- Load polyfills --> <script src="…/webcomponentsjs/webcomponents-loader.js"> </script> <script> window.addEventListener('WebComponentsReady', function() { <!-- Web Component Definition --> class MyElement extends HTMLElement { … } }); </script> </head> <body> <my-element></my-element> </body> </html>
  39. DEMO

  40. 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
  41. MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

  42.  Hypothese aufstellen  Metriken definieren  Minimum Viable Product

    implementieren  Nutzungsdaten sammeln  Feedback aufnehmen Daten analysieren Hypothese bewerten IDEA BUILD LEARN MEASURE DATA CODE LEAN STARTUP
  43. 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
  44. DEMO

  45. MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

  46. 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, …)
  47. DEMO

  48. 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
  49. DEMO

  50. 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
  51. Organism Atom Molecule Template

  52. DEMO

  53. 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
  54. DEMO

  55. 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
  56. DEMO

  57. MICRO FRONTEND WEB COMPONENTS PATTERN LIBS FLEXIBLES LAYOUT STORY BOARDS

  58. 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
  59. 1 2 3 DESKTOP 1 2 3 MOBILE

  60. DEMO

  61. FLEXIBLE AUSRICHTUNG

  62. Umgang mit Bildern

  63. UMGANG MIT BILDERN

  64. DEMO

  65. 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
  66. Q & A