BASTA von WPF nach Angular in 60 Minuten

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