$30 off During Our Annual Pro Sale. View Details »

Von WPF nach Angular in 60 Minuten

Manuel Meyer
November 25, 2020

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.

Manuel Meyer

November 25, 2020
Tweet

More Decks by Manuel Meyer

Other Decks in Programming

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
    [email protected]
    Thomas Gassmann
    www.thomasgassmann.net
    @gassmannT
    [email protected]

    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