Slide 1
Slide 1 text
Von WPF nach Angular in
60 Minuten
DWX Nürnberg 2018
Manuel Meyer @manumeyer1
Thomas Gassmann @gassmannT
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Thomas Gassmann
Senior Consultant,
Trainer, Speaker
www.thomasgassmann.ch
@gassmannT
Slide 4
Slide 4 text
Manuel Meyer
Consultant & Trainer für
.NET/Azure
www.azurezurichusergroup.com
www.dotnetday.ch
www.manuelmeyer.ch
@manuelmeyer1
Slide 5
Slide 5 text
WPF to Angular
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Fussballmanager 2018
Slide 8
Slide 8 text
New Project
Visual Studio:
File -> New Project
F5
Angular CLI:
> ng new
> ng serve
Slide 9
Slide 9 text
View Code
// XAML
Search Button>
Search
Slide 10
Slide 10 text
Model Classes
// C# POCO
public class Game
{
public string MatchInfo1 { get; set; }
public int FifaId { get; set; }
}
export interface Game {
MatchInfo1: string;
FifaId: number;
}
Slide 11
Slide 11 text
Backend Call
// REST API Call
-> «Add REST Client»
var url = $"{endpointUri}/Game/?countryCode={code}";
var client = new WmAPI.WmAPIClient(url);
Game[] result = client.GetAll();
-> Convert Swagger to TypeScript Class
const url = `${endpointUri}/Game/?countryCode=${code}`;
return this.http.get(url);
Slide 13
Slide 13 text
WPF versus Angular
▪ File new Project
▪ C#
▪ XAML
▪ Controls
▪ User Controls
▪ Resource Dictionaries
▪ Commands
▪ Data Binding
▪ Value Converter
▪ ng new
▪ Typescript
▪ HTML
▪ HTML Elements
▪ Components
▪ CSS
▪ HTML Events
▪ Data Binding
▪ Pipe
Slide 14
Slide 14 text
How to start with Angular?
Slide 15
Slide 15 text
Download Visual Studio Code
Slide 16
Slide 16 text
Install VSCode Extensions
Slide 17
Slide 17 text
Get it from: nodejs.org
Slide 18
Slide 18 text
npm install @angular/cli
Slide 19
Slide 19 text
npm install @angular/cli -g
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
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.
Slide 22
Slide 22 text
Module
Anatomy of an Angular Application
Component
person-list
Component
person-detail
Component
person-edit
PersonService
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Project structure
Slide 25
Slide 25 text
CLI: Generate Component
ng generate Generate component/service, etc.
ng g component product-list Generate a component
ng g c --spec=false Without unit tests
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
Fussballmanager 2018
Slide 28
Slide 28 text
Tipps aus der Praxis
Slide 29
Slide 29 text
Die Spezifikation der Anforderungen
«Die Spezifikation ist die
alte Applikation. Das muss
im Web genau so
aussehen wie jetzt»
--der Chef
Slide 30
Slide 30 text
Und tschüss…
Photo credit: Mark Spearman on VisualHunt.com / CC BY
Slide 31
Slide 31 text
Photo credit: zoetnet on Visual Hunt / CC BY
Slide 32
Slide 32 text
Photo credit: Chris Blakeley on Visualhunt / CC BY-NC-ND
Slide 33
Slide 33 text
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…
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
The 4 Problems
Slide 36
Slide 36 text
1. The Keyboard Problem
«Mit Ctrl-N konnte man
schon immer einen neuen
Kunden anlegen»
--der Chef
Slide 37
Slide 37 text
2. The DatePicker Problem
Slide 38
Slide 38 text
3. The Excel in the Browser Problem
Slide 39
Slide 39 text
4. The “bei Google gehts auch” Problem
Slide 40
Slide 40 text
Recap
Slide 41
Slide 41 text
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.
Slide 42
Slide 42 text
Thank you
Thomas Gassmann
@gassmannT
thomasgassmann.net
[email protected]
Manuel Meyer
@manuelmeyer1
Manuelmeyer.net
[email protected]
Slide 43
Slide 43 text
Ressources
▪ angular.io/docs
▪ m.trivadis.com/angular
▪ swissangular.com
▪ manuelmeyer.net
▪ thomasgassmann.net
Slide 44
Slide 44 text
No content