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

Web-Frontend-Patterns und Practices - Talk

Web-Frontend-Patterns und Practices - Talk

Jörg Neumann

May 19, 2022
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. ACLUE GmbH | info@aclue.de Web Frontend Patterns & Practices Johannes

    Feige | Jorg Neumann :
  2. https://tinyurl.com/mpkvc88e DIE SAMPLES

  3. BACKEND FRONTEND

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

  5. FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1

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

    SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS SELF-CONTAINED SYSTEM
  7. PAGE COMPOSITION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING

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

    Dashboard Team Header Team Advertising
  9. MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

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

     Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit COMPONENTS
  11. <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
  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
  13. DEMO

  14. MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

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

  16. LAYOUT

  17. DEMO

  18. LAYOUT

  19. MICRO FRONTEND LAYOUT COMPONENTS KOMMUNIKATION

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

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

  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
  23. Q & A