BASTA2019: Von WPF nach Angular in 60 Minuten

Slide 1

Slide 1 text

www.thomasgassmann.net/ www.manuelmeyer.net/ @gassmannT @manumeyer1 Von WPF nach Angular in 60 Minuten BASTA 2019 Thomas Gassmann, Manuel Meyer

Slide 2

Slide 2 text

Agenda ▪ WPF to Angular ▪ How to start with Angular? ▪ Migrating an existing application ▪ Real life problems (and solutions).

Slide 3

Slide 3 text

WPF to Angular

Slide 4

Slide 4 text

Fussballmanager

Slide 5

Slide 5 text

«The by-design purpose of JavaScript was to make the monkey dance when you moused over it» -- Brendan Eich

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

New Project

Slide 8

Slide 8 text

View Code

Slide 9

Slide 9 text

Model Classes

Slide 10

Slide 10 text

Backend Call

Slide 11

Slide 11 text

Data Binding

Slide 12

Slide 12 text

WPF versus Angular ▪ File new Project ▪ C# ▪ XAML ▪ Controls ▪ User Controls ▪ Resource Dictionaries ▪ Commands ▪ Data Binding ▪ Value Converter ▪ ng new ▪ Typescript ▪ HTML ▪ HTML Elements ▪ Components ▪ CSS ▪ HTML Events ▪ Data Binding ▪ Pipe.

Slide 13

Slide 13 text

How to start with Angular?

Slide 14

Slide 14 text

Download Visual Studio Code

Slide 15

Slide 15 text

Install VSCode Extensions

Slide 16

Slide 16 text

Get it from: nodejs.org

Slide 17

Slide 17 text

npm install @angular/cli

Slide 18

Slide 18 text

npm install @angular/cli -g

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Angular CLI ▪ Command line interface for Angular ▪ Build an Angular application ▪ Generate files (Scaffolding) ▪ Execute / run the application ▪ Run unit and e2e tests ▪ Prepare and «optimize» the application for deployment.

Slide 21

Slide 21 text

Anatomy of an Angular App Module Component person-list Component person-detail Component person-edit PersonService

Slide 22

Slide 22 text

CLI: Commands ▪ Create a new Angular CLI project ▪ Serve the app and open ▪ Build in dev mode ng new soccerManager ng serve -o ng build

Slide 23

Slide 23 text

Fussballmanager https://github.com/gassmannT/WPFtoAngular

Slide 24

Slide 24 text

4 Real life problems and solutions

Slide 25

Slide 25 text

Problem 1 „Die Spezifikation ist die alte Anwendung.“

Slide 26

Slide 26 text

Lösung 1

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Photo credit: zoetnet on Visual Hunt / CC BY

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Lösung 2

Slide 31

Slide 31 text

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

Slide 32

Slide 32 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 33

Slide 33 text

No content

Slide 34

Slide 34 text

Problem 3 The DatePicker Problem

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

The product owner is super happy on the green field.

Slide 37

Slide 37 text

But fun is over when the senior developers start working…

Slide 38

Slide 38 text

And it gets worse and worse…

Slide 39

Slide 39 text

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

Slide 40

Slide 40 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 41

Slide 41 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 42

Slide 42 text

Lösung 4

Slide 43

Slide 43 text

Migrating an existing app

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Join up the old and new world

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Recap

Slide 50

Slide 50 text

Recap ▪ Most of the concepts are similar ▪ Its 2019. Thanks to TypeScript, we do NOT need to be afraid of JS anymore ▪ Technologies are aligning ▪ But the Web is a different world.

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Links ▪ Github: Fussballmanager https://github.com/gassmannT/WPFtoAngular ▪ Joel Spolsky: Things you should never do https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/ ▪ Udi Dahan: Own the Future https://www.youtube.com/watch?v=2iYdKQXGY2E https://www.slideshare.net/udidahan/own-the-future ▪ Web-Winforms Interaction https://github.com/AngularAtTrivadis/WebWinFormsInteraction ▪ Wir prügeln den Monolithen ins Web https://manuelmeyer.net/2019/09/trivadis-techevent-2019-wir-prugeln-den-monolithen-ins- web/