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

Von WPF nach Angular in 45 Minuten

Von WPF nach Angular in 45 Minuten

Slides from our presentation at Trivadis TechEvent

Thomas Gassmann

September 14, 2018
Tweet

More Decks by Thomas Gassmann

Other Decks in Programming

Transcript

  1. Von WPF nach Angular in
    45 Minuten
    Trivadis TechEvent 2018
    Manuel Meyer @manumeyer1
    Thomas Gassmann @gassmannT

    View Slide

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

    View Slide

  3. Thomas Gassmann
    Senior Consultant,
    Trainer, Speaker
    www.thomasgassmann.net
    @gassmannT

    View Slide

  4. WPF to Angular

    View Slide

  5. JavaScript
    «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. Fussballmanager 2018

    View Slide

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

    View Slide

  9. View Code
    // XAML
    Search Button>



    Search

    View Slide

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

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

  12. Data Binding
    // XAML

    DisplayMemberPath="Description" >

    {{selectedMatch.GameInfo1}}

    {{ game.Description }}

    View Slide

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

  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. Module
    Anatomy of an Angular Application
    Component
    person-list
    Component
    person-detail
    Component
    person-edit
    PersonService

    View Slide

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

  24. Project structure

    View Slide

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

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

  27. Fussballmanager 2018

    View Slide

  28. Tipps aus der Praxis

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

  34. View Slide

  35. The 4 Problems

    View Slide

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

    View Slide

  37. 2. The DatePicker Problem

    View Slide

  38. 3. The Excel in the Browser Problem

    View Slide

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

    View Slide

  40. Recap

    View Slide

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

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

    View Slide

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

    View Slide

  44. View Slide