Slide 1

Slide 1 text

Angular für XAML-Entwickler DWX Home Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

Hello, it’s me. Angular für XAML-Entwickler DWX Home Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Slide 3

Slide 3 text

In this session 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 DWX Home Goal

Slide 4

Slide 4 text

XAML & Angular Angular für XAML-Entwickler DWX Home

Slide 5

Slide 5 text

Platform Comparison XAML & Angular ☑ ☑ ☑ WPF Angular für XAML-Entwickler DWX Home

Slide 6

Slide 6 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 DWX Home

Slide 7

Slide 7 text

Architecture Comparison MVVM MV* XAML & Angular Angular für XAML-Entwickler DWX Home

Slide 8

Slide 8 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 DWX Home Demo

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 DWX Home

Slide 10

Slide 10 text

Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home

Slide 11

Slide 11 text

Templating Templating and Data Binding Angular für XAML-Entwickler DWX Home

Slide 12

Slide 12 text

Templating Templating and Data Binding Angular für XAML-Entwickler DWX Home DEMO #1

Slide 13

Slide 13 text

Templating Templating and Data Binding Angular für XAML-Entwickler DWX Home

Slide 14

Slide 14 text

Templating Templating and Data Binding Angular für XAML-Entwickler DWX Home DEMO #2

Slide 15

Slide 15 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 DWX Home

Slide 16

Slide 16 text

Data Binding export class HelloWorldComponent { public helloWorldText: string = 'Hello World!'; } {{ helloWorldText }} Templating and Data Binding Angular für XAML-Entwickler DWX Home DEMO #3

Slide 17

Slide 17 text

Two-Way Binding Angular für XAML-Entwickler DWX Home Templating and Data Binding

Slide 18

Slide 18 text

Two-Way Binding Angular für XAML-Entwickler DWX Home Templating and Data Binding DEMO #4

Slide 19

Slide 19 text

Visual vs. Live Editing Templating and Data Binding Angular für XAML-Entwickler DWX Home

Slide 20

Slide 20 text

Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home

Slide 21

Slide 21 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 DWX Home Dependency Injection

Slide 22

Slide 22 text

public class ArticleService { private readonly HttpClient httpClient; public ArticleService(HttpClient httpClient) { this.httpClient = httpClient; } } Dependency Injection Angular für XAML-Entwickler DWX Home

Slide 23

Slide 23 text

@Injectable({ providedIn: 'root' }) export class ArticleService { constructor(private readonly httpClient: HttpClient) { } } Dependency Injection Angular für XAML-Entwickler DWX Home

Slide 24

Slide 24 text

Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home

Slide 25

Slide 25 text

n-Tier Architecture Data Management Angular für XAML-Entwickler DWX Home External System Domain Layer

Slide 26

Slide 26 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 DWX Home

Slide 27

Slide 27 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 DWX Home DEMO #5

Slide 28

Slide 28 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 DWX Home

Slide 29

Slide 29 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 DWX Home DEMO #6

Slide 30

Slide 30 text

Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home

Slide 31

Slide 31 text

UserControl Component Custom Controls Angular für XAML-Entwickler DWX Home

Slide 32

Slide 32 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 DWX Home

Slide 33

Slide 33 text

Template Title Manufacturer Price {{ article.title }} {{ article.manufacturer }} {{ article.price | currency:'EUR' }} Angular für XAML-Entwickler DWX Home Custom Controls DEMO #7

Slide 34

Slide 34 text

Code Completion Angular für XAML-Entwickler DWX Home Custom Controls

Slide 35

Slide 35 text

Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home

Slide 36

Slide 36 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 DWX Home

Slide 37

Slide 37 text

Reactive Programming https://www.dotnetpro.de/core/net/reactive-extensions-for-.net-rx-976265.html Angular für XAML-Entwickler DWX Home

Slide 38

Slide 38 text

RxJS Open-Source High-Level Flow Composition Provides an Observable implementation Provides operators (map, throttle, …) Angular für XAML-Entwickler DWX Home Reactive Programming

Slide 39

Slide 39 text

“Data over Time” https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular für XAML-Entwickler DWX Home Reactive Programming

Slide 40

Slide 40 text

Complex Reactive Chains Reactive Programming Angular für XAML-Entwickler DWX Home

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 DWX Home

Slide 42

Slide 42 text

VS-Like Experience Debugging Angular für XAML-Entwickler DWX Home

Slide 43

Slide 43 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 DWX Home

Slide 44

Slide 44 text

Thank you! Off next: Q&A Christian Liebel @christianliebel [email protected]