Advancing into new areas with Angular Elements & Ivy @DevWeek 2019 in Nuremberg

Transcript

1. @ManfredSteyer Advancing into new areas with Angular Elements & 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
7. @ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS- Integration Dynamic Loading
8. @ManfredSteyer Contents 1) Web Components 2) Angular Elements 3) Ivy
9. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • External Angular Team Member Page ▪ 9 Manfred Steyer In-House: everywhere Public: Wien - München - Frankfurt http://softwarearchitekt.at/workshops
10. @ManfredSteyer 1) Web Components
11. @ManfredSteyer Framework independent Components
12. @ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM
13. @ManfredSteyer Usage <script src="my-bundle.js"></script> <date-picker min="0" max="100"></date-picker>
14. @ManfredSteyer All this can be polyfilled down to IE11 (more or less)
15. @ManfredSteyer Polyfill
16. @ManfredSteyer Selected Polyfills • webcomponents-loader.js • Loads Polyfills on demand • Custom Elements • Shadom DOM • Templates • native-shim.js • Needed for browsers that DO support polyfills • When downleveled to ES5 • Alternative: Differential Loading (providing ES5 + ES2015 bundles)
17. @ManfredSteyer 2) Angular Elements
18. @ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements
19. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent] }) export class MyModule { }
20. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent] }) export class MyModule { }
21. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent] }) export class MyModule { constructor(private injector: Injector) { } }
22. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent] }) export class MyModule { constructor(private injector: Injector) { const MyElement = createCustomElement( MyComponent, { injector: this.injector }); customElements.define('my-element', MyElement); } }
23. @ManfredSteyer DEMO]
24. @ManfredSteyer External Web Components Project A Custom Element Custom Element Bundle Project B
25. @ManfredSteyer DEMO]
26. @ManfredSteyer Bundle Custom Element 1 Libraries: Angular, RxJS, …
27. @ManfredSteyer 3) Ivy (Angular 8)
28. @ManfredSteyer Angular Compiler HTML Template JavaScript Angular Compiler
29. @BASTAcon & @ManfredSteyer Ivy New Compiler/ View Engine More treeshakable Code No Breaking Changes
30. @BASTAcon & @ManfredSteyer [Miško Hevery, ngconf 2018 Keynote]
31. @BASTAcon & @ManfredSteyer
32. @ManfredSteyer Angular Elements + Ivy + Tree Shaking* Custom Element 1 „Runtime“ * UI-centric code
33. @ManfredSteyer DEMO 3]
34. @ManfredSteyer Roadmap (details can change) • Ivy behind a flag - try it out! • Currently no Ivy/Elements-Bridge Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
35. @ManfredSteyer More on SOFTWAREarchitekt.at
36. @ManfredSteyer
37. @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router
38. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom Element 3 Libraries: Angular, RxJS, … UMD ngx-build-plus Drawbacks: Complexity, no isolation webpack: Externals
39. @ManfredSteyer More on SOFTWAREarchitekt.at
40. @ManfredSteyer Summary Angular Elements: Lightweight Scenarios Widgets CMS Integration Enriching Existing Applications Ivy: Small Bundles
41. @ManfredSteyer Sometimes, all we want to have is just a pizza
42. @ManfredSteyer Sometimes, all we want to have is just a pizza!
43. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples