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