$30 off During Our Annual Pro Sale. View Details »

DWX2019: Wir prügeln den Monolithen ins Web

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.

Manuel Meyer

June 26, 2019
Tweet

More Decks by Manuel Meyer

Other Decks in Programming

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, [email protected]
    Manuel Meyer, [email protected]
    @gassmannT @manumeyer1

    View Slide

  2. 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

    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
    [email protected]
    Thomas Gassmann
    Consultant, Trainer, Speaker
    [email protected]
    @gassmanT
    www.thomasgassmann.net
    @manumeyer1
    www.manuelmeyer.net

    View Slide