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.

F8980be26d3f8c298c19e3e30ac0dbe1?s=128

Thomas Gassmann

September 13, 2019
Tweet

Transcript

  1. 2.

    Agenda • Intro Angular Elements • Web Components • Getting

    started with Angular Elements • Outlook
  2. 4.

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

    documentation and infrastructure are primarily aimed at this case.» Rob Wormald, Angular Team
  3. 5.

    Platform Dependency Injection Decorators Zones Compile Binding Render Material Mobile

    Universal CLI Language Service Augury ngUpdate Router Animation i18n
  4. 6.

    «[…] but it’s quite challenging to use in scenarios that

    don’t fit that specific Singe Page Application model.» Rob Wormald, Angular Team
  5. 7.

    Use Cases • Enhancing existing HTML Pages • Content Management

    Systems integration • Use components in other environments or frameworks • Microfrontends • Migrating Legacy Apps
  6. 8.
  7. 10.

    Web Components Web Components are a set of features added

    by the W3C HTML Template Shadow DOM HTML Imports Custom Elements
  8. 11.

    Custom Elements Custom elements share the same API surface as

    native DOM objects: • Attributes • Properties • Methods • Events
  9. 13.
  10. 19.

    Enter Angular Elements Provides a bridge from angular concepts to

    web components. @HostBinding() => Attributes @Input() => Properties @Output() => CustomEvents Lifecycle Hooks => Reactions
  11. 21.

    Platform Dependency Injection Decorators Zones Compile Binding Render Material Mobile

    Universal CLI Language Service Augury ngUpdate Router Animation i18n
  12. 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
  13. 23.
  14. 24.
  15. 26.
  16. 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';
  17. 29.
  18. 31.

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

    Element Injector (ElementRef) Element Injector (ElementRef)
  19. 32.
  20. 34.
  21. 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.
  22. 36.
  23. 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
  24. 39.
  25. 40.
  26. 41.

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

    • Trainer, Speaker @gassmannT thomasgassmann.net
  27. 43.