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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. 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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

28. 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
    

    View Slide

29. 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
    

    View Slide

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

    View Slide

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

    View Slide

32. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

44. Thank you!
    Off next: Q&A
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide