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

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

More Decks by Thomas Gassmann

Other Decks in Programming


  1. Von WPF nach Angular in 45 Minuten Trivadis TechEvent 2018

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

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

  4. WPF to Angular

  5. JavaScript «The by-design purpose of JavaScript was to make the

    monkey dance when you moused over it» Brendan Eich
  6. None
  7. Fussballmanager 2018

  8. New Project Visual Studio: File -> New Project F5 Angular

    CLI: > ng new <name> > ng serve
  9. View Code // XAML <Button Width="75" Height="20" >Search</ Button> <TextBox

    Height="23" Text="TextBox" Width="120"/> <!-- HTML --> <input type="text" value="text"> <button>Search</button>
  10. Model Classes // C# POCO public class Game { public

    string MatchInfo1 { get; set; } public int FifaId { get; set; } } <!-- TypeScript --> export interface Game { MatchInfo1: string; FifaId: number; }
  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(); <!-- TypeScript --> -> Convert Swagger to TypeScript Class const url = `${endpointUri}/Game/?countryCode=${code}`; return this.http.get<Game[]>(url);
  12. Data Binding // XAML <Label Content="{Binding /MatchInfo1}"/> <ListView ItemsSource="{Binding}" DisplayMemberPath="Description"

    > <!-- HTML --> {{selectedMatch.GameInfo1}} <a (click)="showDetail(match)" *ngFor="let game of games$ | async"> {{ game.Description }} </a>
  13. WPF versus Angular ▪ File new Project ▪ C# ▪

    XAML ▪ Controls ▪ User Controls ▪ Resource Dictionaries ▪ Commands ▪ Data Binding ▪ Value Converter ▪ ng new <my-name> ▪ Typescript ▪ HTML ▪ HTML Elements ▪ Components ▪ CSS ▪ HTML Events ▪ Data Binding ▪ Pipe
  14. How to start with Angular?

  15. Download Visual Studio Code

  16. Install VSCode Extensions

  17. Get it from: nodejs.org

  18. npm install @angular/cli

  19. npm install @angular/cli -g

  20. None
  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.
  22. Module Anatomy of an Angular Application Component person-list Component person-detail

    Component person-edit PersonService
  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
  24. Project structure

  25. CLI: Generate Component ng generate <blueprint> Generate component/service, etc. ng

    g component product-list Generate a component ng g c <name> --spec=false Without unit tests
  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
  27. Fussballmanager 2018

  28. Tipps aus der Praxis

  29. Die Spezifikation der Anforderungen «Die Spezifikation ist die alte Applikation.

    Das muss im Web genau so aussehen wie jetzt» --der Chef
  30. Und tschüss… Photo credit: Mark Spearman on VisualHunt.com / CC

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

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

  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…
  34. None
  35. The 4 Problems

  36. 1. The Keyboard Problem «Mit Ctrl-N konnte man schon immer

    einen neuen Kunden anlegen» --der Chef
  37. 2. The DatePicker Problem

  38. 3. The Excel in the Browser Problem

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

  40. Recap

  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.
  42. Thank you Thomas Gassmann @gassmannT thomasgassmann.net [email protected] Manuel Meyer @manuelmeyer1

    Manuelmeyer.net [email protected]
  43. Ressources ▪ angular.io/docs ▪ m.trivadis.com/angular ▪ swissangular.com ▪ manuelmeyer.net ▪

  44. None