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.

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

September 26, 2018
Tweet

Transcript

  1. Von WPF nach Angular in 60 Minuten BASTA 2018 Manuel

    Meyer @manumeyer1 Thomas Gassmann @gassmannT https://m.trivadis.com/angular-schulung
  2. None
  3. Manuel Meyer Consultant & Trainer für .NET/Azure www.azurezurichusergroup.com www.dotnetday.ch www.manuelmeyer.ch

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

  5. WPF to Angular

  6. Fussballmanager 2018

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

    monkey dance when you moused over it» Brendan Eich
  8. None
  9. New Project Visual Studio: File -> New Project F5 Angular

    CLI: > ng new <name> > ng serve
  10. 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>
  11. 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; }
  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(); <!-- TypeScript --> -> Convert Swagger to TypeScript Class const url = `${endpointUri}/Game/?countryCode=${code}`; return this.http.get<Game[]>(url);
  13. 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>
  14. 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
  15. How to start with Angular?

  16. Download Visual Studio Code

  17. Install VSCode Extensions

  18. Get it from: nodejs.org

  19. npm install @angular/cli

  20. npm install @angular/cli -g

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

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

  26. 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
  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
  28. Fussballmanager 2018

  29. 4 Tipps aus der Praxis

  30. 1. Die Spezifikation der Anforderungen «Die Spezifikation ist die alte

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

    BY
  32. Photo credit: zoetnet on Visual Hunt / CC BY …aber

    vielleicht kann man ja mit dem Kunden sprechen, auch wenns dauert…
  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!
  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…
  35. None
  36. 3. Die Utopie der grünen Wiese «Das muss man komplett

    neu schreiben» --Wir alle
  37. 3. Die Grüne Wiese Die Projektleiterin ist super happy mit

    der grünen Wiese!
  38. Photo credit: Darron Birgenheier on Visual hunt / CC BY-SA

    Aber sobald die Entwickler auf der Wiese rumackern, dann ist der Spass vorbei…
  39. Oder es kommt noch schlimmer….

  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/
  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
  42. The 4 Problems

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

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

  45. 3. The Excel in the Browser Problem

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

  47. Recap

  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.
  49. Thank you Thomas Gassmann @gassmannT thomasgassmann.net thomas.gassmann@trivadis.com Manuel Meyer @manuelmeyer1

    Manuelmeyer.net manuel.meyer@trivadis.com
  50. Ressources ▪ angular.io/docs ▪ m.trivadis.com/angular ▪ swissangular.com ▪ manuelmeyer.net ▪

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