Workshop: Angular Elements @AngularInDepth 2019, Kiev

Transcript

1. @ManfredSteyer Workshop: A Deep Look into Angular Elements Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz ✓ 64 KB RAM ✓ Disks with 170 KB
3. @ManfredSteyer Version with two cores ;-) Challenge: Resources!
4. @ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10 +/- yrs
5. @ManfredSteyer There are milk products lasting longer than some JavaScript frameworks
6. @ManfredSteyer Web Components
7. @ManfredSteyer Contents • Web Components 101 • Web Components with Angular Elements • Polyfills • Dynamically Adding Web Components • Loading External Web Components
8. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 8 Manfred Steyer Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at
9. @ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements
10. @ManfredSteyer DEMO
11. @ManfredSteyer All this can be polyfilled down to IE11 (more or less)
12. @ManfredSteyer Polyfill
13. @ManfredSteyer Selected Polyfills loader • Custom Elemens • Shadow DOM es5-adapter • For browsers that DO support custom elements • Alternative: Differential Loading
14. @ManfredSteyer DEMO
15. @ManfredSteyer Labs https://www.softwarearchitekt.at/labs/AngularInDepth/
16. @ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to V • Web Components with Angular Ivy in 6 Steps
17. @ManfredSteyer Summary Polyfills Custom_Element_Schema Angular Elements Shadow DOM Dynamically Adding Dynamically Loading
18. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Blog about this stuff Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at