DevSession: Web UI Patterns & Practices

Slide 1

Slide 1 text

ACLUE GmbH | info@aclue.de Web UI Patterns & Practices Robin Muller | Jorg Neumann : :

Slide 2

Slide 2 text

JÖRG NEUMANN ROBIN MÜLLER THEMEN  Frontend Technologies  Mobile Development  Machine Learning  Consulting, Coaching, Training KONTAKT  Mail: Joerg.Neumann@Aclue.de  Twitter: @JoergNeumann THEMEN  Machine Learning  Frontend Technologies  Java Fullstack  Consulting, Training KONTAKT  Mail: Robin.Mueller@Aclue.de www.aclue.de

Slide 3

Slide 3 text

https://tinyurl.com/5y5ym7bv DIE SAMPLES

Slide 4

Slide 4 text

DIE DEMOS GITHUB REPOS  HTTPS://GITHUB.COM/ACLUE-DE/FRONTENDWORKSHOP  HTTPS://GITHUB.COM/ACLUE-DE/FRONTENDWORKSHOP_PATTERNLIBRARY  HTTPS://GITHUB.COM/ACLUE-DE/FRONTENDWORKSHOP_STORYBOOK CODEPEN COLLECTION  HTTPS://CODEPEN.IO/COLLECTION/BNRPLE

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 BACKEND

Slide 8

Slide 8 text

FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES FRONTEND 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

MICRO FRONTENDS

Slide 11

Slide 11 text

PAGE COMPOSITION

Slide 12

Slide 12 text

PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

Slide 13

Slide 13 text

PAGE COMPOSITION Team Dashboard Team Header Team Advertising

Slide 14

Slide 14 text

PAGE COMPOSITION

Slide 15

Slide 15 text

DEMO

Slide 16

Slide 16 text

MICRO FRONTEND COMPONENTS LAYOUT DEVOPS KOMMUNIKATION

Slide 17

Slide 17 text

Quelle: https://arngren.net/ LAYOUT

Slide 18

Slide 18 text

LAYOUT

Slide 19

Slide 19 text

DEMO

Slide 20

Slide 20 text

LAYOUT

Slide 21

Slide 21 text

WAS WANN BENUTZEN? GRID LAYOUT  Komposition von Containern  Gesamtlayout einer Webseite  Explizite Anordnung von Bereichen FLEX LAYOUT  Komposition von Inhalten  Positionierung von Container- Elementen  Implizite Anordnung für variable Inhalte

Slide 22

Slide 22 text

EIN LAYOUT FÜR ALLE DEVICES

Slide 23

Slide 23 text

RESPONSIVE DESIGN PATTERNS  RESIZE  REFLOW  REPOSITION  REDESIGN

Slide 24

Slide 24 text

RESIZE

Slide 25

Slide 25 text

DEMO

Slide 26

Slide 26 text

REFLOW

Slide 27

Slide 27 text

DEMO

Slide 28

Slide 28 text

REPOSITION

Slide 29

Slide 29 text

DEMO

Slide 30

Slide 30 text

REDESIGN

Slide 31

Slide 31 text

CONTAINER QUERIES  Seit kurzem unter Chrome und Safari verfügbar  Auch als Polyfill von Google Chrome Labs für alle gängigen Browser https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Slide 32

Slide 32 text

DEMO

Slide 33

Slide 33 text

MICRO FRONTEND COMPONENTS LAYOUT DEVOPS KOMMUNIKATION

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

 Semantik  Local Scoping  Konfiguration  Bundle Import

Slide 36

Slide 36 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 ES MODULES Einbinden von Komponenten WEB COMPONENTS

Slide 37

Slide 37 text

DEMO

Slide 38

Slide 38 text

MICRO FRONTEND LAYOUT COMPONENTS DEVOPS KOMMUNIKATION

Slide 39

Slide 39 text

KOMMUNIKATION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING Kommunikation: • URL-Parameter • Web Components • Custom Dom Events • Broadcast Channel

Slide 40

Slide 40 text

DEMO

Slide 41

Slide 41 text

MICRO FRONTEND LAYOUT COMPONENTS DEVOPS KOMMUNIKATION

Slide 42

Slide 42 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 DEVOPS

Slide 43

Slide 43 text

WAS WIRD BENÖTIGT? ZENTRALES REPOSITORY  Wiederverwendbare Elemente (Komponenten, Styles, Assets, …)  Wer entwickelt neue Elemente?  Wie ist der Prozess? VERFÜGBARKEIT  Bundling als Package  Versionierung  Releases DOKUMENTATION  Testing  Abnahme durch UI/UX  Guidelines für Entwickler

Slide 44

Slide 44 text

DEMO

Slide 45

Slide 45 text

BUNDLING  In ein einzelnes JS-File bundeln  Als ECMAScript Module  Einbinden per Script-Tag  Wird zur Laufzeit der App hinzugefügt  In mehreren Files bundeln  Als NPM Package publishen  Einbinden als versioniertes Package  Wird beim Kompilieren der App hinzugefügt  Erlaubt Tree-shaking

Slide 46

Slide 46 text

BUNDLING https://webpack.js.org/

Slide 47

Slide 47 text

WEBPACK  Meistgenutzter Bundler im Einsatz bei Create React App, Angular CLI und weiteren Frameworks  Wenig out-of-the-box - dafür weitreichenden Support durch Plugins (macht die Config sehr komplex)  Sehr langer Buildprozess https://webpack.js.org/

Slide 48

Slide 48 text

DEMO

Slide 49

Slide 49 text

ESBUILD  10x-100x schneller als andere Buildtools wie Webpack, Parcel oder Rollup*  Nativer Support für ES6, TypeScript, JSX und mehr  Noch sehr neu (Stand April 2022 in v0.14), gewinnt aber immer mehr Aufmerksamkeit https://esbuild.github.io/ * https://esbuild.github.io/faq/#why-is-esbuild-fast

Slide 50

Slide 50 text

DEMO

Slide 51

Slide 51 text

PATTERN LIBRARY VERFÜGBAR MACHEN NPM  Öffentliche Packages sind kostenlos, private Packages aber kostenpflichtig  Über npmjs.com gehosted NEXUS REPOSITORY  Kostenpflichtige Lösung von Sonatype  Self-Hosted, nur für organisationsinterne Packages geeignet GITHUB PACKAGES  Öffentliche und private* Packages sind kostenlos (*mit Storage-Grenze)  Über github.com gehosted

Slide 52

Slide 52 text

DEMO

Slide 53

Slide 53 text

DOKUMENTATION  Open Source Tool für alle gängigen Frameworks  Interaktive Stories für isolierter UI Komponenten  Hilfreich für  Entwickeln  Testen  Dokumentieren https://storybook.js.org/

Slide 54

Slide 54 text

DEMO

Slide 55

Slide 55 text

FAZIT PATTERN LIBRARIES SPAREN WIEDERHOLTEN IMPLEMENTIERUNGSAUFWAND  Einheitliche Implementierung eines Style Guides  Erleichtert die Zusammenarbeit zwischen Designern und Entwicklern, sowie zwischen Entwicklungsteams  Zentraler Ablageort für gemeinsam UI-Fragmente (Komponenten, Styles, Assets, …)  Erleichtere die Nutzung von Elementen durch ein Dokumentationstool (z.B. Storybook)

Slide 56

Slide 56 text

FAZIT  Micro Frontends fördern die Skalierung von Projekten durch vertikale Aufteilung  NPM Module helfen beim Paketieren und Verteilen der Assets  Flex und Grid helfen bei der Umsetzung eines Responsive Layouts  Mit Web Components können die Bereiche der App gekapselt und wiederverwendet werden  Mit Pattern Libraries können wiederverwendbare Elemente teamübergreifend verfügbar gemacht werden  Storybook hilft zur Dokumentation einer Pattern Library

Slide 57

Slide 57 text

Q & A