Von WPF nach Angular in 60 Minuten

Die ganze Welt spricht (fast) nur noch von Angular und es scheint, als kommt niemand an dem Framework vorbei. Einmal mehr sind die klassischen Windows Entwickler mit der Attraktivität der Web-Welt konfrontiert. Manch einem WPF oder WinForms Entwickler graut es noch immer vor HTML & JavaScript. Dabei ist JETZT der ideale Zeitpunkt für den Umstieg! Schaut man sich die Entwicklung mit Angular im Detail an, so stellt man fest, dass die Unterschiede zu den klassischen Disziplinen immer kleiner werden. Dank der sprachlichen Unterstützung durch TypeScript und der gleichen Konzepte, wie zum Beispiel Data Binding, kommen die Frameworks sich immer mehr entgegen. In dieser Session vergleichen wir die Entwicklung mit WPF und Angular und geben Ihnen die Basics mit, um im Web durchzustarten.

Transcript

1. www.thomasgassmann.net/ www.manuelmeyer.net/ @gassmannT @manumeyer1 Von WPF nach Angular in 60 Minuten .NET Developer Conference DDC 2020 Thomas Gassmann, Manuel Meyer
2. Agenda ▪ WPF to Angular ▪ How to start with Angular? ▪ Migrating an existing application ▪ Real life problems (and solutions).
3. WPF to Angular
4. Fussballmanager
5. «The by-design purpose of JavaScript was to make the monkey dance when you moused over it» -- Brendan Eich
7. New Project
8. View Code
9. Model Classes
10. Backend Call
11. Data Binding
12. WPF versus Angular ▪ File new Project ▪ C# ▪ XAML ▪ Controls ▪ User Controls ▪ Resource Dictionaries ▪ Commands ▪ Data Binding ▪ Value Converter ▪ ng new <name> ▪ Typescript ▪ HTML ▪ HTML Elements ▪ Components ▪ CSS ▪ HTML Events ▪ Data Binding ▪ Pipe.
13. Fussballmanager
14. How to start with Angular?
15. Download Visual Studio Code
16. Install VSCode Extensions
17. Get it from: nodejs.org
18. npm install @angular/cli
19. npm install @angular/cli -g
21. 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.
22. Anatomy of an Angular App Module Component person-list Component person-detail Component person-edit PersonService
23. 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
24. Fussballmanager https://github.com/gassmannT/WPFtoAngular
25. 4 Real life problems and solutions
26. Problem 1 „Die Spezifikation ist die alte Anwendung.“
27. Lösung 1
28. Lösung 1 Photo credit: Mark Spearman on VisualHunt.com / CC BY
29. Photo credit: zoetnet on Visual Hunt / CC BY
30. Problem 2 „Das muss im Web genau so aussehen wie jetzt…“
31. Lösung 2
32. Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
33. 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…
35. Problem 3 The DatePicker Problem
36. Problem 4 „Das ist so alt, dass muss man doch komplett neu schreiben!“ --Alle
37. The product owner is super happy on the green field.
38. But fun is over when the senior developers start working…
39. And it gets worse and worse…
40. „Die Utopie der grünen Wiese“ --Manu & Thomas
41. „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/
42. „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
43. Lösung 4
44. Migrating an existing app
46. Join up the old and new world
49. DEMO https://github.com/Trivadis/WebWinFormsInteraction
50. Recap
51. 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.
52. Thank you! Manuel Meyer www.manuelmeyer.net @manumeyer1 manuel.meyer@trivadis.com Thomas Gassmann www.thomasgassmann.net @gassmannT thomas.gassmann@trivadis.com
53. 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/
54. https://www.trivadis-training.com/de/training/einfuehrung-typescript-und-angular-ad-angular Mit Trivadis zum Angular Superhero