$30 off During Our Annual Pro Sale. View Details »

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 | info@aclue.de Web Frontend Patterns & Practices Robin

    Muller | Jorg Neumann : :
  2. None
  3. 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
  4. https://tinyurl.com/26kykjs7 DIE UNTERLAGEN

  5. 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
  6. MICRO FRONTENDS

  7. BACKEND FRONTEND

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

  9. FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1

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

    SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS SELF-CONTAINED SYSTEM
  11. MICRO FRONTENDS

  12. PAGE COMPOSITION

  13. PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

  14. PAGE COMPOSITION <body> <red-header> <blue-dashboard> <green-adbox></green-adbox> </blue-dashboard> </red-header> </body> Team

    Dashboard Team Header Team Advertising
  15. PAGE COMPOSITION

  16. DEMO

  17. MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

  18. 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
  19. 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
  20. FEATURES  Variablen  Verschachtelung / Nesting  Module /

    Partials  Mixins SASS installieren: npm install -g sass VSCode Extensions: - „SASS“ - „Live SASS Compiler“
  21. DEMO

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

  23. CSS RENDERING PIPELINE HTML/CSS Parser DOM CSSOM Render Layout Paint

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

  25. MANIPULATION MIT HOUDINI HTML/CSS Parser DOM CSSOM Render Layout Paint

    Composite Screen
  26. Highlevel API Lowlevel API Worklets

  27. IsHoudiniReadyYet.com

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

  31. HOUDINI PAINT API POLYFILL  Einbinden:  Repo: <script src="https://unpkg.com/css-paint-polyfill"></script>

    https://github.com/GoogleChromeLabs/css-paint-polyfill
  32. 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
  33. 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)))
  34. 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
  35. DEMO

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

  37. DEMO LAYOUT

  38. DEMO

  39. None
  40. WEB DESIGN PATTERNS PRINCIPLES  Predictability  Consistency  Responsiveness

    PATTERNS  Anatomy Patterns  Composition Patterns
  41. WEB DESIGN PATTERNS SINGLE COLUMN LAYOUT MAGAZINE LAYOUT

  42. WEB DESIGN PATTERNS CARD-BASED LAYOUT HERO LAYOUT

  43. DEMO

  44. TECHNISCHE UMSETZUNG

  45. DEMO

  46. 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
  47. EIN LAYOUT FÜR ALLE DEVICES

  48. RESPONSIVE DESIGN PATTERNS  RESIZE  REFLOW  REPOSITION 

    REDESIGN
  49. RESIZE

  50. DEMO

  51. REFLOW

  52. REPOSITION

  53. DEMO

  54. REDESIGN

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

  57. MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

  58. <div></div>

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

    </html>  Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit
  60. DEMO <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
  61. DEMO <html> <head> <script type="module" src="NumberPad.js"></script> </head> <body> <number-pad value="1"

    minimum="1" maximum="1"> </number-pad> </body> </html>  Semantik  Local Scoping  Konfiguration  Bundle Import
  62. 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
  63. DEMO <html> <head> <script type="module" src="NumberPad.js"></script> </head> <body> <number-pad value="1"

    minimum="1" maximum="1"> </number-pad> </body> </html> ECMA Script Module Custom Elements HTML Templates Shadow DOM
  64. DEMO

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

    MODULES
  66. MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

  67. KOMMUNIKATION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING Kommunikation: • URL-Parameter

    • Web Components • Custom Dom Events • Broadcast Channel
  68. DEMO

  69. MICRO FRONTEND COMPONENTS STYLING DEVOPS KOMMUNIKATION

  70. Component

  71. None
  72. Coole Komponente!

  73. ?

  74. Pattern Library!

  75. 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
  76. 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
  77. DEMO

  78. 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
  79. BUNDLING https://webpack.js.org/

  80. 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/
  81. DEMO

  82. 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
  83. DEMO

  84. 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
  85. DEMO

  86. 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/
  87. DEMO

  88. 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)
  89. 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
  90. Q & A