Angular für XAML-Entwickler

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.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

June 30, 2020
Tweet

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