Slide 1

Slide 1 text

www.thomasgassmann.net/ www.manuelmeyer.net/ @gassmannT @manumeyer1 Von WPF nach Angular in 60 Minuten .NET Developer Conference DDC 2020 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

Fussballmanager

Slide 14

Slide 14 text

How to start with Angular?

Slide 15

Slide 15 text

Download Visual Studio Code

Slide 16

Slide 16 text

Install VSCode Extensions

Slide 17

Slide 17 text

Get it from: nodejs.org

Slide 18

Slide 18 text

npm install @angular/cli

Slide 19

Slide 19 text

npm install @angular/cli -g

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 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 22

Slide 22 text

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

Slide 23

Slide 23 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 24

Slide 24 text

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

Slide 25

Slide 25 text

4 Real life problems and solutions

Slide 26

Slide 26 text

Problem 1 „Die Spezifikation ist die alte Anwendung.“

Slide 27

Slide 27 text

Lösung 1

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Photo credit: zoetnet on Visual Hunt / CC BY

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Lösung 2

Slide 32

Slide 32 text

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

Slide 33

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

Slide 34 text

No content

Slide 35

Slide 35 text

Problem 3 The DatePicker Problem

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

The product owner is super happy on the green field.

Slide 38

Slide 38 text

But fun is over when the senior developers start working…

Slide 39

Slide 39 text

And it gets worse and worse…

Slide 40

Slide 40 text

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

Slide 41

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

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

Slide 43 text

Lösung 4

Slide 44

Slide 44 text

Migrating an existing app

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Join up the old and new world

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Recap

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 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/Trivadis/WebWinFormsInteraction ▪ Wir prügeln den Monolithen ins Web https://manuelmeyer.net/2019/09/trivadis-techevent-2019-wir-prugeln-den-monolithen-ins- web/

Slide 54

Slide 54 text

https://www.trivadis-training.com/de/training/einfuehrung-typescript-und-angular-ad-angular Mit Trivadis zum Angular Superhero

Slide 55

Slide 55 text

No content