Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BASTA2019: Von WPF nach Angular in 60 Minuten

Manuel Meyer
September 25, 2019

BASTA2019: Von WPF nach Angular in 60 Minuten

Die ganze Welt spricht (fast) nur noch von Angular und es scheint, als käme niemand an dem Framework vorbei. Einmal mehr sind die klassischen Windows-Entwickler mit der Attraktivität der Webwelt konfrontiert. Manch einem WPF- oder WinForms-Entwickler graust es noch immer vor HTML und 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 dergleichen Konzepte, wie zum Beispiel Data Binding, kommen sich die Frameworks 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

September 25, 2019
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
    BASTA 2019
    Thomas Gassmann, Manuel Meyer

    View full-size slide

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

    View full-size slide

  3. WPF to Angular

    View full-size slide

  4. Fussballmanager

    View full-size slide

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

    View full-size slide

  6. Model Classes

    View full-size slide

  7. Backend Call

    View full-size slide

  8. Data Binding

    View full-size slide

  9. 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 full-size slide

  10. How to start with Angular?

    View full-size slide

  11. Download Visual Studio Code

    View full-size slide

  12. Install VSCode Extensions

    View full-size slide

  13. Get it from: nodejs.org

    View full-size slide

  14. npm install @angular/cli

    View full-size slide

  15. npm install @angular/cli -g

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

  20. 4 Real life problems
    and solutions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. Problem 3
    The DatePicker Problem

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. And it gets worse and worse…

    View full-size slide

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

    View full-size slide

  33. „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 full-size slide

  34. „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 full-size slide

  35. Migrating an existing app

    View full-size slide

  36. Join up the old and new world

    View full-size slide

  37. DEMO
    https://github.com/AngularAtTrivadis/WebWinFormsInteraction

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. https://m.trivadis.com/angular-schulung
    Mit Trivadis zum Angular Superhero

    View full-size slide