Web-Frontend-Patterns und Practices - Talk

Transcript

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

   View Slide

2. https://tinyurl.com/mpkvc88e
   DIE SAMPLES
   

   View Slide

3. BACKEND
   FRONTEND
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. PAGE COMPOSITION
   TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING
   

   View Slide

8. PAGE COMPOSITION
   
   
   
   
   
   
   
   Team Dashboard
   Team Header
   Team Advertising
   

   View Slide

9. MICRO
   FRONTEND
   LAYOUT
   COMPONENTS
   KOMMUNIKATION
   

   View Slide

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

    View Slide

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

    View Slide

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

13. DEMO
    

    View Slide

14. MICRO
    FRONTEND
    LAYOUT
    COMPONENTS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

16. LAYOUT
    

    View Slide

17. DEMO
    

    View Slide

18. LAYOUT
    

    View Slide

19. MICRO
    FRONTEND
    LAYOUT
    COMPONENTS
    KOMMUNIKATION
    

    View Slide

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

    View Slide

21. DEMO
    

    View Slide

22. FAZIT
    * Micro Frontends fördern die Skalierung von Projekten durch
    vertikale Aufteilung
    * Mit Web Components können die Bereiche der App gekapselt
    und wiederverwendet werden
    * Flexbox und Grid helfen bei der Umsetzung eines flexibles Layouts
    * Clientseitige Kommunikation spart unnötige Roundtrips
    

    View Slide

23. Q & A
    

    View Slide