Web-Frontend-Patterns und Practices

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 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 4

Slide 4 text

https://tinyurl.com/26kykjs7 DIE UNTERLAGEN

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

MICRO FRONTENDS

Slide 7

Slide 7 text

BACKEND FRONTEND

Slide 8

Slide 8 text

FRONTEND SERVICE 1 SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

MICRO FRONTENDS

Slide 12

Slide 12 text

PAGE COMPOSITION

Slide 13

Slide 13 text

PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

Slide 14

Slide 14 text

PAGE COMPOSITION Team Dashboard Team Header Team Advertising

Slide 15

Slide 15 text

PAGE COMPOSITION

Slide 16

Slide 16 text

DEMO

Slide 17

Slide 17 text

MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

Slide 18

Slide 18 text

CSS PREPROCESSORS  Vereinfachen das Schreiben von CSS  Bieten mehr Möglichkeiten als im normalen CSS (Variablen, Nesting, Mixins, …)  Generieren CSS aus der eigenen Proprocessor Syntax  Bringen eine semantische Struktur ins CSS

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

FEATURES  Variablen  Verschachtelung / Nesting  Module / Partials  Mixins SASS installieren: npm install -g sass VSCode Extensions: - „SASS“ - „Live SASS Compiler“

Slide 21

Slide 21 text

DEMO

Slide 22

Slide 22 text

CSS nervt! ;) WAS IST DAS PROBLEM?

Slide 23

Slide 23 text

CSS RENDERING PIPELINE HTML/CSS Parser DOM CSSOM Render Layout Paint Composite Screen

Slide 24

Slide 24 text

MANIPULATION HTML/CSS Parser DOM CSSOM Render Layout Paint Composite Screen

Slide 25

Slide 25 text

MANIPULATION MIT HOUDINI HTML/CSS Parser DOM CSSOM Render Layout Paint Composite Screen

Slide 26

Slide 26 text

Highlevel API Lowlevel API Worklets

Slide 27

Slide 27 text

IsHoudiniReadyYet.com

Slide 28

Slide 28 text

WORKLETS HINTERGRUND  Logik in Form einer JavaScript Klasse  Wird im Browser registriert und läuft in seinem eigenen Kontext  Läuft nur auf lokalem Server oder über HTTPS in Produktion  Fremde Worklets entweder als Package lokal installieren oder über ein CDN verlinken  Weitere Infos hier

Slide 29

Slide 29 text

CSS PAINT API HINTERGRUND  Mit eigener Logik in den Rendering-Prozess eingreifen  Rendern von background, background-image, border-image, mask-image  Zur Manipulation steht ein Subset der Canvas API zu Verfügung W3C STATUS  Status: Candidate Recommendation

Slide 30

Slide 30 text

DEMO Paint API

Slide 31

Slide 31 text

HOUDINI PAINT API POLYFILL  Einbinden:  Repo: https://github.com/GoogleChromeLabs/css-paint-polyfill

Slide 32

Slide 32 text

CSS TYPED OM HINTERGRUND  Der Zugriff auf CSS Properties erfolgt meist untypisiert  Houdini führt ein neues typisiertes Objektmodell für den Umgang mit CSS ein W3C STATUS  Status: Working Draft

Slide 33

Slide 33 text

TYPED OBJECT MODEL ERMITTELN VON WERTEN MANIPULATION VON WERTEN // CSSOM getComputedStyle(el).getPropertyValue('width') // '50px' // Typed OM el.computedStyleMap().get('width') // CSSUnitValue {value: 50, unit: 'px'} // CSSOM el.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)‘) // Typed OM el.attributeStyleMap.set('transform', new CSSTranslate(CSS.px(x), CSS.px(y)))

Slide 34

Slide 34 text

STYLING FRAMEWORKS BOOTSTRAP  Enthält fertige CSS Klassen für gängige Elemente  Framework-unabhängig TAILWIND  Baukasten aus CSS Klassen für dynamische Komposition  Enthält keine fertigen Elemente  Tailwind UI Kit bietet fertige Templates MATERIAL DESIGN  Design Guidelines von Google  Stellt Komponenten für natives JS und gängige Frameworks bereit  Diverse Packages mit unterschiedlichem Funktionsumfang

Slide 35

Slide 35 text

DEMO

Slide 36

Slide 36 text

DEMO Quelle: https://arngren.net/ LAYOUT

Slide 37

Slide 37 text

DEMO LAYOUT

Slide 38

Slide 38 text

DEMO

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

WEB DESIGN PATTERNS PRINCIPLES  Predictability  Consistency  Responsiveness PATTERNS  Anatomy Patterns  Composition Patterns

Slide 41

Slide 41 text

WEB DESIGN PATTERNS SINGLE COLUMN LAYOUT MAGAZINE LAYOUT

Slide 42

Slide 42 text

WEB DESIGN PATTERNS CARD-BASED LAYOUT HERO LAYOUT

Slide 43

Slide 43 text

DEMO

Slide 44

Slide 44 text

TECHNISCHE UMSETZUNG

Slide 45

Slide 45 text

DEMO

Slide 46

Slide 46 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 47

Slide 47 text

EIN LAYOUT FÜR ALLE DEVICES

Slide 48

Slide 48 text

RESPONSIVE DESIGN PATTERNS  RESIZE  REFLOW  REPOSITION  REDESIGN

Slide 49

Slide 49 text

RESIZE

Slide 50

Slide 50 text

DEMO

Slide 51

Slide 51 text

REFLOW

Slide 52

Slide 52 text

REPOSITION

Slide 53

Slide 53 text

DEMO

Slide 54

Slide 54 text

REDESIGN

Slide 55

Slide 55 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 56

Slide 56 text

DEMO

Slide 57

Slide 57 text

MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

Slide 58

Slide 58 text

Slide 59

Slide 59 text

DEMO

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

Slide 60

Slide 60 text

DEMO

+ - …

 Global Scoping  Namenskonflikte  Styling-Konflikte

Slide 61

Slide 61 text

DEMO  Semantik  Local Scoping  Konfiguration  Bundle Import

Slide 62

Slide 62 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 63

Slide 63 text

DEMO ECMA Script Module Custom Elements HTML Templates Shadow DOM

Slide 64

Slide 64 text

DEMO

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

DEMO

Slide 69

Slide 69 text

MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

Slide 70

Slide 70 text

Component

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

Coole Komponente!

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Pattern Library!

Slide 75

Slide 75 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 76

Slide 76 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 77

Slide 77 text

DEMO

Slide 78

Slide 78 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 79

Slide 79 text

BUNDLING https://webpack.js.org/

Slide 80

Slide 80 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 81

Slide 81 text

DEMO

Slide 82

Slide 82 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 83

Slide 83 text

DEMO

Slide 84

Slide 84 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 85

Slide 85 text

DEMO

Slide 86

Slide 86 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 87

Slide 87 text

DEMO

Slide 88

Slide 88 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 89

Slide 89 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 90

Slide 90 text

Q & A