Nachhaltige Client-Architekturen mit Angular Elements

Heutzutage erhalten wir neue Web-Technologien und -Frameworks am laufenden Band. Framework-unabhängige Web Components und Micro Apps bieten Abhilfe für dieses Dilemma!
Angular Elements sind Custom Elements, welche in beliebige Web-Applikationen integriert werden können. Damit können wir wiederverwendbare Angular-Komponenten und -Widgets schreiben, welche in anderen Applikationen, unabhängig des Frameworks (z.B. React, Vue, Sharepoint), verwendet werden können. Zuerst werden wir uns mit den Grundlagen beschäftigen und betrachten danach den richtigen Einsatz von Polyfills, ShadowDOM und die Slot-API sowie Strategien zum effektiven Bundling mit Ivy.

Transcript

1. thomasgassmann.net
   @gassmannT
   Client-Architekturen mit Angular Elements
   Thomas Gassmann
   

   View Slide

2. Agenda
   • Intro Angular Elements
   • Web Components
   • Getting started with Angular Elements
   • Outlook
   

   View Slide

3. Angular Elements
   

   View Slide

4. «Angular is ideal for building complete applications, and
   our tooling, documentation and infrastructure are
   primarily aimed at this case.»
   Rob Wormald, Angular Team
   

   View Slide

5. Platform
   Dependency
   Injection
   Decorators Zones
   Compile Binding Render
   Material Mobile Universal
   CLI
   Language
   Service
   Augury
   ngUpdate
   Router
   Animation
   i18n
   

   View Slide

6. «[…] but it’s quite challenging to use in
   scenarios that don’t fit that specific Singe Page Application
   model.»
   Rob Wormald, Angular Team
   

   View Slide

7. Use Cases
   • Enhancing existing HTML Pages
   • Content Management Systems integration
   • Use components in other environments or frameworks
   • Microfrontends
   • Migrating Legacy Apps
   

   View Slide

8. View Slide

9. Web Components
   

   View Slide

10. Web Components
    Web Components are a set of features added by the W3C
    HTML Template
    Shadow DOM
    HTML Imports
    Custom Elements
    

    View Slide

11. Custom Elements
    Custom elements share the same API surface as native
    DOM objects:
    • Attributes
    • Properties
    • Methods
    • Events
    

    View Slide

12. Create and Define a Custom Element
    

    View Slide

13. Reactions
    

    View Slide

14. Attributes
    
    

    View Slide

15. Properties
    let games = document.querySelector('world-cup-statistics');
    games.country = 'ger';
    

    View Slide

16. Custom Event
    let games = document.querySelector('world-cup-statistics');
    games.addEventListener('country-change', event => { ... });
    

    View Slide

17. Custom Elements in Angular
    => Angular has been designed for this
    

    View Slide

18. Enter Angular Elements
    Transforming
    Angular Component
    to Custom Element
    

    View Slide

19. Enter Angular Elements
    Provides a bridge from angular concepts to web
    components.
    @HostBinding() => Attributes
    @Input() => Properties
    @Output() => CustomEvents
    Lifecycle Hooks => Reactions
    

    View Slide

20. Getting started
    

    View Slide

21. Platform
    Dependency
    Injection
    Decorators Zones
    Compile Binding Render
    Material Mobile Universal
    CLI
    Language
    Service
    Augury
    ngUpdate
    Router
    Animation
    i18n
    

    View Slide

22. • Create a new Angular CLI project
    ng new angularElements
    First Steps
    • Update Angular CLI
    • Add support for angular elements
    ng add @angular/elements
    • Generate new component
    ng g c -v ShadowDom
    

    View Slide

23. Component
    

    View Slide

24. Module
    

    View Slide

25. Module
    
    

    View Slide

26. Polyfills
    

    View Slide

27. • Install NPM Package
    npm install @webcomponents/custom-elements –-save
    First Steps
    • Add import to polyfills.ts
    import '@webcomponents/custom-elements/custom
    -elements.min';
    import '@webcomponents/custom-elements/src/native-shim';
    

    View Slide

28. Add Custom Element dynamically
    

    View Slide

29. DEMO
    

    View Slide

30. Dependency Injection
    Plattform Injector
    (Renderer)
    Module Injector
    (Services)
    Component Injector
    (ElementRef)
    

    View Slide

31. DI in Angular Elements
    Plattform Injector
    (Renderer)
    Module Injector
    (Services)
    Element Injector
    (ElementRef)
    Element Injector
    (ElementRef)
    

    View Slide

32. Module
    

    View Slide

33. Shadow DOM
    

    View Slide

34. DEMO
    

    View Slide

35. Angular Elements in V8
    • It is just the beginning
    • Size is too big for shipping in non Angular projects
    • Will be much better with Ivy (V9)
    • Will be much easier with V9+
    • Browser Support.
    

    View Slide

36. Outlook
    

    View Slide

37. How to use it today in non
    Angular Projects?
    

    View Slide

38. • Install package ngx-build-plus
    ng add ngx-build-plus
    Optimize and combine bundle
    • Add script command
    "build:element": "ng build --prod --output-hashing=none --
    single-bundle --keep-polyfills"
    • Run Command
    npm run build:element
    

    View Slide

39. Output
    

    View Slide

40. DEMO
    

    View Slide

41. Thomas Gassmann
    • Web development using .NET, Typescript and
    Angular
    • Trainer, Speaker
    @gassmannT thomasgassmann.net
    

    View Slide

42. Ressources
    • github.com/gassmannT/ngElement
    • thomasgassmann.net
    • swissangular.com
    • m.trivadis.com/angular
    

    View Slide

43. View Slide