SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
Vom Frontendmonolith zu
Microfrontends
Emanuel Indermühle
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
Auf unserem Weg vom Frontendmonolith zu Microfrontends
Ausgangs-
lage
Ziele Optionen Hürden Vision
Nächste
Schritte
Ausgangslage
Wie alles begann
18.03.2019 4
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
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
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
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
Optionen
18.03.2019 9
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
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
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
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
Let’s Go
18.03.2019 14
Multirepo Multipage Libs iframe
Neue SPA
Modularisierung in Action
18.03.2019 15
Frontendmonolith
Funktionales Module
Common Utilities
Navigation
Toggle
Hürde «Dependency-Hell»
18.03.2019 16
Hürde «Dependency-Hell»
• Welche Versionen sind
miteinander kompatibel?
18.03.2019 17
SPA
B C
D
V1.1
D
V1.4
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
Hürde «Breaking Changes»
18.03.2019 19
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
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
Hürde «Angular Migration»
18.03.2019 22
Hürde «Angular Migration»
Angular JS Angular
Version: 1.5, 1.6, 1.7 Version: 2, 4, 5, 6, 7 (Semver)
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);
}
}
Hürde «Angular Migration» - ngUpgrade
AngularJS DI context Angular DI context
NgUpgrade
DI
- MyComp
- MyService
DI
- HisComp
- HisService
Upgrades
Downgrades
Hürde «Angular Migration» - unterschiedlichen Upgrade Stufen
18.03.2019 26
Angular SPAngUpgrade SPA
App - Code
AngularJS SPA
Angular JsLibngUpgrade JsLibAngularJS JsLib
upgrades
SPAsJSlibs
Hürde «Performance»
18.03.2019 27
Hürde «Performance» - Loading
• Initiale Ladezeit der SPAs
• Navigation zwischen SPAs ist zu langsam
18.03.2019 28
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
Hürde «Performance» - Dilemma
• Angular Migration nötig
• Wegen Performance
Modularisierung
• Modularisierung nötig
• Wegen Individuellem LifeCycle
Angular
Migration
18.03.2019 30
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
Rückblick - Ausblick
18.03.2019 32
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
Ausblick – Web Components
Mit Angular Elements
Standardisierter Build-Prozess
Unabhängiges Releasing
Unabhängiger LifeCycle
Die Micro Frontends
18.03.2019 34
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
Das Team
18.03.2019 36
Martin
Fischer
Tomas
Trajan
Matthias
Junker
Christian
Kohler
Kevin
Kreuzer
Christof
Leuenberger
Roland
Wyss
Haben wir Zeit für Fragen
18.03.2019 37

Weitere ähnliche Inhalte

Was ist angesagt?

Public Cloud Erfahrungsbericht SBB
Public Cloud Erfahrungsbericht SBBPublic Cloud Erfahrungsbericht SBB
Public Cloud Erfahrungsbericht SBBBATbern
 
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce ConnectEvaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connectcomspace GmbH & Co. KG
 
With Kafka on the way to production/Kafka in produktion_ausblick
With Kafka on the way to production/Kafka in produktion_ausblickWith Kafka on the way to production/Kafka in produktion_ausblick
With Kafka on the way to production/Kafka in produktion_ausblickconfluent
 
BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...
BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...
BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...BATbern
 
Hybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im EinsatzHybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im Einsatzcomspace GmbH & Co. KG
 
Continuous deployment in LeanIX @ Bonn Agile
Continuous deployment in LeanIX @ Bonn AgileContinuous deployment in LeanIX @ Bonn Agile
Continuous deployment in LeanIX @ Bonn AgileLeanIX GmbH
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm softwareDNUG e.V.
 
Nintex Forms als Ersatz für InfoPath?
Nintex Forms als Ersatz für InfoPath?Nintex Forms als Ersatz für InfoPath?
Nintex Forms als Ersatz für InfoPath?Christian Heindel
 
Microsoft Azure Cloud mit der Sitecore Experience Platform
Microsoft Azure Cloud mit der Sitecore Experience PlatformMicrosoft Azure Cloud mit der Sitecore Experience Platform
Microsoft Azure Cloud mit der Sitecore Experience Platformcomspace GmbH & Co. KG
 
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_inselDNUG e.V.
 
MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5MT AG
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobjectopenbig
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009Andreas Schulte
 
Digitale Transformation von Enterprise Anwendungen
Digitale Transformation von Enterprise AnwendungenDigitale Transformation von Enterprise Anwendungen
Digitale Transformation von Enterprise AnwendungenPOINT. Consulting GmbH
 
Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...
Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...
Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...camunda services GmbH
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...LeanIX GmbH
 
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere PortalFrank Rahn
 

Was ist angesagt? (17)

Public Cloud Erfahrungsbericht SBB
Public Cloud Erfahrungsbericht SBBPublic Cloud Erfahrungsbericht SBB
Public Cloud Erfahrungsbericht SBB
 
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce ConnectEvaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
Evaluierung einer Hybris-Anbindung an Sitecore mittels Commerce Connect
 
With Kafka on the way to production/Kafka in produktion_ausblick
With Kafka on the way to production/Kafka in produktion_ausblickWith Kafka on the way to production/Kafka in produktion_ausblick
With Kafka on the way to production/Kafka in produktion_ausblick
 
BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...
BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...
BAT40 Mobiliar Koller Mösching AI@Mobiliar Wie AI-Services in der Mobiliar ge...
 
Hybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im EinsatzHybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im Einsatz
 
Continuous deployment in LeanIX @ Bonn Agile
Continuous deployment in LeanIX @ Bonn AgileContinuous deployment in LeanIX @ Bonn Agile
Continuous deployment in LeanIX @ Bonn Agile
 
20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software20150611 track4 2_ae21_salesforce and ibm software
20150611 track4 2_ae21_salesforce and ibm software
 
Nintex Forms als Ersatz für InfoPath?
Nintex Forms als Ersatz für InfoPath?Nintex Forms als Ersatz für InfoPath?
Nintex Forms als Ersatz für InfoPath?
 
Microsoft Azure Cloud mit der Sitecore Experience Platform
Microsoft Azure Cloud mit der Sitecore Experience PlatformMicrosoft Azure Cloud mit der Sitecore Experience Platform
Microsoft Azure Cloud mit der Sitecore Experience Platform
 
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
 
MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5MT AG Präsentation Rapid Application Development mit APEX 5
MT AG Präsentation Rapid Application Development mit APEX 5
 
Rapid Application Development mit Openobject
Rapid Application Development mit OpenobjectRapid Application Development mit Openobject
Rapid Application Development mit Openobject
 
B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009B1 Acocon Lotus Day 08.09.2009
B1 Acocon Lotus Day 08.09.2009
 
Digitale Transformation von Enterprise Anwendungen
Digitale Transformation von Enterprise AnwendungenDigitale Transformation von Enterprise Anwendungen
Digitale Transformation von Enterprise Anwendungen
 
Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...
Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...
Optimierung des europäischen Einzelwagenverkehrs im Kontext der digitalen Tra...
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
 
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
20040921 Serviceorientierte Architektur für WebSphere und WebSphere Portal
 

Ähnlich wie BATbern42 Vom Frontend Monolithen zu Micro-Frontends

Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerSandro Sonntag
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit AngularJens Binfet
 
Web-Anwendungen mit BSP
Web-Anwendungen mit BSPWeb-Anwendungen mit BSP
Web-Anwendungen mit BSPrplantiko
 
SharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackSharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackUnic
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DNUG e.V.
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Koombea
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantChristian Nagel
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDNUG e.V.
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsStefan Adolf
 
Per Anhalter zu Cloud-nativen API Gateways
Per Anhalter zu Cloud-nativen API GatewaysPer Anhalter zu Cloud-nativen API Gateways
Per Anhalter zu Cloud-nativen API GatewaysQAware GmbH
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heutePhilipp Burgmer
 
IBM Connections - "Die richtige Infrastruktur"
IBM Connections - "Die richtige Infrastruktur"IBM Connections - "Die richtige Infrastruktur"
IBM Connections - "Die richtige Infrastruktur"Beck et al. GmbH
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Community ITmitte.de
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 

Ähnlich wie BATbern42 Vom Frontend Monolithen zu Micro-Frontends (20)

Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Server Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM ServerServer Revolutions- Der Spring Source DM Server
Server Revolutions- Der Spring Source DM Server
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Hybride Entwicklung mit Ionic
Hybride Entwicklung mit IonicHybride Entwicklung mit Ionic
Hybride Entwicklung mit Ionic
 
Web-Anwendungen mit BSP
Web-Anwendungen mit BSPWeb-Anwendungen mit BSP
Web-Anwendungen mit BSP
 
SharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-TrackSharePoint 2013 – Tech-Track
SharePoint 2013 – Tech-Track
 
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
DACHNUG50 Erfolgreiche Digitalisierung Notes Anwendungen mit Low Code L”sung ...
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplantModerne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
Moderne Business Apps mit XAML - oder mit WPF für die Zukunft geplant
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIsNever Code Alone: Von Symfony Forms zu einer SPA auf APIs
Never Code Alone: Von Symfony Forms zu einer SPA auf APIs
 
Per Anhalter zu Cloud-nativen API Gateways
Per Anhalter zu Cloud-nativen API GatewaysPer Anhalter zu Cloud-nativen API Gateways
Per Anhalter zu Cloud-nativen API Gateways
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
IBM Connections - "Die richtige Infrastruktur"
IBM Connections - "Die richtige Infrastruktur"IBM Connections - "Die richtige Infrastruktur"
IBM Connections - "Die richtige Infrastruktur"
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 

Mehr von BATbern

BATbern52 Moderation Berner Architekten Treffen zu Data Mesh
BATbern52 Moderation Berner Architekten Treffen zu Data MeshBATbern52 Moderation Berner Architekten Treffen zu Data Mesh
BATbern52 Moderation Berner Architekten Treffen zu Data MeshBATbern
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 
BATbern52 SBB zu Data Products und Knacknüsse
BATbern52 SBB zu Data Products und KnacknüsseBATbern52 SBB zu Data Products und Knacknüsse
BATbern52 SBB zu Data Products und KnacknüsseBATbern
 
BATbern52 Mobiliar zu Skalierte Datenprodukte mit Data Mesh
BATbern52 Mobiliar zu Skalierte Datenprodukte mit Data MeshBATbern52 Mobiliar zu Skalierte Datenprodukte mit Data Mesh
BATbern52 Mobiliar zu Skalierte Datenprodukte mit Data MeshBATbern
 
BATbern52 InnoQ on Data Mesh 2019 2023 2024++
BATbern52 InnoQ on Data Mesh 2019 2023 2024++BATbern52 InnoQ on Data Mesh 2019 2023 2024++
BATbern52 InnoQ on Data Mesh 2019 2023 2024++BATbern
 
Embracing Serverless: reengineering a real-estate digital marketplace
Embracing Serverless: reengineering a real-estate digital marketplaceEmbracing Serverless: reengineering a real-estate digital marketplace
Embracing Serverless: reengineering a real-estate digital marketplaceBATbern
 
Serverless und Event-Driven Architecture
Serverless und Event-Driven ArchitectureServerless und Event-Driven Architecture
Serverless und Event-Driven ArchitectureBATbern
 
Serverless Dev(Ops) in der Praxis
Serverless Dev(Ops) in der PraxisServerless Dev(Ops) in der Praxis
Serverless Dev(Ops) in der PraxisBATbern
 
Serverless at Lifestage
Serverless at LifestageServerless at Lifestage
Serverless at LifestageBATbern
 
Keynote Gregor Hohpe - Serverless Architectures
Keynote Gregor Hohpe - Serverless ArchitecturesKeynote Gregor Hohpe - Serverless Architectures
Keynote Gregor Hohpe - Serverless ArchitecturesBATbern
 
BATbern51 Serverless?!
BATbern51 Serverless?!BATbern51 Serverless?!
BATbern51 Serverless?!BATbern
 
Ein Rückblick anlässlich des 50. BAT aus Sicht eines treuen Partners
Ein Rückblick anlässlich des 50. BAT aus Sicht eines treuen PartnersEin Rückblick anlässlich des 50. BAT aus Sicht eines treuen Partners
Ein Rückblick anlässlich des 50. BAT aus Sicht eines treuen PartnersBATbern
 
MLOps journey at Swisscom: AI Use Cases, Architecture and Future Vision
MLOps journey at Swisscom: AI Use Cases, Architecture and Future VisionMLOps journey at Swisscom: AI Use Cases, Architecture and Future Vision
MLOps journey at Swisscom: AI Use Cases, Architecture and Future VisionBATbern
 
From Ideation to Production in 7 days: The Scoring Factory at Raiffeisen
From Ideation to Production in 7 days: The Scoring Factory at RaiffeisenFrom Ideation to Production in 7 days: The Scoring Factory at Raiffeisen
From Ideation to Production in 7 days: The Scoring Factory at RaiffeisenBATbern
 
The Future of Coaching in Sport with AI/ML
The Future of Coaching in Sport with AI/MLThe Future of Coaching in Sport with AI/ML
The Future of Coaching in Sport with AI/MLBATbern
 
Klassifizierung von Versicherungsschäden – AI und MLOps bei der Mobiliar
Klassifizierung von Versicherungsschäden – AI und MLOps bei der MobiliarKlassifizierung von Versicherungsschäden – AI und MLOps bei der Mobiliar
Klassifizierung von Versicherungsschäden – AI und MLOps bei der MobiliarBATbern
 
BATbern48_ZeroTrust-Konzept und Realität.pdf
BATbern48_ZeroTrust-Konzept und Realität.pdfBATbern48_ZeroTrust-Konzept und Realität.pdf
BATbern48_ZeroTrust-Konzept und Realität.pdfBATbern
 
BATbern48_How Zero Trust can help your organisation keep safe.pdf
BATbern48_How Zero Trust can help your organisation keep safe.pdfBATbern48_How Zero Trust can help your organisation keep safe.pdf
BATbern48_How Zero Trust can help your organisation keep safe.pdfBATbern
 
BATbern48_Zero Trust Architektur des ISC-EJPD.pdf
BATbern48_Zero Trust Architektur des ISC-EJPD.pdfBATbern48_Zero Trust Architektur des ISC-EJPD.pdf
BATbern48_Zero Trust Architektur des ISC-EJPD.pdfBATbern
 
Why did the shift-left end up in the cloud for Bank Julius Baer?
Why did the shift-left end up in the cloud for Bank Julius Baer?Why did the shift-left end up in the cloud for Bank Julius Baer?
Why did the shift-left end up in the cloud for Bank Julius Baer?BATbern
 

Mehr von BATbern (20)

BATbern52 Moderation Berner Architekten Treffen zu Data Mesh
BATbern52 Moderation Berner Architekten Treffen zu Data MeshBATbern52 Moderation Berner Architekten Treffen zu Data Mesh
BATbern52 Moderation Berner Architekten Treffen zu Data Mesh
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 
BATbern52 SBB zu Data Products und Knacknüsse
BATbern52 SBB zu Data Products und KnacknüsseBATbern52 SBB zu Data Products und Knacknüsse
BATbern52 SBB zu Data Products und Knacknüsse
 
BATbern52 Mobiliar zu Skalierte Datenprodukte mit Data Mesh
BATbern52 Mobiliar zu Skalierte Datenprodukte mit Data MeshBATbern52 Mobiliar zu Skalierte Datenprodukte mit Data Mesh
BATbern52 Mobiliar zu Skalierte Datenprodukte mit Data Mesh
 
BATbern52 InnoQ on Data Mesh 2019 2023 2024++
BATbern52 InnoQ on Data Mesh 2019 2023 2024++BATbern52 InnoQ on Data Mesh 2019 2023 2024++
BATbern52 InnoQ on Data Mesh 2019 2023 2024++
 
Embracing Serverless: reengineering a real-estate digital marketplace
Embracing Serverless: reengineering a real-estate digital marketplaceEmbracing Serverless: reengineering a real-estate digital marketplace
Embracing Serverless: reengineering a real-estate digital marketplace
 
Serverless und Event-Driven Architecture
Serverless und Event-Driven ArchitectureServerless und Event-Driven Architecture
Serverless und Event-Driven Architecture
 
Serverless Dev(Ops) in der Praxis
Serverless Dev(Ops) in der PraxisServerless Dev(Ops) in der Praxis
Serverless Dev(Ops) in der Praxis
 
Serverless at Lifestage
Serverless at LifestageServerless at Lifestage
Serverless at Lifestage
 
Keynote Gregor Hohpe - Serverless Architectures
Keynote Gregor Hohpe - Serverless ArchitecturesKeynote Gregor Hohpe - Serverless Architectures
Keynote Gregor Hohpe - Serverless Architectures
 
BATbern51 Serverless?!
BATbern51 Serverless?!BATbern51 Serverless?!
BATbern51 Serverless?!
 
Ein Rückblick anlässlich des 50. BAT aus Sicht eines treuen Partners
Ein Rückblick anlässlich des 50. BAT aus Sicht eines treuen PartnersEin Rückblick anlässlich des 50. BAT aus Sicht eines treuen Partners
Ein Rückblick anlässlich des 50. BAT aus Sicht eines treuen Partners
 
MLOps journey at Swisscom: AI Use Cases, Architecture and Future Vision
MLOps journey at Swisscom: AI Use Cases, Architecture and Future VisionMLOps journey at Swisscom: AI Use Cases, Architecture and Future Vision
MLOps journey at Swisscom: AI Use Cases, Architecture and Future Vision
 
From Ideation to Production in 7 days: The Scoring Factory at Raiffeisen
From Ideation to Production in 7 days: The Scoring Factory at RaiffeisenFrom Ideation to Production in 7 days: The Scoring Factory at Raiffeisen
From Ideation to Production in 7 days: The Scoring Factory at Raiffeisen
 
The Future of Coaching in Sport with AI/ML
The Future of Coaching in Sport with AI/MLThe Future of Coaching in Sport with AI/ML
The Future of Coaching in Sport with AI/ML
 
Klassifizierung von Versicherungsschäden – AI und MLOps bei der Mobiliar
Klassifizierung von Versicherungsschäden – AI und MLOps bei der MobiliarKlassifizierung von Versicherungsschäden – AI und MLOps bei der Mobiliar
Klassifizierung von Versicherungsschäden – AI und MLOps bei der Mobiliar
 
BATbern48_ZeroTrust-Konzept und Realität.pdf
BATbern48_ZeroTrust-Konzept und Realität.pdfBATbern48_ZeroTrust-Konzept und Realität.pdf
BATbern48_ZeroTrust-Konzept und Realität.pdf
 
BATbern48_How Zero Trust can help your organisation keep safe.pdf
BATbern48_How Zero Trust can help your organisation keep safe.pdfBATbern48_How Zero Trust can help your organisation keep safe.pdf
BATbern48_How Zero Trust can help your organisation keep safe.pdf
 
BATbern48_Zero Trust Architektur des ISC-EJPD.pdf
BATbern48_Zero Trust Architektur des ISC-EJPD.pdfBATbern48_Zero Trust Architektur des ISC-EJPD.pdf
BATbern48_Zero Trust Architektur des ISC-EJPD.pdf
 
Why did the shift-left end up in the cloud for Bank Julius Baer?
Why did the shift-left end up in the cloud for Bank Julius Baer?Why did the shift-left end up in the cloud for Bank Julius Baer?
Why did the shift-left end up in the cloud for Bank Julius Baer?
 

BATbern42 Vom Frontend Monolithen zu Micro-Frontends

  • 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