In der Mobiliar sind wir vermehrt mit der Herausforderung konfrontiert, schneller und agiler Funktionalität auszuliefern. Das Rezept der Stunde dazu ist die Microservice Architektur. Auch im Frontend verbreitet sich der Bedürfnis nach Möglichkeiten grosse Applikationen in kleinere, interagierende, unabhängig auszuliefernde Teilapplikationen aufzuteilen. In den letzten zwei Jahren hat die Mobiliar das Vorhaben angepackt ihr Mitarbeiterportal (B2E) in kleinere SPAs aufzuteilen. In diesem Vortrag werden die verschiedenen Herausforderungen auf dem Weg zu Micro-Frontends thematisiert. Es wird die Abfolge von Motivation, Visionen, Entscheidungen, Problemen, Lösungen und Alternativen aufgezeigt.

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

4. Ausgangslage
Wie alles begann
18.03.2019 4

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

9. Optionen
18.03.2019 9

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

16. Hürde «Dependency-Hell»
18.03.2019 16

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

19. Hürde «Breaking Changes»
18.03.2019 19

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

22. Hürde «Angular Migration»
18.03.2019 22

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

27. Hürde «Performance»
18.03.2019 27

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

32. Rückblick - Ausblick
18.03.2019 32

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

36. Das Team
18.03.2019 36
Martin
Fischer
Tomas
Trajan
Matthias
Junker
Christian
Kohler
Kevin
Kreuzer
Christof
Leuenberger
Roland
Wyss

37. Haben wir Zeit für Fragen
18.03.2019 37