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

DWX2021 - Wir prügeln den Monolithen ins Web

DWX2021 - 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 29, 2021
Tweet

More Decks by Manuel Meyer

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Manuel Meyer
    helps customers:
    • to kick-start the Azure journey.
    • to architect, implement and optimize their
    Azure Solutions
    www.manuelmeyer.net
    www.azurezurichusergroup.com
    @manumeyer1

    View full-size slide

  4. Thomas Gassmann
    helps customers:
    • to architect and implement their business
    applications
    • with the migration of large application
    www.thomasgassmann.net
    @gassmannT

    View full-size slide

  5. Die Ausgangslage

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. „Wie lange ist 26 Jahre wirklich?“

    View full-size slide

  9. Aber wie kam es so weit?

    View full-size slide

  10. 26 Jahre später…

    View full-size slide

  11. Die Herausforderungen

    View full-size slide

  12. Herausforderungen von modernen Applikationen
    Fast, fluid, and reliable
    experience
    Quick functionality and
    content updates
    Cross-platform
    engagement
    Intelligent
    customization
    Authentication and
    identity, sensitive data
    handling
    HELLO
    CUSTOM
    OFFER
    ☺ New ways to interact
    with customers

    View full-size slide

  13. Wo ist eigentlich das
    Problem?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. „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 full-size slide

  17. „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 full-size slide

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

    View full-size slide

  19. „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 full-size slide

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

    View full-size slide

  21. Der Lösungsansatz

    View full-size slide

  22. Ist Zustand: Clients mit zentraler Datenbank
    Clients
    Die Software läuft auf den einzelnen
    Clients
    Zentrale Datenbank
    Innerhalb des Unternehmens
    Client 1 Client 2 Client …
    Database

    View full-size slide

  23. Clients
    Die Software läuft auf den einzelnen
    Clients
    App Server
    Bussiness Logik innerhalb des
    Unternehmens zentralisiert.
    Zentrale Datenbank
    Innerhalb des Unternehmens
    Client 1 Client 2 Client …
    App Server
    Database
    Auftrennung der Business Logik

    View full-size slide

  24. Clients
    Legecy App wird schrittweise ins Web
    migriert und kommuniziert mit der
    Legecy App über WebSockets
    App Server
    z.B. Rest Service in der Cloud oder vorerst
    noch im Unternehmen
    Zentrale Datenbank
    In der Azure Cloud oder vorerst noch im
    Unternehmen
    Web App Legacy Client
    App Server
    Database
    Schrittweise Migration ins Web

    View full-size slide

  25. Kommunikation zwischen der
    alten und der neuen Welt

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. Master – Slave Beziehung

    View full-size slide

  30. DEMO
    https://github.com/Trivadis/WebWinFormsInteraction

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. Problem 3: Das DatePicker
    Problem

    View full-size slide

  39. 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 full-size slide

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

    View full-size slide

  41. 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 full-size slide

  42. Thank you!
    Manuel Meyer
    www.manuelmeyer.net
    @manumeyer1
    [email protected]
    Thomas Gassmann
    www.thomasgassmann.net
    @gassmannT
    [email protected]

    View full-size slide