Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren

1.954 visualizaciones

Publicado el

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.

Publicado en: Software
  • Sé el primero en recomendar esto

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)

×