Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web-Frontend-Patterns und Practices

Web-Frontend-Patterns und Practices

Jörg Neumann

October 10, 2022
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. ACLUE GmbH | [email protected]
    Web Frontend
    Patterns & Practices
    Robin Muller | Jorg Neumann
    :
    :

    View full-size slide

  2. JÖRG NEUMANN ROBIN MÜLLER
    THEMEN
     Frontend Technologies
     Mobile Development
     Machine Learning
     Consulting, Coaching, Training
    KONTAKT
     Mail: [email protected]
     Twitter: @JoergNeumann
    THEMEN
     Machine Learning​
     Frontend Technologies​
     Java Fullstack​
     Consulting, Training​
    KONTAKT
     Mail: [email protected]
    www.aclue.de

    View full-size slide

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

    View full-size slide

  4. 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

    View full-size slide

  5. MICRO FRONTENDS

    View full-size slide

  6. BACKEND
    FRONTEND

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. MICRO FRONTENDS

    View full-size slide

  11. PAGE COMPOSITION

    View full-size slide

  12. PAGE COMPOSITION
    TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

    View full-size slide

  13. PAGE COMPOSITION







    Team Dashboard
    Team Header
    Team Advertising

    View full-size slide

  14. PAGE COMPOSITION

    View full-size slide

  15. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION

    View full-size slide

  16. 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

    View full-size slide

  17. 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

    View full-size slide

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

    View full-size slide

  19. CSS
    nervt! ;)
    WAS IST DAS PROBLEM?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Highlevel API Lowlevel API
    Worklets

    View full-size slide

  24. IsHoudiniReadyYet.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. DEMO
    Paint API

    View full-size slide

  28. HOUDINI PAINT API
    POLYFILL
     Einbinden:
     Repo:

    https://github.com/GoogleChromeLabs/css-paint-polyfill

    View full-size slide

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

    View full-size slide

  30. 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)))

    View full-size slide

  31. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. WEB DESIGN PATTERNS
    SINGLE COLUMN LAYOUT MAGAZINE LAYOUT

    View full-size slide

  35. WEB DESIGN PATTERNS
    CARD-BASED LAYOUT HERO LAYOUT

    View full-size slide

  36. TECHNISCHE UMSETZUNG

    View full-size slide

  37. 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

    View full-size slide

  38. EIN LAYOUT FÜR ALLE DEVICES

    View full-size slide

  39. RESPONSIVE DESIGN PATTERNS
     RESIZE
     REFLOW
     REPOSITION
     REDESIGN

    View full-size slide

  40. 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

    View full-size slide

  41. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION

    View full-size slide

  42. DEMO








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

    View full-size slide

  43. DEMO







    +
    -




     Global Scoping
     Namenskonflikte
     Styling-Konflikte

    View full-size slide

  44. DEMO








     Semantik
     Local Scoping
     Konfiguration
     Bundle Import

    View full-size slide

  45. 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

    View full-size slide

  46. DEMO









    ECMA Script
    Module
    Custom
    Elements
    HTML
    Templates
    Shadow
    DOM

    View full-size slide

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

    View full-size slide

  48. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION

    View full-size slide

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

    View full-size slide

  50. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION

    View full-size slide

  51. Coole
    Komponente!

    View full-size slide

  52. Pattern Library!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. BUNDLING
    https://webpack.js.org/

    View full-size slide

  57. 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/

    View full-size slide

  58. 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

    View full-size slide

  59. 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

    View full-size slide

  60. 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/

    View full-size slide

  61. 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)

    View full-size slide

  62. 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

    View full-size slide