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. 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
  2. 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
  3. 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
  4. 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
  5. 9.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  6. 10.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  7. 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
  8. 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
  9. 20.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  10. 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
  11. 22.

    public class ArticleService { private readonly HttpClient httpClient; public ArticleService(HttpClient

    httpClient) { this.httpClient = httpClient; } } Dependency Injection Angular für XAML-Entwickler DWX Home
  12. 23.

    @Injectable({ providedIn: 'root' }) export class ArticleService { constructor(private readonly

    httpClient: HttpClient) { } } Dependency Injection Angular für XAML-Entwickler DWX Home
  13. 24.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  14. 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
  15. 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
  16. 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
  17. 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
  18. 30.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  19. 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
  20. 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
  21. 35.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  22. 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
  23. 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
  24. 41.

    Talking Points Templating and Data Binding Dependency Injection Data Management

    Custom Controls Reactive Programming Debugging Angular für XAML-Entwickler DWX Home
  25. 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