Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren

1.845 Aufrufe

Veröffentlicht am

Microfrontends sind ein Architekturstil, um Frontends auf Anwendungensebene in fachlich abgeschlossene, individuell verteilbare Software-Elemente zu zerlegen. Microfrontends lassen sich in andere Frontends unabhängig von deren Architektur, Fachlichkeit und Technologiestack integrieren.

Veröffentlicht in: Software
  • Gehören Sie zu den Ersten, denen das gefällt!

Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren

  1. 1. MICRO- FRONTENDS ZUR RETTUNG KOMPLEXITÄT VERLAGERN © Mark Lubkowitz (www.microfrontends.de)
  2. 2. www.mark-lubkowitz.de MARK LUBKOWITZ Twitter: @marklubkowitz Web: microfrontends.de © Mark Lubkowitz (www.microfrontends.de)
  3. 3. THEMA Darum geht‘s heute # Microfrontend-Architekturstil # Modularisierung # Anwendungsebene # Informationssysteme # Kundenanwendungen © Mark Lubkowitz (www.microfrontends.de)
  4. 4. SAP Betriebliche Informationssysteme © Mark Lubkowitz (www.microfrontends.de)
  5. 5. E-MAIL-CLIENT Komplexe Kundenanwendung © Mark Lubkowitz (www.microfrontends.de)
  6. 6. DIE PROBLEME Warum brauchen wir einen speziellen Architekturstil fürs Frontend? © Mark Lubkowitz (www.microfrontends.de)
  7. 7. MODERNE TEAMSTRUKTUR Agilität und Zusammenarbeit Entwicklungsteams sind heute crossfunktional. Sie sollen von UI bis Persistenz für ihren Anwendungsteil verantwortlich sein. © Mark Lubkowitz (www.microfrontends.de)
  8. 8. VIELFÄLTIGE PLATTFORMEN n+1 Frontends Anfangs waren es nur verschiedene Betriebssysteme. Heute variieren Plattform, Rechenleistung, Eingabeart, Displayformen und Bediensituation. © Mark Lubkowitz (www.microfrontends.de)
  9. 9. STARKE ABHÄNGIGKEITEN Frameworks und Open Source Open Source liefert viele Lösungen kostenlos. Die Frage lautet deshalb nicht mehr „Ob?“ sondern „Welches Framework?“. Die Abhängigkeit wächst. © Mark Lubkowitz (www.microfrontends.de)
  10. 10. HOHER INNOVATIONSDRUCK Kunden fordern Kunden wollen neue Technologien einsetzen können, sobald sie verfügbar sind. Und Mitbewerber legen mitunter ein sehr hohes Tempo vor. © Mark Lubkowitz (www.microfrontends.de)
  11. 11. EINFACHE AUSTAUSCHBARKEIT Wiederverwenden und ersetzen Innovation ist teuer. Was sich wieder- verwenden lässt, reduziert die Kosten. Wiederverwendbarkeit bedeutet auch Ersetzbarkeit. © Mark Lubkowitz (www.microfrontends.de)
  12. 12. WACHSENDE KOMPLEXITÄT Features und Plattformen Je mehr Anforderungen gestellt sind, desto höher ist die Komplexität. Komplexität lässt sich nicht einfach reduzieren – sondern nur verlagern. © Mark Lubkowitz (www.microfrontends.de)
  13. 13. RAPIDE ALTERUNG Features und Abhängigkeiten Implementierte Features altern. Frameworks und Libraries altern. Vieles unterliegt einem Zerfallsprozess. Instandhaltung ist elementar. © Mark Lubkowitz (www.microfrontends.de)
  14. 14. TEILEN UND HERRSCHEN Wie lösen wir diese Probleme? © Mark Lubkowitz (www.microfrontends.de)
  15. 15. UNIX-PHILOSOPHIE Programme sollen … • eine Aufgabe sehr gut lösen • zusammenarbeiten • universell kommunizieren © Mark Lubkowitz (www.microfrontends.de)
  16. 16. MICROSERVICES Unix-Philosophie im Backend © Mark Lubkowitz (www.microfrontends.de)
  17. 17. MICROFRONTENDS Unix-Philosophie fürs Frontend © Mark Lubkowitz (www.microfrontends.de)
  18. 18. DEFINITION „Microfrontends sind eigenständige, fachlich abgeschlossene und unabhängig verteilbare Software-Elemente, die sich in Frontends losgelöst von deren Fachlichkeit und Architektur integrieren lassen. © Mark Lubkowitz (www.microfrontends.de)
  19. 19. PRINZIPIEN Wie setzen wir das um? © Mark Lubkowitz (www.microfrontends.de)
  20. 20. KOMPONENTEN- ORIENTIERUNG Modularisierung © Mark Lubkowitz (www.microfrontends.de)
  21. 21. FACHLICH ABGESCHLOSSEN Erst vertikal, dann horizontal © Mark Lubkowitz (www.microfrontends.de)
  22. 22. EIGENES DATENMODELL Autonomes Verständnis © Mark Lubkowitz (www.microfrontends.de)
  23. 23. KEINE ABHÄNGIGKEIT Alles drin © Mark Lubkowitz (www.microfrontends.de)
  24. 24. EXPLIZITE SCHNITTSTELLE Universell einsetzbar © Mark Lubkowitz (www.microfrontends.de)
  25. 25. EINSATZSZENARIEN Wann brauche ich das? © Mark Lubkowitz (www.microfrontends.de)
  26. 26. LIEFERN Microservice liefert ein Microfrontend © Mark Lubkowitz (www.microfrontends.de)
  27. 27. KONSUMIEREN Einen Microservice anbinden © Mark Lubkowitz (www.microfrontends.de)
  28. 28. INTEGRIEREN Microservices integriert zu einer einzelnen UI © Mark Lubkowitz (www.microfrontends.de)
  29. 29. SELEKTIEREN Einen Service oder Microservice auswählen © Mark Lubkowitz (www.microfrontends.de)
  30. 30. UMSETZUNG FÜRS WEB Wie funktioniert das im Web? © Mark Lubkowitz (www.microfrontends.de)
  31. 31. SCHLÜSSEL- TECHNIKEN Alle Bausteine sind vorhanden # Custom Elements # DOM # Service Worker # Webassembly © Mark Lubkowitz (www.microfrontends.de)
  32. 32. CUSTOM ELEMENTS Kapselung Custom Elements sind neue Elemente im Browser. Sie kapseln Struktur, Aussehen und Funktionalität. Zudem lassen sie sich mehrfach instanziieren. © Mark Lubkowitz (www.microfrontends.de)
  33. 33. DOM Universelle Schnittstelle Das Document Object Model ist eine universelle Schnittstelle. Sie bietet unterschiedliche Möglichkeiten, mit Elementen zu interagieren. © Mark Lubkowitz (www.microfrontends.de)
  34. 34. KOMPATIBILITÄT Flächendeckende Unterstützung Webbrowser Version Custom Elements v0 Custom Elements v1 Internet Explorer 11 - Polyfill Edge 18 - Polyfill Firefox 64 - ✅ Chrome 71 ✅ ✅ Chrome for Android 70 ✅ ✅ Safari 12 - ✅ iOS Safari 12.1 - ✅ Electron (Chromium) 4 (69) ✅ ✅© Mark Lubkowitz (www.microfrontends.de)
  35. 35. SERVICE WORKER Zentralisierung möglich Service Worker basieren auf dem Worker-Standard. Sie laufen in einem eigenen Thread und agieren auf Netzwerkebene. © Mark Lubkowitz (www.microfrontends.de)
  36. 36. WEBASSEMBLY Quasi-Nachbau von Java Webassembly ist Bytecode fürs Web. C++ oder Go lassen sich nach Webassembly übersetzen. Backend- Code kann ins Frontend rutschen. © Mark Lubkowitz (www.microfrontends.de)
  37. 37. E-MAIL-CLIENT Was wäre ein Idealbeispiel? © Mark Lubkowitz (www.microfrontends.de)
  38. 38. DOMÄNENMODELL Viele Domänen in einer Anwendung Erst Fachlichkeit identifizieren, dann daran entlang schneiden, etwa E-Mail und Kontakte. Domain-Driven Design bietet dazu den besten Ansatz. E-MAILKONTAKTE KALENDER NOTIZEN DATEIEN AUFGABEN NOTIZEN © Mark Lubkowitz (www.microfrontends.de)
  39. 39. TRIVIALER BEISPIELCODE Vereinfachter HTML-Code <html> <head></head> <body> <e-mail task="compose"> … <div>An:</div> <kontakt-verwaltung max="4" style="pillbox" autocomplete="true" ></kontakt-verwaltung> … <div>CC:</div> <kontakt-verwaltung max="4" style="pillbox" autocomplete="true" ></kontakt-verwaltung> … <div>BCC:</div> <kontakt-verwaltung max="4" style="pillbox" autocomplete="true" ></kontakt-verwaltung> … </e-mail> </body> </html> © Mark Lubkowitz (www.microfrontends.de)
  40. 40. WEITERE VORTEILE Was habe ich noch davon? © Mark Lubkowitz (www.microfrontends.de)
  41. 41. ROLLOUT Canary Release © Mark Lubkowitz (www.microfrontends.de)
  42. 42. INTEGRATION Zeitpunkt wählbar © Mark Lubkowitz (www.microfrontends.de)
  43. 43. LAZY LOADING Nachladen bei Bedarf © Mark Lubkowitz (www.microfrontends.de)
  44. 44. HOT DEPLOYMENT Change-on-the-fly © Mark Lubkowitz (www.microfrontends.de)
  45. 45. HERAUSFORDERUNGEN Womit bezahle ich das? © Mark Lubkowitz (www.microfrontends.de)
  46. 46. FRAMEWORK-ZOO Potenzielle Nebeneffekte # Zentralisierung # Guidelines # Common Sense © Mark Lubkowitz (www.microfrontends.de)
  47. 47. SCHWERGEWICHTIG Full-Blown-Mini-Applications # Artefakte bilden # Caching # Service Worker © Mark Lubkowitz (www.microfrontends.de)
  48. 48. DESIGNBRÜCHE Potenziell schwierige User Experience # Design System # Versionierung der Designs im Microfrontend # Designs als Module # Überladung der Styles © Mark Lubkowitz (www.microfrontends.de)
  49. 49. SCHNITTSTELEN- PROBLEME Missverständnisse # Schnittstelle einfach halten # Universell auslegen # einfache, nicht-typisierte Daten # Versionierung © Mark Lubkowitz (www.microfrontends.de)
  50. 50. TECHNISCHE SCHULDEN Geplante Obsoleszenz # hoher Qualitätsanspruch # Konventionen # Architekturstil anpassen # gesunder Menschenverstand © Mark Lubkowitz (www.microfrontends.de)
  51. 51. FAZIT Vollständig modularisierte Frontends © Mark Lubkowitz (www.microfrontends.de)
  52. 52. MODULARISIERUNG Anwendungsebene Microfrontends sind ein Modularisie- rungskonzept auf Anwendungsebene. Sie ergänzen den Architekturstil der Microservices, ohne abhängig zu sein. © Mark Lubkowitz (www.microfrontends.de)
  53. 53. KOMPLEXITÄT Teilen und herrschen Komplexität hängt von den Anforde- rungen ab. Sie lässt sich deshalb nur auf eine andere Ebene verschieben, fügt dann weitere Komplexität hinzu. © Mark Lubkowitz (www.microfrontends.de)
  54. 54. ALTERNATIVEN Schlechter als Custom Elements Microfrontends lassen sich auch verlinken, mit aufgepumpten DIV- Elementen umsetzen, in iFrames laden oder per SSI injizieren. © Mark Lubkowitz (www.microfrontends.de)
  55. 55. KONTAKT Twitter: @marklubkowitz Webseite: microfrontends.de E-Mail: me@microfrontends.de Linkedin: linkedin.com/in/marklubkowitz © Mark Lubkowitz (www.microfrontends.de)

×