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
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
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 this
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 (ElementRef)
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