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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

4. Die Ausgangslage
   

   View Slide

5. „…Projekt…“
   „…vom Desktop ins Web…“
   „…Migration läuft nicht…“
   „…brauchen Unterstützung…“
   Der Kunde ruft an:
   

   View Slide

6. View Slide

7. View Slide

8. MACINTOSH
   Performa 550 LC
   (mit Ethernet!)
   (und Tetris!!!)
   

   View Slide

9. „Wie lange ist 26 Jahre wirklich?“
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. Die Herausforderungen
    

    View Slide

14. View Slide

15. Anpassbarkeit
    

    View Slide

16. Effiziente Bedienbarkeit
    

    View Slide

17. Informationsdichte
    

    View Slide

18. Wo ist eigentlich das Problem?
    

    View Slide

19. „Das ist so alt, dass muss
    man doch komplett neu
    schreiben!“
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. „Die Utopie der grünen
    Wiese“
    --Manuel & Thomas
    

    View Slide

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“
    

    View Slide

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
    

    View Slide

26. Quelle:
    https://www.slideshare.net/udidahan/own-the-future
    

    View Slide

27. Quelle:
    https://www.slideshare.net/udidahan/own-the-future
    

    View Slide

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
    

    View Slide

29. Ziele des Lösungsansatzes
    ▪ Kein Big Bang
    ▪ Keine grüne Wiese
    ▪ Den User nicht überfordern
    ▪ Exploratives testen & ablösen
    ▪ Agile Entwicklung.
    

    View Slide

30. Der Lösungsansatz
    

    View Slide

31. View Slide

32. Step by Step
    

    View Slide

33. Kommunikation zwischen der alten und der neuen Welt
    

    View Slide

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.
    

    View Slide

35. Umsetzung beim Kunden
    

    View Slide

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.
    

    View Slide

37. NgRx: Redux
    Component
    Action
    Reducers
    State
    Rest
    Service
    Dispatch
    Notify
    Send
    Create new state
    Effect
    

    View Slide

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.
    

    View Slide

39. View Slide

40. View Slide

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.
    

    View Slide

42. View Slide

43. Demo
    https://github.com/AngularAtTrivadis/WebWinFormsInteraction
    

    View Slide

44. 4 Probleme aus der Praxis
    (mit Lösungen)
    

    View Slide

45. Problem 1
    „Die Spezifikation ist die
    alte Anwendung.“
    

    View Slide

46. Lösung 1
    

    View Slide

47. hoto credit: Mark Spearman on VisualHunt.com / CC BY
    Und tschüss…
    

    View Slide

48. Photo credit: zoetnet on Visual Hunt / CC BY
    

    View Slide

49. Problem 2: «Excel im Browser»
    „Das muss im Web genau
    so aussehen wie jetzt…“
    

    View Slide

50. View Slide

51. Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
    

    View Slide

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…
    

    View Slide

53. View Slide

54. Problem 3: Das DatePicker Problem
    

    View Slide

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!
    

    View Slide

56. Problem 4
    „Bei Google geht’s doch
    auch. Schau mal auf
    meinem Handy…“
    

    View Slide

57. Lösung 4
    

    View Slide

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.
    

    View Slide

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
    

    View Slide