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

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

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

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

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

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

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

– 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

– 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

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