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
   

   View Slide

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

   View Slide

3. WPF to Angular
   

   View Slide

4. Fussballmanager
   

   View Slide

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

   View Slide

6. View Slide

7. New Project
   

   View Slide

8. View Code
   

   View Slide

9. Model Classes
   

   View Slide

10. Backend Call
    

    View Slide

11. Data Binding
    

    View Slide

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

    View Slide

13. Fussballmanager
    

    View Slide

14. How to start with Angular?
    

    View Slide

15. Download Visual Studio Code
    

    View Slide

16. Install VSCode Extensions
    

    View Slide

17. Get it from: nodejs.org
    

    View Slide

18. npm install @angular/cli
    

    View Slide

19. npm install @angular/cli -g
    

    View Slide

20. View Slide

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.
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

25. 4 Real life problems
    and solutions
    

    View Slide

26. Problem 1
    „Die Spezifikation ist die
    alte Anwendung.“
    

    View Slide

27. Lösung 1
    

    View Slide

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

    View Slide

29. Photo credit: zoetnet on Visual Hunt / CC BY
    

    View Slide

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

    View Slide

31. Lösung 2
    

    View Slide

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

    View Slide

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…
    

    View Slide

34. View Slide

35. Problem 3
    The DatePicker Problem
    

    View Slide

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

    View Slide

37. The product owner is super happy on the green field.
    

    View Slide

38. But fun is over when the senior developers start working…
    

    View Slide

39. And it gets worse and worse…
    

    View Slide

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

    View Slide

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/
    

    View Slide

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
    

    View Slide

43. Lösung 4
    

    View Slide

44. Migrating an existing app
    

    View Slide

45. View Slide

46. Join up the old and new world
    

    View Slide

47. View Slide

48. View Slide

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

    View Slide

50. Recap
    

    View Slide

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.
    

    View Slide

52. Thank you!
    Manuel Meyer
    www.manuelmeyer.net
    @manumeyer1
    manuel.meyer@trivadis.com
    Thomas Gassmann
    www.thomasgassmann.net
    @gassmannT
    thomas.gassmann@trivadis.com
    

    View Slide

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/
    

    View Slide

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

    View Slide

55. View Slide