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