Angular für XAML-Entwickler

Das moderne Web lockt mit mächtigen Features und sprengt Plattformgrenzen. Googles SPA-Framework Angular eröffnet einen möglichen Weg in diese schöne neue Welt. Das Framework weist zwar eine gewisse Lernkurve auf, doch XAML-Entwickler haben beim Einstieg in die Technologie glücklicherweise entscheidende Vorteile: Denn viele aus WPF, Silverlight und UWP bekannte Konzepte finden sich auch in Angular wieder. In diesem Webinar möchten wir XAML-Entwicklern anhand konkreter Fallbeispiele eine Orientierungshilfe geben und zeigen, wie der Einstieg in die Entwicklung mit Angular rasch gelingen kann.

Transcript

1. Angular für XAML-Entwickler Thinktecture Webinar Christian Liebel @christianliebel Consultant
2. 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
3. XAML & Angular Angular für XAML-Entwickler Thinktecture Webinar
4. Platform Comparison XAML & Angular ☑ ☑ ☑ WPF Angular für XAML-Entwickler Thinktecture Webinar
5. 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
6. Architecture Comparison MVVM MV* XAML & Angular Angular für XAML-Entwickler Thinktecture Webinar
7. – 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
8. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
9. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
10. Templating <TextBox /> Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar
11. Templating <input /> Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar DEMO #1
12. Templating <TextBox Text="Test" TextChanged="TextBox_TextChanged" /> Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar
13. Templating <input [value]="'Test'" (input)="textChanged($event)" /> <input value="Test" (input)="textChanged($event)" /> Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar DEMO #2
14. Data Binding public class MainWindowViewModel : BindableBase { private string helloWorldText = "Hello World!"; public string HelloWorldText { get { return helloWorldText; } set { SetProperty(ref helloWorldText, value); } } } <TextBlock Text="{Binding HelloWorldText}" /> Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar
15. Data Binding export class HelloWorldComponent { public helloWorldText: string = 'Hello World!'; } {{ helloWorldText }} Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar DEMO #3
16. Two-Way Binding <TextBox Text="{Binding HelloWorldText, UpdateSourceTrigger=PropertyChanged}" /> Angular für XAML-Entwickler Thinktecture Webinar Templating and Data Binding
17. Two-Way Binding <input [(ngModel)]="helloWorldText" /> Angular für XAML-Entwickler Thinktecture Webinar Templating and Data Binding DEMO #4
18. Visual vs. Live Editing Templating and Data Binding Angular für XAML-Entwickler Thinktecture Webinar
19. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
20. 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
21. public class ArticleService { private readonly HttpClient httpClient; public ArticleService(HttpClient httpClient) { this.httpClient = httpClient; } } Dependency Injection Angular für XAML-Entwickler Thinktecture Webinar
22. @Injectable({ providedIn: 'root' }) export class ArticleService { constructor(private readonly httpClient: HttpClient) { } } Dependency Injection Angular für XAML-Entwickler Thinktecture Webinar
23. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
24. n-Tier Architecture Data Management Angular für XAML-Entwickler Thinktecture Webinar External System Domain Layer
25. 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
26. 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
27. Service public class ArticleService { private readonly HttpClient httpClient; public ArticleService(HttpClient httpClient) { this.httpClient = httpClient; } public async Task<IEnumerable<Article>> GetAll() { var response = await httpClient.GetAsync("https://articleapi.azurewebsites.net/articles"); response.EnsureSuccessStatusCode(); var responseBody = await response.Content.ReadAsStringAsync(); return JsonConvert.DeserializeObject<IEnumerable<Article>>(responseBody); } } Data Management Angular für XAML-Entwickler Thinktecture Webinar
28. Service @Injectable({ providedIn: 'root' }) export class ArticleService { constructor(private readonly httpClient: HttpClient) {} public getAll(): Promise<Article[]> { return this.httpClient .get<Article[]>('https://articleapi.azurewebsites.net/articles') .toPromise(); } } Data Management Angular für XAML-Entwickler Thinktecture Webinar DEMO #6
29. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
30. UserControl Component Custom Controls Angular für XAML-Entwickler Thinktecture Webinar
31. Component @Component({ selector: 'app-article-list', templateUrl: './article-list.component.html', styleUrls: ['./article-list.component.css'], }) export class ArticleListComponent { @Input() public articles: Article[]; } <app-article-list [articles]="myArticles"></app-article-list> Custom Controls Angular für XAML-Entwickler Thinktecture Webinar
32. Template <table> <thead> <tr> <th>Title</th> <th>Manufacturer</th> <th>Price</th> </tr> </thead> <tbody> <tr *ngFor="let article of articles"> <td>{{ article.title }}</td> <td>{{ article.manufacturer }}</td> <td>{{ article.price | currency:'EUR' }}</td> </tr> </tbody> </table> Angular für XAML-Entwickler Thinktecture Webinar Custom Controls DEMO #7
33. Code Completion Angular für XAML-Entwickler Thinktecture Webinar Custom Controls
34. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
35. 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
36. Reactive Programming https://www.dotnetpro.de/core/net/reactive-extensions-for-.net-rx-976265.html Angular für XAML-Entwickler Thinktecture Webinar
37. RxJS Open-Source High-Level Flow Composition Provides an Observable implementation Provides operators (map, throttle, …) Angular für XAML-Entwickler Thinktecture Webinar Reactive Programming
38. “Data over Time” https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular für XAML-Entwickler Thinktecture Webinar Reactive Programming
39. Complex Reactive Chains Reactive Programming Angular für XAML-Entwickler Thinktecture Webinar
40. this.articleService.getAll().pipe( retryWhen(errors => errors.pipe( delay(1000), take(2), )) ); Angular für XAML-Entwickler Thinktecture Webinar Reactive Programming DEMO #8
41. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler Thinktecture Webinar
42. VS-Like Experience Debugging Angular für XAML-Entwickler Thinktecture Webinar
43. CSS Debugging Angular für XAML-Entwickler Thinktecture Webinar DEMO #9
44. – 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
45. Thank you! Off next: Q&A Christian Liebel @christianliebel christian.liebel@thinktecture.com