DWX2018: 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. Von WPF nach Angular in
   60 Minuten
   DWX Nürnberg 2018
   Manuel Meyer @manumeyer1
   Thomas Gassmann @gassmannT
   

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

5. WPF to Angular
   

   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
    thomas.gassmann@trivadis.com
    Manuel Meyer
    @manuelmeyer1
    Manuelmeyer.net
    manuel.meyer@trivadis.com
    

    View Slide

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

    View Slide

44. View Slide