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

BASTA 2018 - Von WPF nach Angular in 60 Minuten

BASTA 2018 - 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 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.

Thomas Gassmann

September 26, 2018
Tweet

More Decks by Thomas Gassmann

Other Decks in Programming

Transcript

  1. Von WPF nach Angular in 60
    Minuten
    BASTA 2018
    Manuel Meyer @manumeyer1
    Thomas Gassmann @gassmannT
    https://m.trivadis.com/angular-schulung

    View Slide

  2. View Slide

  3. Manuel Meyer
    Consultant & Trainer für
    .NET/Azure
    www.azurezurichusergroup.com
    www.dotnetday.ch
    www.manuelmeyer.ch
    @manuelmeyer1

    View Slide

  4. Thomas Gassmann
    Senior Consultant,
    Trainer, Speaker
    www.thomasgassmann.net
    @gassmannT
    https://www.meetup.com/Swiss-Angular/

    View Slide

  5. WPF to Angular

    View Slide

  6. Fussballmanager 2018

    View Slide

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

    View Slide

  8. View Slide

  9. New Project
    Visual Studio:
    File -> New Project
    F5
    Angular CLI:
    > ng new
    > ng serve

    View Slide

  10. View Code
    // XAML
    Search Button>



    Search

    View Slide

  11. Model Classes
    // C# POCO
    public class Game
    {
    public string MatchInfo1 { get; set; }
    public int FifaId { get; set; }
    }

    export interface Game {
    MatchInfo1: string;
    FifaId: number;
    }

    View Slide

  12. Backend Call
    // REST API Call
    -> «Add REST Client»
    var url = $"{endpointUri}/Game/?countryCode={code}";
    var client = new WmAPI.WmAPIClient(url);
    Game[] result = client.GetAll();

    -> Convert Swagger to TypeScript Class
    const url = `${endpointUri}/Game/?countryCode=${code}`;
    return this.http.get(url);

    View Slide

  13. Data Binding
    // XAML

    DisplayMemberPath="Description" >

    {{selectedMatch.GameInfo1}}

    {{ game.Description }}

    View Slide

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

  15. How to start with Angular?

    View Slide

  16. Download Visual Studio Code

    View Slide

  17. Install VSCode Extensions

    View Slide

  18. Get it from: nodejs.org

    View Slide

  19. npm install @angular/cli

    View Slide

  20. npm install @angular/cli -g

    View Slide

  21. View Slide

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

  23. Module
    Anatomy of an Angular Application
    Component
    person-list
    Component
    person-detail
    Component
    person-edit
    PersonService

    View Slide

  24. CLI: Generate new app
    ng new my-app Generate a new app in /my-app
    ng new my-app --dry-run Report without writing files
    ng new my-app --skip-install Generate without npm install
    ng new --style scss Use SCSS instead of CSS
    ng new my-app --routing Generate app with routing

    View Slide

  25. Project structure

    View Slide

  26. CLI: Generate Component
    ng generate Generate component/service, etc.
    ng g component product-list Generate a component
    ng g c --spec=false Without unit tests

    View Slide

  27. CLI: Serve and build
    ng serve Serve the app on localhost:4200
    ng serve -o Serve the app and open
    ng build Build in dev mode
    ng build --prod Build in prod mode

    View Slide

  28. Fussballmanager 2018

    View Slide

  29. 4 Tipps aus der Praxis

    View Slide

  30. 1. Die Spezifikation der Anforderungen
    «Die Spezifikation ist die
    alte Applikation. Das muss
    im Web genau so
    aussehen wie jetzt»
    --der Chef

    View Slide

  31. Und tschüss…
    Photo credit: Mark Spearman on VisualHunt.com / CC BY

    View Slide

  32. Photo credit: zoetnet on Visual Hunt / CC BY
    …aber vielleicht kann man ja mit dem Kunden sprechen, auch wenns dauert…

    View Slide

  33. Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
    Auf jeden Fall braucht der Kunde Hilfe für UX und UI Design. Das Web ist eben doch eine andere Welt!

    View Slide

  34. 2. Hilfe für UX & UI Design
    Requirements for a Partner
    ▪ Must be strong in Web UX Design
    ▪ Must be strong in Web UI Design
    ▪ Must deliver CODE, or else…

    View Slide

  35. View Slide

  36. 3. Die Utopie der grünen Wiese
    «Das muss man
    komplett neu
    schreiben»
    --Wir alle

    View Slide

  37. 3. Die Grüne Wiese
    Die Projektleiterin ist super happy mit der grünen Wiese!

    View Slide

  38. Photo credit: Darron Birgenheier on Visual hunt / CC BY-SA
    Aber sobald die Entwickler auf der Wiese rumackern, dann ist der Spass vorbei…

    View Slide

  39. Oder es kommt noch schlimmer….

    View Slide

  40. 3. Die Grüne Wiese 1
    «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

  41. 4. The black hole of coupling
    «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

  42. The 4 Problems

    View Slide

  43. 1. The Keyboard Problem
    «Mit Ctrl-N konnte man
    schon immer einen neuen
    Kunden anlegen»
    --der Chef

    View Slide

  44. 2. The DatePicker Problem

    View Slide

  45. 3. The Excel in the Browser Problem

    View Slide

  46. 4. The “bei Google gehts auch” Problem

    View Slide

  47. Recap

    View Slide

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

    View Slide

  49. Thank you
    Thomas Gassmann
    @gassmannT
    thomasgassmann.net
    [email protected]
    Manuel Meyer
    @manuelmeyer1
    Manuelmeyer.net
    [email protected]

    View Slide

  50. Ressources
    ▪ angular.io/docs
    ▪ m.trivadis.com/angular
    ▪ swissangular.com
    ▪ manuelmeyer.net
    ▪ thomasgassmann.net

    View Slide

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

    View Slide