Slide 1
Slide 1 text
BASEL BERN BRUGG DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. GENF
HAMBURG KOPENHAGEN LAUSANNE MÜNCHEN STUTTGART WIEN ZÜRICH
Wir prügeln den Monolithen ins Web!
Developer Week 2019
Thomas Gassmann, [email protected]
Manuel Meyer, [email protected]
@gassmannT @manumeyer1
Slide 2
Slide 2 text
Wer sind wir?
Thomas Gassmann
Consultant, Trainer, Speaker
[email protected]
@gassmanT
www.thomasgassmann.net
Manuel Meyer
Consultant, Trainer, Speaker
[email protected]
@manumeyer1
www.manuelmeyer.net
Slide 3
Slide 3 text
Agenda
1. Die Ausgangslage
2. Die Herausforderungen
3. Wo ist eigentlich das Problem?
4. Der Lösungsansatz
5. Probleme (und Lösungen) aus der Praxis.
Slide 4
Slide 4 text
Die Ausgangslage
Slide 5
Slide 5 text
„…Projekt…“
„…vom Desktop ins Web…“
„…Migration läuft nicht…“
„…brauchen Unterstützung…“
Der Kunde ruft an:
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
MACINTOSH
Performa 550 LC
(mit Ethernet!)
(und Tetris!!!)
Slide 9
Slide 9 text
„Wie lange ist 26 Jahre wirklich?“
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Die Herausforderungen
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Anpassbarkeit
Slide 16
Slide 16 text
Effiziente Bedienbarkeit
Slide 17
Slide 17 text
Informationsdichte
Slide 18
Slide 18 text
Wo ist eigentlich das Problem?
Slide 19
Slide 19 text
„Das ist so alt, dass muss
man doch komplett neu
schreiben!“
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
„Die Utopie der grünen
Wiese“
--Manuel & Thomas
Slide 24
Slide 24 text
--Joel Spolsky
Things you should never do:
https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/
„The worst strategic mistake is
rewriting code from scratch“
Slide 25
Slide 25 text
--Udi Dahan
„The integration Problem“
&
„The black hole of coupling“
Own the Future:
https://www.youtube.com/watch?v=2iYdKQXGY2E
Slides:
https://www.slideshare.net/udidahan/own-the-future
Slide 26
Slide 26 text
Quelle:
https://www.slideshare.net/udidahan/own-the-future
Slide 27
Slide 27 text
Quelle:
https://www.slideshare.net/udidahan/own-the-future
Slide 28
Slide 28 text
--Udi Dahan
„The integration Problem“
&
„The black hole of coupling“
Own the Future:
https://www.youtube.com/watch?v=2iYdKQXGY2E
Slides:
https://www.slideshare.net/udidahan/own-the-future
Slide 29
Slide 29 text
Ziele des Lösungsansatzes
▪ Kein Big Bang
▪ Keine grüne Wiese
▪ Den User nicht überfordern
▪ Exploratives testen & ablösen
▪ Agile Entwicklung.
Slide 30
Slide 30 text
Der Lösungsansatz
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Step by Step
Slide 33
Slide 33 text
Kommunikation zwischen der alten und der neuen Welt
Slide 34
Slide 34 text
Was ist SignalR?
▪ Ist eine Bibliothek für ASP.NET
▪ Ermöglicht die Kommunikation vom Server zum Client
(der im Browser läuft)
▪ Basiert auf WebSockets
▪ Bietet Fallback-Mechanismen z.B. Long-Polling
▪ Server- sowie Clientseitige Frameworks vorhanden.
Slide 35
Slide 35 text
Umsetzung beim Kunden
Slide 36
Slide 36 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 37
Slide 37 text
NgRx: Redux
Component
Action
Reducers
State
Rest
Service
Dispatch
Notify
Send
Create new state
Effect
Slide 38
Slide 38 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 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 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 42
Slide 42 text
No content
Slide 43
Slide 43 text
Demo
https://github.com/AngularAtTrivadis/WebWinFormsInteraction
Slide 44
Slide 44 text
4 Probleme aus der Praxis
(mit Lösungen)
Slide 45
Slide 45 text
Problem 1
„Die Spezifikation ist die
alte Anwendung.“
Slide 46
Slide 46 text
Lösung 1
Slide 47
Slide 47 text
hoto credit: Mark Spearman on VisualHunt.com / CC BY
Und tschüss…
Slide 48
Slide 48 text
Photo credit: zoetnet on Visual Hunt / CC BY
Slide 49
Slide 49 text
Problem 2: «Excel im Browser»
„Das muss im Web genau
so aussehen wie jetzt…“
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
Slide 52
Slide 52 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 53
Slide 53 text
No content
Slide 54
Slide 54 text
Problem 3: Das DatePicker Problem
Slide 55
Slide 55 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!
Slide 56
Slide 56 text
Problem 4
„Bei Google geht’s doch
auch. Schau mal auf
meinem Handy…“
Slide 57
Slide 57 text
Lösung 4
Slide 58
Slide 58 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 59
Slide 59 text
Dankeschön!
Manuel Meyer
Consultant, Trainer, Speaker
[email protected]
Thomas Gassmann
Consultant, Trainer, Speaker
[email protected]
@gassmanT
www.thomasgassmann.net
@manumeyer1
www.manuelmeyer.net