Slide 1
Slide 1 text
Von WPF nach Angular in 60
Minuten
BASTA 2018
Manuel Meyer @manumeyer1
Thomas Gassmann @gassmannT
https://m.trivadis.com/angular-schulung
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Manuel Meyer
Consultant & Trainer für
.NET/Azure
www.azurezurichusergroup.com
www.dotnetday.ch
www.manuelmeyer.ch
@manuelmeyer1
Slide 4
Slide 4 text
Thomas Gassmann
Senior Consultant,
Trainer, Speaker
www.thomasgassmann.net
@gassmannT
https://www.meetup.com/Swiss-Angular/
Slide 5
Slide 5 text
WPF to Angular
Slide 6
Slide 6 text
Fussballmanager 2018
Slide 7
Slide 7 text
JavaScript
«The by-design
purpose of
JavaScript was to
make the monkey
dance when you
moused over it»
Brendan Eich
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
New Project
Visual Studio:
File -> New Project
F5
Angular CLI:
> ng new
> ng serve
Slide 10
Slide 10 text
View Code
// XAML
Search Button>
Search
Slide 11
Slide 11 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 12
Slide 12 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 14
Slide 14 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 15
Slide 15 text
How to start with Angular?
Slide 16
Slide 16 text
Download Visual Studio Code
Slide 17
Slide 17 text
Install VSCode Extensions
Slide 18
Slide 18 text
Get it from: nodejs.org
Slide 19
Slide 19 text
npm install @angular/cli
Slide 20
Slide 20 text
npm install @angular/cli -g
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 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 23
Slide 23 text
Module
Anatomy of an Angular Application
Component
person-list
Component
person-detail
Component
person-edit
PersonService
Slide 24
Slide 24 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 25
Slide 25 text
Project structure
Slide 26
Slide 26 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 27
Slide 27 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 28
Slide 28 text
Fussballmanager 2018
Slide 29
Slide 29 text
4 Tipps aus der Praxis
Slide 30
Slide 30 text
1. Die Spezifikation der Anforderungen
«Die Spezifikation ist die
alte Applikation. Das muss
im Web genau so
aussehen wie jetzt»
--der Chef
Slide 31
Slide 31 text
Und tschüss…
Photo credit: Mark Spearman on VisualHunt.com / CC BY
Slide 32
Slide 32 text
Photo credit: zoetnet on Visual Hunt / CC BY
…aber vielleicht kann man ja mit dem Kunden sprechen, auch wenns dauert…
Slide 33
Slide 33 text
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!
Slide 34
Slide 34 text
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…
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
3. Die Utopie der grünen Wiese
«Das muss man
komplett neu
schreiben»
--Wir alle
Slide 37
Slide 37 text
3. Die Grüne Wiese
Die Projektleiterin ist super happy mit der grünen Wiese!
Slide 38
Slide 38 text
Photo credit: Darron Birgenheier on Visual hunt / CC BY-SA
Aber sobald die Entwickler auf der Wiese rumackern, dann ist der Spass vorbei…
Slide 39
Slide 39 text
Oder es kommt noch schlimmer….
Slide 40
Slide 40 text
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/
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
The 4 Problems
Slide 43
Slide 43 text
1. The Keyboard Problem
«Mit Ctrl-N konnte man
schon immer einen neuen
Kunden anlegen»
--der Chef
Slide 44
Slide 44 text
2. The DatePicker Problem
Slide 45
Slide 45 text
3. The Excel in the Browser Problem
Slide 46
Slide 46 text
4. The “bei Google gehts auch” Problem
Slide 47
Slide 47 text
Recap
Slide 48
Slide 48 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 49
Slide 49 text
Thank you
Thomas Gassmann
@gassmannT
thomasgassmann.net
[email protected]
Manuel Meyer
@manuelmeyer1
Manuelmeyer.net
[email protected]
Slide 50
Slide 50 text
Ressources
▪ angular.io/docs
▪ m.trivadis.com/angular
▪ swissangular.com
▪ manuelmeyer.net
▪ thomasgassmann.net
Slide 51
Slide 51 text
https://m.trivadis.com/angular-schulung
Mit Trivadis zum Angular Superhero