$30 off During Our Annual Pro Sale. View Details »

Nachhaltige Client-Architekturen mit Angular Elements

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.

Thomas Gassmann

September 13, 2019
Tweet

More Decks by Thomas Gassmann

Other Decks in Programming

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