This document summarizes a presentation on migrating from WPF to Angular in 60 minutes. It discusses generating new projects in Visual Studio versus Angular CLI, differences in code structure and data binding between the frameworks, and tips for Angular development including prioritizing UX design, avoiding a "greenfield" rewrite, and managing coupling between components. The presenters provide resources for learning Angular and offer Angular training through Trivadis.

1. Von WPF nach Angular in 60
Minuten
BASTA 2018
Manuel Meyer @manumeyer1
Thomas Gassmann @gassmannT
https://m.trivadis.com/angular-schulung

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

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

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…

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