Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. FRONTEND 1 FRONTEND 2 FRONTEND 3 FRONTEND 4 SERVICE 1

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

    SERVICE 2 SERVICE 3 SERVICE 4 MICROSERVICES MICRO FRONTENDS SELF-CONTAINED SYSTEM
  3. <html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>

     Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit COMPONENTS
  4. <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
  5. 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
  6. KOMMUNIKATION TEAM HEADER TEAM DASHBOARD TEAM ADVERTISING Kommunikation: • URL-Parameter

    • Web Components • Custom Dom Events • Broadcast Channel
  7. 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