DevSession: Web UI Patterns & Practices

Transcript

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

   View Slide

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

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

   View Slide

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

   View Slide

5. MICRO FRONTENDS
   

   View Slide

6. BACKEND
   FRONTEND
   

   View Slide

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

   View Slide

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

   View 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 Slide

10. MICRO FRONTENDS
    

    View Slide

11. PAGE COMPOSITION
    

    View Slide

12. PAGE COMPOSITION
    TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING
    

    View Slide

13. PAGE COMPOSITION
    
    
    
    
    
    
    
    Team Dashboard
    Team Header
    Team Advertising
    

    View Slide

14. PAGE COMPOSITION
    

    View Slide

15. DEMO
    

    View Slide

16. MICRO
    FRONTEND
    COMPONENTS
    LAYOUT
    DEVOPS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

18. LAYOUT
    

    View Slide

19. DEMO
    

    View Slide

20. LAYOUT
    

    View Slide

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

22. EIN LAYOUT FÜR ALLE DEVICES
    

    View Slide

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

    View Slide

24. RESIZE
    

    View Slide

25. DEMO
    

    View Slide

26. REFLOW
    

    View Slide

27. DEMO
    

    View Slide

28. REPOSITION
    

    View Slide

29. DEMO
    

    View Slide

30. REDESIGN
    

    View Slide

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

32. DEMO
    

    View Slide

33. MICRO
    FRONTEND
    COMPONENTS
    LAYOUT
    DEVOPS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

35. 
    
    
    
    
    
    
    
     Semantik
     Local Scoping
     Konfiguration
     Bundle Import
    

    View Slide

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

37. DEMO
    

    View Slide

38. MICRO
    FRONTEND
    LAYOUT
    COMPONENTS
    DEVOPS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

40. DEMO
    

    View Slide

41. MICRO
    FRONTEND
    LAYOUT
    COMPONENTS
    DEVOPS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

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

44. DEMO
    

    View Slide

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

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

    View Slide

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

48. DEMO
    

    View Slide

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

50. DEMO
    

    View Slide

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

52. DEMO
    

    View Slide

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

54. DEMO
    

    View Slide

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

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

57. Q & A
    

    View Slide