BATbern42 Vom Frontend Monolithen zu Micro-Frontends
0 gefällt mir1,218 aufrufe
Das Dokument beschreibt den Übergang von einem Frontend-Monolithen zu Microfrontends in einem B2E-Portal, einschließlich der Herausforderungen, Ziele und Lösungen, die während des Prozesses identifiziert wurden. Es behandelt spezifische Probleme wie Komplexität, Abhängigkeiten und Performance, sowie verschiedene Architektur- und Navigationsoptionen, die in Betracht gezogen wurden. Abschließend werden die nächsten Schritte und zukünftige Ziele für das Team skizziert.
![Hürde «Angular Migration» - Eine neue Programmiersprache?
angular
.module('b2e.ui.utils.disabled.directives', [])
.directive('b2eDisabled', function b2eDisabledDirective() {
return {
restrict: 'EA',
require: ['b2eDisabled', '?^^b2eDisabled'],
controllerAs: 'b2eDisabledCtrl',
controller: function B2eDisabledCtrl($scope, $element, $attrs) {
var ctrl = this;
var unregisterExpression;
ctrl.$onInit = function() {
if (!ctrl.parentCtrl) {
ctrl.parentCtrl = parentDummyCtrl;
}
$scope.$on('$destroy',
ctrl.parentCtrl.registerChild(ctrl));
var expression = $attrs.b2eDisabled || $attrs.when;
};
}};
});
import {Component, Inject, Input} from '@angular/core';
import {PORTAL_NAV_SERVICE} from '@mobi/b2e-utils-ng-jslib';
@Component({
selector: 'vvn-vertrag-angebot-liste',
templateUrl: './angebotsliste.component.html',
})
export class AngebotslisteComponent {
@Input() geschaeftsnummer: string;
@Input() partnerFachnummer: string;
@Input() isLoading: boolean;
constructor(@Inject(PORTAL_NAV_SERVICE) private pn: PortalNavigator) {
}
public neuesAngebotErstellen = (): void => {
const baseUrl = '/vvn-vertrieb-b2e/vvn/produktauswahl/';
return this.pn.navigateTo(baseUrl);
}
}](https://image.slidesharecdn.com/batbern42mobiliarmicrofrontends-190323100239/85/BATbern42-Vom-Frontend-Monolithen-zu-Micro-Frontends-24-320.jpg)
BATbern42 Vom Frontend Monolithen zu Micro-Frontends
- 1. Vom Frontendmonolith zu Microfrontends Emanuel Indermühle
- 2. 18.03.2019 2 Emanuel Indermühle PhD in Computer Science, Uni Bern Technologie Architekt, die Mobiliar Scrum-Rolle Product Owner der Joint Application Platform, die Mobiliar
- 3. Auf unserem Weg vom Frontendmonolith zu Microfrontends Ausgangs- lage Ziele Optionen Hürden Vision Nächste Schritte
- 5. Ausgangslage – B2E Portal • B2E Portal • Schadensplattform • Angular JS • Erfolgreiche Einführung Q1 2015 Projekt • Ein Frontend Team • Ein Architekt.Organisation • 2-Way Data Binding • Monolith im Backend • Release 2x jährlich • Offline Anforderung Architektur 18.03.2019 5
- 6. Ausgangslage – B2E Portal – Die Vertriebsplattform • Gleiche Code-Base • Viel Code-SharingProjekt • 3 neue Teams (5-7 insgesamt) • 2 neue ArchitektenOrganisation • State Management an «Flux» angelehnt • Microservices im Backend • Agiles Releasing • Offline-Anforderung Architektur 18.03.2019 6
- 7. Ausgangslage - Probleme • Unterschiedliche Architekturen • Komplexität des Builds • Lokale Änderungen -> Globale Auswirkungen • Fast 25 Mitarbeiter pushen Commits 1 Code- Base • Viel Koordination für Releasing und Testing • Performance Probleme (im IE)1 SPA • Kostet viel • Keine VerifikationOffline • Schwierig • Bower zu NPM • JavaScript zu Typescript LifeCycle 18.03.2019 7
- 8. Ziele der Modularisierung 18.03.2019 8 • Keine Abstimmungsmeetings • Keine Feuerwehrübungen Weniger Koordination • Entwickler gewinnen die Übersicht Weniger Komplexität • Changes in Vertriebsportal verursachen keinen Bugs im Schadenportal Lokale Auswirkungen • Bugfix Releases muss nicht mit 25 Entwickler abgesprochen werden.Getrennte Releases • Teams können LifeCycle unabhängig angehenLifecycle • Teams können App-Architektur selber wählenArchitektur
- 10. Optionen – «Code Base» • Einfacheres Code Sharing • Weniger Libs • Einfacheres Testing • Weniger Aufwand Monorepo • Weniger Code Sharing • Kleinere SPAs einfacher Build • Lokaler Change -> lokale Auswirkung Multirepo 18.03.2019 10
- 11. Optionen – «Navigation» • z.B. «Single SPA» • Performance Navigation • z.B. «Scion Workbench»? Monopage • Mehrere SPAs • Technisch einfacher • Legacy-freundlich • Weniger Abhängigkeit • Ressourcen schonender Multipage 18.03.2019 11
- 12. Optionen – «Code Sharing» • Technisch einfachLibs • Unabhängiges Deployment • Technisch einfach • Eingeschränktes UX iframe • Unabhängiges Deployment • Experimentell • Schlechte Entwickler Ergonomie Web Components 18.03.2019 12
- 13. Vision aus der Sicht «Feature Team» 18.03.2019 13 Service Frontend Service Service Frontend Service Service Frontend Frontend • unabhängig Deployen • unabhängig Lifecycle machen • unabhängig das Framework wählen Ein Feature Team kann… Navigation
- 14. Let’s Go 18.03.2019 14 Multirepo Multipage Libs iframe
- 15. Neue SPA Modularisierung in Action 18.03.2019 15 Frontendmonolith Funktionales Module Common Utilities Navigation Toggle
- 17. Hürde «Dependency-Hell» • Welche Versionen sind miteinander kompatibel? 18.03.2019 17 SPA B C D V1.1 D V1.4
- 18. Hürde «Dependency-Hell» - Dependency Propagator 18.03.2019 18 SPA B (Latest Version) C (Latest Version) D (Latest Version) Build lib Publish lib Buildjob of lib Write lib’s new Version to consumers master branch
- 20. Hürde «Breaking Changes» 18.03.2019 20 Build lib Publish lib Buildjob of lib Write lib’s new Version to consumers master branch Buildjob of consumer Build breaks
- 21. Hürde «Breaking Changes» – CDC Testing 18.03.2019 21 Build lib Publish Snapshot Buildjob of lib Build every consumer with new Snapshot Write Lib’s new Version to consumers master branch Publish lib
- 23. Hürde «Angular Migration» Angular JS Angular Version: 1.5, 1.6, 1.7 Version: 2, 4, 5, 6, 7 (Semver)
- 24. Hürde «Angular Migration» - Eine neue Programmiersprache? angular .module('b2e.ui.utils.disabled.directives', []) .directive('b2eDisabled', function b2eDisabledDirective() { return { restrict: 'EA', require: ['b2eDisabled', '?^^b2eDisabled'], controllerAs: 'b2eDisabledCtrl', controller: function B2eDisabledCtrl($scope, $element, $attrs) { var ctrl = this; var unregisterExpression; ctrl.$onInit = function() { if (!ctrl.parentCtrl) { ctrl.parentCtrl = parentDummyCtrl; } $scope.$on('$destroy', ctrl.parentCtrl.registerChild(ctrl)); var expression = $attrs.b2eDisabled || $attrs.when; }; }}; }); import {Component, Inject, Input} from '@angular/core'; import {PORTAL_NAV_SERVICE} from '@mobi/b2e-utils-ng-jslib'; @Component({ selector: 'vvn-vertrag-angebot-liste', templateUrl: './angebotsliste.component.html', }) export class AngebotslisteComponent { @Input() geschaeftsnummer: string; @Input() partnerFachnummer: string; @Input() isLoading: boolean; constructor(@Inject(PORTAL_NAV_SERVICE) private pn: PortalNavigator) { } public neuesAngebotErstellen = (): void => { const baseUrl = '/vvn-vertrieb-b2e/vvn/produktauswahl/'; return this.pn.navigateTo(baseUrl); } }
- 25. Hürde «Angular Migration» - ngUpgrade AngularJS DI context Angular DI context NgUpgrade DI - MyComp - MyService DI - HisComp - HisService Upgrades Downgrades
- 26. Hürde «Angular Migration» - unterschiedlichen Upgrade Stufen 18.03.2019 26 Angular SPAngUpgrade SPA App - Code AngularJS SPA Angular JsLibngUpgrade JsLibAngularJS JsLib upgrades SPAsJSlibs
- 28. Hürde «Performance» - Loading • Initiale Ladezeit der SPAs • Navigation zwischen SPAs ist zu langsam 18.03.2019 28
- 29. Hürde «Performance» - Loading • Angular + Angularjs + ngUpgrade + Viel Code • Modularisierung • Angular Migration • AnuglarJs und ngUpgrade fallen weg, dafür haben wir Treeshaking Laden • Anuglar + AngularJS • Angular MigrationInitialisierung • Offline Anforderung • Lazy loading • Sync zu Async Rewrite (Aufwand Gross) Bereitstellung Stammdaten • AngularJS • Angular MigrationRendering 18.03.2019 29
- 30. Hürde «Performance» - Dilemma • Angular Migration nötig • Wegen Performance Modularisierung • Modularisierung nötig • Wegen Individuellem LifeCycle Angular Migration 18.03.2019 30
- 31. Hürde «Performance» - Tablösung • Chrome Extension • Navigation wird abgefangen • Zuordnung von Root-Context zu Bowser-Tab Wie? • SPAs bleiben geladen, • mehrfache Initialisierung entfällt.Hilfts? • Bis die SPAs schnell laden • Migration und Modularisierung entsprechend fortgeschritten sind. Wie lange? 18.03.2019 31
- 33. Rückblick – Ziel erreicht? Koordination / Komplexität Lokale Änderung -> Lokale Auswirkungen Unabhängiges Releasing •Libs verhindern wirklich unabhängiges Releasing LifeCycle •Libs erzwingen orchestrierten LifeCycle Freiheit in der App Architektur •Angular ist gesetzt Schneidung •SPAs sind keine Micro Frontends 18.03.2019 33
- 34. Ausblick – Web Components Mit Angular Elements Standardisierter Build-Prozess Unabhängiges Releasing Unabhängiger LifeCycle Die Micro Frontends 18.03.2019 34
- 35. Nächste Schritte 18.03.2019 35 • Erlaubt Angular-Only SPAs Angular Migration zentraler Libs • Wir bleiben dran Update Angular 7 auf Angular 8 • Siehe Vision Experimente mit Angular Elements • Wie gesund sind unsere Frontends Observability im Frontend
- 37. Haben wir Zeit für Fragen 18.03.2019 37