Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Thomas Gassmann

Other Decks in Programming


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

  2. Agenda • Intro Angular Elements • Web Components • Getting

    started with Angular Elements • Outlook
  3. Angular Elements

  4. «Angular is ideal for building complete applications, and our tooling,

    documentation and infrastructure are primarily aimed at this case.» Rob Wormald, Angular Team
  5. Platform Dependency Injection Decorators Zones Compile Binding Render Material Mobile

    Universal CLI Language Service Augury ngUpdate Router Animation i18n
  6. «[…] but it’s quite challenging to use in scenarios that

    don’t fit that specific Singe Page Application model.» Rob Wormald, Angular Team
  7. Use Cases • Enhancing existing HTML Pages • Content Management

    Systems integration • Use components in other environments or frameworks • Microfrontends • Migrating Legacy Apps
  8. None
  9. Web Components

  10. Web Components Web Components are a set of features added

    by the W3C HTML Template Shadow DOM HTML Imports Custom Elements
  11. Custom Elements Custom elements share the same API surface as

    native DOM objects: • Attributes • Properties • Methods • Events
  12. Create and Define a Custom Element

  13. Reactions

  14. Attributes <world-cup-statistics country="sui"></world-cup-statistics>

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

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

    ... });
  17. Custom Elements in Angular => Angular has been designed for

  18. Enter Angular Elements Transforming Angular Component to Custom Element

  19. Enter Angular Elements Provides a bridge from angular concepts to

    web components. @HostBinding() => Attributes @Input() => Properties @Output() => CustomEvents Lifecycle Hooks => Reactions
  20. Getting started

  21. Platform Dependency Injection Decorators Zones Compile Binding Render Material Mobile

    Universal CLI Language Service Augury ngUpdate Router Animation i18n
  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 <NAME> -v ShadowDom
  23. Component

  24. Module

  25. Module <world-cup-statistics></world-cup-statistics>

  26. Polyfills

  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';
  28. Add Custom Element dynamically

  29. DEMO

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

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

    Element Injector (ElementRef) Element Injector (ElementRef)
  32. Module

  33. Shadow DOM

  34. DEMO

  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.
  36. Outlook

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

  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
  39. Output

  40. DEMO

  41. Thomas Gassmann • Web development using .NET, Typescript and Angular

    • Trainer, Speaker @gassmannT thomasgassmann.net
  42. Ressources • github.com/gassmannT/ngElement • thomasgassmann.net • swissangular.com • m.trivadis.com/angular

  43. None