Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Trivadis TechEvent 2019: Wir prügeln den Monolithen ins Web

Manuel Meyer
September 13, 2019

Trivadis TechEvent 2019: 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

September 13, 2019
Tweet

More Decks by Manuel Meyer

Other Decks in Technology

Transcript

  1. Wir prügeln den Monolithen ins Web
    Thomas Gassmann, Manuel Meyer
    @gassmannT
    @manumeyer1
    www.thomasgassmann.net/
    www.manuelmeyer.net/

    View Slide

  2. Agenda
    ▪ Die Ausgangslage
    ▪ Die Herausforderungen
    ▪ Wo ist eigentlich das Problem?
    ▪ Der Lösungsansatz
    ▪ Probleme (und Lösungen) aus der
    Praxis.

    View Slide

  3. Die Ausgangslage

    View Slide

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

    View Slide

  5. View Slide

  6. View Slide

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

    View Slide

  8. „Wie lange ist 26 Jahre wirklich?“

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Aber wie kam es so weit?

    View Slide

  13. View Slide

  14. View Slide

  15. 26 Jahre später…

    View Slide

  16. View Slide

  17. Die Herausforderungen

    View Slide

  18. View Slide

  19. Anpassbarkeit

    View Slide

  20. Effiziente Bedienbarkeit

    View Slide

  21. Informationsdichte

    View Slide

  22. Wo ist eigentlich das
    Problem?

    View Slide

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

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

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

    View Slide

  28. „The worst strategic mistake is
    rewriting code from scratch“
    --Joel Spolsky
    Things you should never do:
    https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/

    View Slide

  29. „The integration Problem“
    &
    „The black hole of coupling“
    --Udi Dahan
    Own the Future:
    https://www.youtube.com/watch?v=2iYdKQXGY2E
    Slides:
    https://www.slideshare.net/udidahan/own-the-future

    View Slide

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

    View Slide

  31. „The integration Problem“
    &
    „The black hole of coupling“
    --Udi Dahan
    Own the Future:
    https://www.youtube.com/watch?v=2iYdKQXGY2E
    Slides:
    https://www.slideshare.net/udidahan/own-the-future

    View Slide

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

    View Slide

  33. Der Lösungsansatz

    View Slide

  34. View Slide

  35. View Slide

  36. Kommunikation zwischen der
    alten und der neuen Welt

    View Slide

  37. Was ist SignalR?
    ▪ Ist eine Bibliothek für ASP.NET
    ▪ Ermöglicht die Kommunikation vom
    Server zum Client (der im Browser
    läuft)

    View Slide

  38. Wieso Angular?
    ▪ Enterprise Ready Webapplications
    ▪ Grosse Community und Google
    ▪ Hohe Performance, im
    Kundenprojekt:
    Initial load ~193 Request < 2 sec
    Page switch < 0.5 sec.

    View Slide

  39. 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
    ▪ Mittelfristig wird das neue System zum
    Master.

    View Slide

  40. View Slide

  41. View Slide

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

  43. View Slide

  44. DEMO
    https://github.com/AngularAtTrivadis/WebWinFormsInteraction

    View Slide

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

    View Slide

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

    View Slide

  47. Lösung 1

    View Slide

  48. Lösung 1
    Photo credit: Mark Spearman on VisualHunt.com / CC BY

    View Slide

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

    View Slide

  50. Problem 2
    „Das muss im Web genau
    so aussehen wie jetzt…“

    View Slide

  51. Lösung 2

    View Slide

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

    View Slide

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

  54. View Slide

  55. Problem 3: Das DatePicker
    Problem

    View Slide

  56. Lösung 3
    ▪ «Schau im alten System wies funktioniert»
    reicht nicht als Spezifikation
    ▪ Die Kunst der Anforderungsaufnahme muss
    beherrscht werden
    ▪ Nicht alles selbst bauen!
    ▪ Kompromisse eingehen!.

    View Slide

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

    View Slide

  58. Lösung 4

    View Slide

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

  60. Thank you!
    Manuel Meyer
    www.manuelmeyer.net
    @manumeyer1
    [email protected]
    Thomas Gassmann
    www.thomasgassmann.net
    @gassmannT
    [email protected]
    Raum Basel
    12:00

    View Slide

  61. View Slide