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.

Die demo gibts auf: https://github.com/gassmannT/WorldCupComponent

Transcript

1. Von WPF nach Angular in 60 Minuten DWX Nürnberg 2018 Manuel Meyer @manumeyer1 Thomas Gassmann @gassmannT
3. Thomas Gassmann Senior Consultant, Trainer, Speaker www.thomasgassmann.ch @gassmannT
4. Manuel Meyer Consultant & Trainer für .NET/Azure www.azurezurichusergroup.com www.dotnetday.ch www.manuelmeyer.ch @manuelmeyer1
5. WPF to Angular
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
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 BY
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…
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 thomas.gassmann@trivadis.com Manuel Meyer @manuelmeyer1 Manuelmeyer.net manuel.meyer@trivadis.com
43. Ressources ▪ angular.io/docs ▪ m.trivadis.com/angular ▪ swissangular.com ▪ manuelmeyer.net ▪ thomasgassmann.net