Advancing into new areas with Angular Elements and Ivy @BASTA 2019 in Mainz, Germany

Examples: https://github.com/manfredsteyer/basta_2019_ivy_elements

Transcript

1. @ManfredSteyer Advancing into new areas with Angular Elements and Ivy Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer
3. @ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]
4. @ManfredSteyer
5. @ManfredSteyer Angular Elements
6. @ManfredSteyer Web Components: Framework independent components
7. @ManfredSteyer Custom Elements: Framework independent components
8. @ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS- Integration Dynamic Loading
9. @ManfredSteyer Contents 1) Basics 2) Lazy loading elements 3) External elements 4) Dealing with dependencies 5) Angular Ivy
10. @ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 10 Manfred Steyer Public: Frankfurt, Munich, Vienna In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops
11. @ManfredSteyer 1) Basics
12. @ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements
13. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { }
14. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { }
15. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { } }
16. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent] }) export class AppModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }
17. @ManfredSteyer Calling a Custom Element <date-picker></date-picker>
18. @ManfredSteyer Can be polyfilled down to IE11
19. @ManfredSteyer
20. @ManfredSteyer DEMO
21. @ManfredSteyer 2) Lazy Elements
22. @ManfredSteyer Lazy Loading Register module in angular.json Load with with NgModuleFactoryLoader
23. @ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module.ts" ],
24. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { }
25. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
26. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]lazy-dashboard-tile.module#LazyDashboardTileModule'; } }
27. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]lazy-dashboard-tile.module#LazyDashboardTileModule'; return this.loader.load(path).then(moduleFactory => { }); } }
28. @ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]lazy-dashboard-tile.module#LazyDashboardTileModule'; return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); […] }); } }
29. @ManfredSteyer DEMO
30. @ManfredSteyer 3) External Elements aka Standalone Elements
31. @ManfredSteyer Project A Custom Element Custom Element Bundle Project B
32. @ManfredSteyer Register Custom Element when bootstrapping Compile application to self contained bundle Load bundle into consumer 3 Steps
33. @ManfredSteyer Load into consumer const script = document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
34. @ManfredSteyer DEMO
35. @ManfredSteyer 6) Dealing with Dependencies
36. @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
37. @ManfredSteyer Tree Shaking + Ivy (Angular 9.x) Custom Element 1 Custom Element 2 Custom Element 3
38. @BASTAcon & @ManfredSteyer [Brad Green, ngconf 2019 Keynote]
39. @ManfredSteyer DEMO
40. @ManfredSteyer Roadmap (details can change) • Ivy behind a flag Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
41. @ManfredSteyer
42. @ManfredSteyer
43. @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router
44. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation
45. @ManfredSteyer DEMO
46. @ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements (5 Parts) • Web Components with Angular Ivy in 6 Steps • Architecture with Ivy (2 Parts so far) • A possible future without NgModules • Higher Order and Dynamic Components
47. @ManfredSteyer Summary Dynamically Adding External Elements Enhancing Existing Apps (e. g. ASP.NET) Migration Path Ivy for UI-based Code ngx-build-plus: Sharing Dependencies
48. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples