Slide 1
Slide 1 text
Angular für XAML-Entwickler
Thinktecture Webinar
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
In this webinar we would like to give XAML
developers an orientation guide using concrete
case studies and show how to get started with
Angular quickly.
Angular für XAML-Entwickler
Thinktecture Webinar
Goal
Slide 3
Slide 3 text
XAML & Angular
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 4
Slide 4 text
Platform Comparison
XAML & Angular
☑
☑ ☑
WPF
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 5
Slide 5 text
Technology Comparison
XAML & Angular
XAML Angular
Markup XAML HTML
Logik C#, Visual Basic.NET TypeScript
Style XAML-Formatvorlagen CSS
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 6
Slide 6 text
Architecture Comparison
MVVM MV*
XAML & Angular
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 7
Slide 7 text
– Use case that could be
written in XAML (WPF in
particular) or Angular
– n-Tier Architecture
– No AuthN/AuthZ
– No i18n/a11y
Angular für XAML-Entwickler
Thinktecture Webinar
Demo
Slide 8
Slide 8 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 9
Slide 9 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 10
Slide 10 text
Templating
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 11
Slide 11 text
Templating
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
DEMO #1
Slide 12
Slide 12 text
Templating
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 13
Slide 13 text
Templating
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
DEMO #2
Slide 14
Slide 14 text
Data Binding
public class MainWindowViewModel : BindableBase
{
private string helloWorldText = "Hello World!";
public string HelloWorldText
{
get
{
return helloWorldText;
}
set
{
SetProperty(ref helloWorldText,
value);
}
}
}
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 15
Slide 15 text
Data Binding
export class HelloWorldComponent {
public helloWorldText: string = 'Hello World!';
}
{{ helloWorldText }}
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
DEMO #3
Slide 16
Slide 16 text
Two-Way Binding
Angular für XAML-Entwickler
Thinktecture Webinar
Templating and Data Binding
Slide 17
Slide 17 text
Two-Way Binding
Angular für XAML-Entwickler
Thinktecture Webinar
Templating and Data Binding
DEMO #4
Slide 18
Slide 18 text
Visual vs. Live Editing
Templating and Data Binding
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 19
Slide 19 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 20
Slide 20 text
Motivation
- Goal: Low coupling, high cohesion
- In a unit test, a developer is not interested in arranging a test setup
for a dependency (e.g., an HTTP backend).
- A developer might be interested in switching between different
implementations of a dependency (e.g. a different tax calculation for
Germany and Austria)
- Thus: A component should not arrange its dependencies on its own
but rely on an external party instead (DI container)
- Both .NET and Angular make use of constructor injection
Angular für XAML-Entwickler
Thinktecture Webinar
Dependency Injection
Slide 21
Slide 21 text
public class ArticleService {
private readonly HttpClient httpClient;
public ArticleService(HttpClient httpClient)
{
this.httpClient = httpClient;
}
}
Dependency Injection
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 22
Slide 22 text
@Injectable({ providedIn: 'root' })
export class ArticleService {
constructor(private readonly httpClient: HttpClient) {
}
}
Dependency Injection
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 23
Slide 23 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 24
Slide 24 text
n-Tier Architecture
Data Management
Angular für XAML-Entwickler
Thinktecture Webinar
External System
Domain
Layer
Slide 25
Slide 25 text
Model Class
public class Article
{
public int Id { get; set; }
public string Title { get; set; }
public string Manufacturer { get; set; }
public string Category { get; set; }
public string Subcategory { get; set; }
public double Price { get; set; }
public int? PreviousId { get; set; }
public int? NextId { get; set; }
}
Data Management
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 26
Slide 26 text
Model Class
export interface Article {
id: number;
title: string;
manufacturer: string;
category: string;
subcategory: string;
price: number;
previousId?: number;
nextId?: number;
}
Data Management
Angular für XAML-Entwickler
Thinktecture Webinar
DEMO #5
Slide 27
Slide 27 text
Service
public class ArticleService
{
private readonly HttpClient httpClient;
public ArticleService(HttpClient httpClient) {
this.httpClient = httpClient;
}
public async Task> GetAll()
{
var response = await httpClient.GetAsync("https://articleapi.azurewebsites.net/articles");
response.EnsureSuccessStatusCode();
var responseBody = await response.Content.ReadAsStringAsync();
return JsonConvert.DeserializeObject>(responseBody);
}
}
Data Management
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 28
Slide 28 text
Service
@Injectable({ providedIn: 'root' })
export class ArticleService {
constructor(private readonly httpClient: HttpClient) {}
public getAll(): Promise {
return this.httpClient
.get('https://articleapi.azurewebsites.net/articles')
.toPromise();
}
}
Data Management
Angular für XAML-Entwickler
Thinktecture Webinar
DEMO #6
Slide 29
Slide 29 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 30
Slide 30 text
UserControl Component
Custom Controls
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 31
Slide 31 text
Component
@Component({
selector: 'app-article-list',
templateUrl: './article-list.component.html',
styleUrls: ['./article-list.component.css'],
})
export class ArticleListComponent {
@Input()
public articles: Article[];
}
Custom Controls
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 32
Slide 32 text
Template
Title
Manufacturer
Price
{{ article.title }}
{{ article.manufacturer }}
{{ article.price | currency:'EUR' }}
Angular für XAML-Entwickler
Thinktecture Webinar
Custom Controls
DEMO #7
Slide 33
Slide 33 text
Code Completion
Angular für XAML-Entwickler
Thinktecture Webinar
Custom Controls
Slide 34
Slide 34 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 35
Slide 35 text
Motivation
New requirement: If the list fails to be retrieved, the process should be
repeated twice with 1000 ms in between.
Implementing requirements like this can quickly get
complicated/tedious when dealing with tasks or promises
Here, Reactive Programming comes into play!
Reactive Programming
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 36
Slide 36 text
Reactive Programming
https://www.dotnetpro.de/core/net/reactive-extensions-for-.net-rx-976265.html
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 37
Slide 37 text
RxJS
Open-Source
High-Level Flow Composition
Provides an Observable implementation
Provides operators (map, throttle, …)
Angular für XAML-Entwickler
Thinktecture Webinar
Reactive Programming
Slide 38
Slide 38 text
“Data over Time”
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018)
Angular für XAML-Entwickler
Thinktecture Webinar
Reactive Programming
Slide 39
Slide 39 text
Complex Reactive Chains
Reactive Programming
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 40
Slide 40 text
this.articleService.getAll().pipe(
retryWhen(errors => errors.pipe(
delay(1000),
take(2),
))
);
Angular für XAML-Entwickler
Thinktecture Webinar
Reactive Programming
DEMO #8
Slide 41
Slide 41 text
Talking Points
Templating
and Data
Binding
Dependency
Injection
Data
Management
Custom
Controls
Reactive
Programming
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 42
Slide 42 text
VS-Like Experience
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
Slide 43
Slide 43 text
CSS
Debugging
Angular für XAML-Entwickler
Thinktecture Webinar
DEMO #9
Slide 44
Slide 44 text
– Many concepts that XAML developers are familiar with can also be
found in Angular, but are often much more flexible, easier to use and
require less code.
– Comprehensive support for development and debugging rounds off the
concept.
– In this way, at least equivalent experiences can be achieved compared
to applications written with C# and XAML.
– Web developers can also expect many more features with native power
in the future: The web is getting better and better over time.
Summary
Angular für XAML-Entwickler
Thinktecture Webinar