DWX2019: Wir prügeln den Monolithen ins Web

In Projekten für unsere Kunden treffen wir heutzutage immer wieder die gleiche Situation an: Die Kernapplikation der Unternehmung ist über mehrere Jahrzehnte und verschiedene Technologien zu einem funktionalen aber hässlichen Monolithen herangewachsen. Allen ist klar, dass eine Modernisierung nötig ist. Aber wie? Mehrere Modernisierungsprojekte sind bereits katastrophal gescheitert. In dieser Session beleuchten wir einen Ausweg aus der Misere. Wir zeigen einen Ansatz, bei welchem hochkomplexe Desktop-Applikationen allen Problemen zum Trotz schrittweise ins Web überführt werden können. Wir plaudern aus dem Nähkästchen und erzählen, wie wir für unseren Kunden die Migration von VB/C#/WinForms/WPF nach Angular geschafft haben.

Transcript

1. 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, thomas.gassmann@trivadis.com Manuel Meyer, manuel.meyer@trivadis.com @gassmannT @manumeyer1
2. Wer sind wir? Thomas Gassmann Consultant, Trainer, Speaker thomas.gassmann@trivadis.com @gassmanT www.thomasgassmann.net Manuel Meyer Consultant, Trainer, Speaker manuel.meyer@trivadis.com @manumeyer1 www.manuelmeyer.net
3. 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.
4. Die Ausgangslage
5. „…Projekt…“ „…vom Desktop ins Web…“ „…Migration läuft nicht…“ „…brauchen Unterstützung…“ Der Kunde ruft an:
8. MACINTOSH Performa 550 LC (mit Ethernet!) (und Tetris!!!)
9. „Wie lange ist 26 Jahre wirklich?“
13. Die Herausforderungen
15. Anpassbarkeit
16. Effiziente Bedienbarkeit
17. Informationsdichte
18. Wo ist eigentlich das Problem?
19. „Das ist so alt, dass muss man doch komplett neu schreiben!“
23. „Die Utopie der grünen Wiese“ --Manuel & Thomas
24. --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“
25. --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
26. Quelle: https://www.slideshare.net/udidahan/own-the-future
27. Quelle: https://www.slideshare.net/udidahan/own-the-future
28. --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
29. Ziele des Lösungsansatzes ▪ Kein Big Bang ▪ Keine grüne Wiese ▪ Den User nicht überfordern ▪ Exploratives testen & ablösen ▪ Agile Entwicklung.
30. Der Lösungsansatz
32. Step by Step
33. Kommunikation zwischen der alten und der neuen Welt
34. 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.
35. Umsetzung beim Kunden
36. 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.
37. NgRx: Redux Component Action Reducers State Rest Service Dispatch Notify Send Create new state Effect
38. 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.
41. 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.
43. Demo https://github.com/AngularAtTrivadis/WebWinFormsInteraction
44. 4 Probleme aus der Praxis (mit Lösungen)
45. Problem 1 „Die Spezifikation ist die alte Anwendung.“
46. Lösung 1
47. hoto credit: Mark Spearman on VisualHunt.com / CC BY Und tschüss…
48. Photo credit: zoetnet on Visual Hunt / CC BY
49. Problem 2: «Excel im Browser» „Das muss im Web genau so aussehen wie jetzt…“
51. Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
52. 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…
54. Problem 3: Das DatePicker Problem
55. Lösung 3 ▪ «Schau im alten System wies funktioniert» reicht nicht als Spezifikation. ▪ Die Kunst der Anforderungsaufnahme muss beherrscht werden. ▪ Nicht alles selbst bauen!
56. Problem 4 „Bei Google geht’s doch auch. Schau mal auf meinem Handy…“
57. Lösung 4
58. 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.
59. Dankeschön! Manuel Meyer Consultant, Trainer, Speaker manuel.meyer@trivadis.com Thomas Gassmann Consultant, Trainer, Speaker thomas.gassmann@trivadis.com @gassmanT www.thomasgassmann.net @manumeyer1 www.manuelmeyer.net