Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Die Ausgangslage

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

„Wie lange ist 26 Jahre wirklich?“

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Aber wie kam es so weit?

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

26 Jahre später…

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Die Herausforderungen

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Wo ist eigentlich das Problem?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

„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/

Slide 28

Slide 28 text

„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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

„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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Der Lösungsansatz

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Kommunikation zwischen der alten und der neuen Welt

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

Master – Slave Beziehung

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

4 Probleme aus der Praxis (mit Lösungen)

Slide 46

Slide 46 text

Problem 1 „Die Spezifikation ist die alte Anwendung.“

Slide 47

Slide 47 text

Lösung 1

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Photo credit: zoetnet on Visual Hunt / CC BY

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Lösung 2

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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…

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Problem 3: Das DatePicker Problem

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Lösung 4

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content