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.

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

    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