Web-Frontend-Patterns und Practices

Transcript

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

   View Slide

2. View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

6. MICRO FRONTENDS
   

   View Slide

7. BACKEND
   FRONTEND
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. MICRO FRONTENDS
    

    View Slide

12. PAGE COMPOSITION
    

    View Slide

13. PAGE COMPOSITION
    TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING
    

    View Slide

14. PAGE COMPOSITION
    
    
    
    
    
    
    
    Team Dashboard
    Team Header
    Team Advertising
    

    View Slide

15. PAGE COMPOSITION
    

    View Slide

16. DEMO
    

    View Slide

17. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

21. DEMO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Highlevel API Lowlevel API
    Worklets
    

    View Slide

27. IsHoudiniReadyYet.com
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. DEMO
    Paint API
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

35. DEMO
    

    View Slide

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

    View Slide

37. DEMO
    LAYOUT
    

    View Slide

38. DEMO
    

    View Slide

39. View Slide

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

    View Slide

41. WEB DESIGN PATTERNS
    SINGLE COLUMN LAYOUT MAGAZINE LAYOUT
    

    View Slide

42. WEB DESIGN PATTERNS
    CARD-BASED LAYOUT HERO LAYOUT
    

    View Slide

43. DEMO
    

    View Slide

44. TECHNISCHE UMSETZUNG
    

    View Slide

45. DEMO
    

    View Slide

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
    

    View Slide

47. EIN LAYOUT FÜR ALLE DEVICES
    

    View Slide

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

    View Slide

49. RESIZE
    

    View Slide

50. DEMO
    

    View Slide

51. REFLOW
    

    View Slide

52. REPOSITION
    

    View Slide

53. DEMO
    

    View Slide

54. REDESIGN
    

    View Slide

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
    

    View Slide

56. DEMO
    

    View Slide

57. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION
    

    View Slide

58. 
    

    View Slide

59. DEMO
    
    
    
    
    
    
    
    
     Keine Semantik
     Intransparenz
     Anpassungen schwierig
     Framework-Abhängigkeit
    

    View Slide

60. DEMO
    
    
    
    
    
    
    
    +
    -
    …
    
    
    
     Global Scoping
     Namenskonflikte
     Styling-Konflikte
    

    View Slide

61. DEMO
    
    
    
    
    
    
    
    
     Semantik
     Local Scoping
     Konfiguration
     Bundle Import
    

    View Slide

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
    

    View Slide

63. DEMO
    
    
    
    
    
    
    
    
    
    ECMA Script
    Module
    Custom
    Elements
    HTML
    Templates
    Shadow
    DOM
    

    View Slide

64. DEMO
    

    View Slide

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

    View Slide

66. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

68. DEMO
    

    View Slide

69. MICRO
    FRONTEND
    COMPONENTS
    STYLING
    DEVOPS
    KOMMUNIKATION
    

    View Slide

70. Component
    

    View Slide

71. View Slide

72. Coole
    Komponente!
    

    View Slide

73. ?
    

    View Slide

74. Pattern Library!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

77. DEMO
    

    View Slide

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
    

    View Slide

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

    View Slide

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/
    

    View Slide

81. DEMO
    

    View Slide

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
    

    View Slide

83. DEMO
    

    View Slide

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
    

    View Slide

85. DEMO
    

    View Slide

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/
    

    View Slide

87. DEMO
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

90. Q & A
    

    View Slide