Slide 1
Slide 1 text
manuelmeyer.net
thomasgassmann.net
@gassmannT
@manumeyer1
Wir prügeln den Monolithen ins Web
Manuel Meyer, Thomas Gassmann
Developer Week 2021
Slide 2
Slide 2 text
Agenda
▪ Die Ausgangslage
▪ Die Herausforderungen
▪ Wo ist eigentlich das Problem?
▪ Der Lösungsansatz
▪ Probleme (und Lösungen) aus der
Praxis.
Slide 3
Slide 3 text
Manuel Meyer
helps customers:
• to kick-start the Azure journey.
• to architect, implement and optimize their
Azure Solutions
www.manuelmeyer.net
www.azurezurichusergroup.com
@manumeyer1
Slide 4
Slide 4 text
Thomas Gassmann
helps customers:
• to architect and implement their business
applications
• with the migration of large application
www.thomasgassmann.net
@gassmannT
Slide 5
Slide 5 text
Die Ausgangslage
Slide 6
Slide 6 text
Der Kunde ruft an:
„…Projekt…“
„…vom Desktop ins Web…“
„…Migration läuft nicht…“
„…brauchen Unterstützung…“
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
MACINTOSH
Performa 550 LC
(mit Ethernet!)
(und Tetris!!!)
Slide 10
Slide 10 text
„Wie lange ist 26 Jahre wirklich?“
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Aber wie kam es so weit?
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
26 Jahre später…
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Die Herausforderungen
Slide 20
Slide 20 text
Herausforderungen von modernen Applikationen
Fast, fluid, and reliable
experience
Quick functionality and
content updates
Cross-platform
engagement
Intelligent
customization
Authentication and
identity, sensitive data
handling
HELLO
CUSTOM
OFFER
☺ New ways to interact
with customers
Slide 21
Slide 21 text
Wo ist eigentlich das
Problem?
Slide 22
Slide 22 text
„Das ist so alt, dass muss man doch
komplett neu schreiben!“
--Alle
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
„Die Utopie der grünen Wiese“
--Manuel & Thomas
Slide 27
Slide 27 text
„The worst strategic mistake is
rewriting code from scratch“
--Joel Spolsky
Things you should never do:
https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/
Slide 28
Slide 28 text
„The integration Problem“
&
„The black hole of coupling“
--Udi Dahan
Own the Future:
https://www.youtube.com/watch?v=2iYdKQXGY2E
Slides:
https://www.slideshare.net/udidahan/own-the-future
Slide 29
Slide 29 text
Quelle:
https://www.slideshare.net/udidahan/own-the-future
Slide 30
Slide 30 text
„The integration Problem“
&
„The black hole of coupling“
--Udi Dahan
Own the Future:
https://www.youtube.com/watch?v=2iYdKQXGY2E
Slides:
https://www.slideshare.net/udidahan/own-the-future
Slide 31
Slide 31 text
Ziele des Lösungsansatzes
▪ Kein Big Bang
▪ Keine grüne Wiese
▪ Den User nicht überfordern
▪ Exploratives testen & ablösen
▪ Agile Entwicklung.
Slide 32
Slide 32 text
Der Lösungsansatz
Slide 33
Slide 33 text
Ist Zustand: Clients mit zentraler Datenbank
Clients
Die Software läuft auf den einzelnen
Clients
Zentrale Datenbank
Innerhalb des Unternehmens
Client 1 Client 2 Client …
Database
Slide 34
Slide 34 text
Clients
Die Software läuft auf den einzelnen
Clients
App Server
Bussiness Logik innerhalb des
Unternehmens zentralisiert.
Zentrale Datenbank
Innerhalb des Unternehmens
Client 1 Client 2 Client …
App Server
Database
Auftrennung der Business Logik
Slide 35
Slide 35 text
Clients
Legecy App wird schrittweise ins Web
migriert und kommuniziert mit der
Legecy App über WebSockets
App Server
z.B. Rest Service in der Cloud oder vorerst
noch im Unternehmen
Zentrale Datenbank
In der Azure Cloud oder vorerst noch im
Unternehmen
Web App Legacy Client
App Server
Database
Schrittweise Migration ins Web
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Kommunikation zwischen der
alten und der neuen Welt
Slide 38
Slide 38 text
Wieso Angular?
▪ Typescript als Programmiersprache
▪ Funktionalität / Anpassbarkeit
▪ Gutes Tooling (Angular CLI)
▪ Grosse Community und Google
▪ NgRx Bibliothek für State Management
▪ Hohe Performance, im Kundenprojekt:
Initial load ~193 Request < 2 sec
Page switch < 0.5 sec.
Slide 39
Slide 39 text
Master – Slave Beziehung
▪ Das alte System ist das Master System
▪ Der Master startet das Slave System
▪ Der Master verwaltet das Login/Logout der User im Slave-
System
▪ Das Slave-System erhält vom Master einen Identity Token
▪ Mittelfristig wird das neue System zum Master.
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Das VETO-Recht
▪ Jede Applikation sollte ein Veto-Recht haben
▪ Beispiel: Während System A einen Datensatz bearbeitet,
darf in System B nicht auf einen anderen gewechselt
werden.
Slide 43
Slide 43 text
Master – Slave Beziehung
Slide 44
Slide 44 text
DEMO
https://github.com/Trivadis/WebWinFormsInteraction
Slide 45
Slide 45 text
4 Probleme aus der Praxis
(mit Lösungen)
Slide 46
Slide 46 text
Problem 1
„Die Spezifikation ist die
alte Anwendung.“
Slide 47
Slide 47 text
Lösung 1
Slide 48
Slide 48 text
Lösung 1
Photo credit: Mark Spearman on VisualHunt.com / CC BY
Slide 49
Slide 49 text
Photo credit: zoetnet on Visual Hunt / CC BY
Slide 50
Slide 50 text
Problem 2
„Das muss im Web genau
so aussehen wie jetzt…“
Slide 51
Slide 51 text
Lösung 2
Slide 52
Slide 52 text
Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
Slide 53
Slide 53 text
Lösung 2
▪ Einen Partner für UX & UI Design involvieren
▪ Muss können: «Web User Experience Design»
▪ Muss können: «Web User Interface Design»
▪ Muss können: CODE liefern!
▪ ….sonst…
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Problem 3: Das DatePicker
Problem
Slide 56
Slide 56 text
Lösung 3
▪ «Schau im alten System wies funktioniert»
reicht nicht als Spezifikation
▪ Die Kunst der Anforderungsaufnahme muss
beherrscht werden
▪ Nicht alles selbst bauen!
▪ Kompromisse eingehen!.
Slide 57
Slide 57 text
Problem 3
„Bei Google geht’s doch
auch. Schau mal auf
meinem Handy…“
Slide 58
Slide 58 text
Lösung 4
Slide 59
Slide 59 text
Zusammenfassung
▪ Die Big Bang Migration und die grüne Wiese
sind Illusionen
▪ Die Ablösung muss als normale Evolution des
Produkts angeschaut werden
▪ Der gezeigte Lösungsansatz bietet einen Weg
aus der Misere
▪ Aber: Das Web ist und bleibt eine andere Welt.
Slide 60
Slide 60 text
Thank you!
Manuel Meyer
www.manuelmeyer.net
@manumeyer1
[email protected]
Thomas Gassmann
www.thomasgassmann.net
@gassmannT
[email protected]
Slide 61
Slide 61 text
No content