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 DWX Home Christian Liebel @christianliebel Consultant
2. 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
3. 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
4. XAML & Angular Angular für XAML-Entwickler DWX Home
5. Platform Comparison XAML & Angular ☑ ☑ ☑ WPF Angular für XAML-Entwickler DWX Home
6. 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
7. Architecture Comparison MVVM MV* XAML & Angular Angular für XAML-Entwickler DWX Home
8. – 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
9. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
10. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
11. Templating <TextBox /> Templating and Data Binding Angular für XAML-Entwickler DWX Home
12. Templating <input /> Templating and Data Binding Angular für XAML-Entwickler DWX Home DEMO #1
13. Templating <TextBox Text="Test" TextChanged="TextBox_TextChanged" /> Templating and Data Binding Angular für XAML-Entwickler DWX Home
14. Templating <input [value]="'Test'" (input)="textChanged($event)" /> <input value="Test" (input)="textChanged($event)" /> Templating and Data Binding Angular für XAML-Entwickler DWX Home DEMO #2
15. 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 DWX Home
16. Data Binding export class HelloWorldComponent { public helloWorldText: string = 'Hello World!'; } {{ helloWorldText }} Templating and Data Binding Angular für XAML-Entwickler DWX Home DEMO #3
17. Two-Way Binding <TextBox Text="{Binding HelloWorldText, UpdateSourceTrigger=PropertyChanged}" /> Angular für XAML-Entwickler DWX Home Templating and Data Binding
18. Two-Way Binding <input [(ngModel)]="helloWorldText" /> Angular für XAML-Entwickler DWX Home Templating and Data Binding DEMO #4
19. Visual vs. Live Editing Templating and Data Binding Angular für XAML-Entwickler DWX Home
20. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
21. 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
22. public class ArticleService { private readonly HttpClient httpClient; public ArticleService(HttpClient httpClient) { this.httpClient = httpClient; } } Dependency Injection Angular für XAML-Entwickler DWX Home
23. @Injectable({ providedIn: 'root' }) export class ArticleService { constructor(private readonly httpClient: HttpClient) { } } Dependency Injection Angular für XAML-Entwickler DWX Home
24. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
25. n-Tier Architecture Data Management Angular für XAML-Entwickler DWX Home External System Domain Layer
26. 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
27. 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
28. 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 DWX Home
29. 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 DWX Home DEMO #6
30. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
31. UserControl Component Custom Controls Angular für XAML-Entwickler DWX Home
32. 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 DWX Home
33. 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 DWX Home Custom Controls DEMO #7
34. Code Completion Angular für XAML-Entwickler DWX Home Custom Controls
35. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
36. 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
37. Reactive Programming https://www.dotnetpro.de/core/net/reactive-extensions-for-.net-rx-976265.html Angular für XAML-Entwickler DWX Home
38. RxJS Open-Source High-Level Flow Composition Provides an Observable implementation Provides operators (map, throttle, …) Angular für XAML-Entwickler DWX Home Reactive Programming
39. “Data over Time” https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (abgerufen am 23.05.2018) Angular für XAML-Entwickler DWX Home Reactive Programming
40. Complex Reactive Chains Reactive Programming Angular für XAML-Entwickler DWX Home
41. Talking Points Templating and Data Binding Dependency Injection Data Management Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
42. VS-Like Experience Debugging Angular für XAML-Entwickler DWX Home
43. – 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
44. Thank you! Off next: Q&A Christian Liebel @christianliebel christian.liebel@thinktecture.com