Micro-Frontends werden oft als technischer Durchbruch angepriesen. In der Praxis sind sie normalerweise eine Strategie zur organisatorischen Skalierung.
Sie werden attraktiv, wenn eine Frontend-Codebasis zu einem Engpass für viele Teams geworden ist. Wenn unabhängige Teams nicht liefern können, ohne sich gegenseitig ins Gehege zu kommen, ist der Druck, stärkere Bereitstellungs- und Eigentumsgrenzen zu schaffen, spürbar.
Hier kommen Modulföderation und ähnliche Ansätze ins Spiel.
Welches Problem Sie Tatsächlich Lösen
Micro-Frontends sind nützlich, wenn Sie benötigen:
- getrennte Release-Kadenz
- stärkere Team-Eigentumsgrenzen
- lokalisierte Ausfallbereiche
- mehr Autonomie, als ein gemeinsamer Frontend-Build zulässt
Das ist nicht dasselbe wie „unsere SPA ist chaotisch.“ Eine chaotische SPA wird nicht sauberer, nur weil Sie das Chaos in entfernte Bundles aufteilen.
Warum Modulföderation Geholfen Hat
Die Webpack-Modulföderation machte Micro-Frontends praktikabler, da sie es ermöglichte, separat bereitgestellte Frontend-Artefakte Laufzeitmodule zu teilen und dynamisch zu laden:
new ModuleFederationPlugin({
name: "shell",
remotes: {
checkout: "checkout@https://cdn.example.com/remoteEntry.js",
},
shared: {
react: { singleton: true },
"react-dom": { singleton: true },
},
});
Dies ist eine echte Verbesserung gegenüber iframes für viele Produktoberflächen, da es die Erfahrung integrierter hält und vermeidet, den gesamten Laufzeit-Stack unnötig zu duplizieren.
Die Trade-Offs
Sie zahlen weiterhin für:
- Koordination gemeinsamer Abhängigkeiten
- Laufzeitintegrationsfehler
- Handhabung von Versionskonflikten
- Abweichungen im Designsystem
- kompliziertere lokale Entwicklung
Deshalb sollte die Barriere hoch sein. Wenn die Organisation klein genug ist, dass ein modularer Monolith-Frontend immer noch funktioniert, ist es normalerweise die bessere Wahl.
Die Bessere Entscheidungsregel
Verwenden Sie Micro-Frontends, wenn das Team-Modell sie benötigt.
Nehmen Sie sie nicht an, nur weil Backend-Teams bereits Mikroservices verwenden und die Symmetrie elegant erscheint. Die Laufzeitintegration im Frontend ist ein anderer Problembereich mit anderen Kosten.
Weiterführende Literatur