Workshop: Angular Elements @AngularInDepth 2019, Kiev

@ManfredSteyer Workshop: A Deep Look into Angular Elements Manfred Steyer
SOFTWAREarchitekt.at ManfredSteyer

@ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz
✓ 64 KB RAM ✓ Disks with 170 KB

@ManfredSteyer Version with two cores ;-) Challenge: Resources!

@ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10
+/- yrs

@ManfredSteyer There are milk products lasting longer than some JavaScript
frameworks

@ManfredSteyer Web Components

@ManfredSteyer Contents • Web Components 101 • Web Components with
Angular Elements • Polyfills • Dynamically Adding Web Components • Loading External Web Components

@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

@ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements
Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements

@ManfredSteyer DEMO

@ManfredSteyer All this can be polyfilled down to IE11 (more
or less)

@ManfredSteyer Polyfill

@ManfredSteyer Selected Polyfills loader • Custom Elemens • Shadow DOM
es5-adapter • For browsers that DO support custom elements • Alternative: Differential Loading

@ManfredSteyer DEMO

@ManfredSteyer Labs https://www.softwarearchitekt.at/labs/AngularInDepth/

@ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to
V • Web Components with Angular Ivy in 6 Steps

@ManfredSteyer Summary Polyfills Custom_Element_Schema Angular Elements Shadow DOM Dynamically Adding
Dynamically Loading

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d Blog about this stuff Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at

Workshop: Angular Elements @AngularInDepth 2019...

Workshop: Angular Elements @AngularInDepth 2019, Kiev

Manfred Steyer PRO

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript

@ManfredSteyer Workshop: A Deep Look into Angular Elements Manfred Steyer

@ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

@ManfredSteyer Version with two cores ;-) Challenge: Resources!

@ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10

@ManfredSteyer There are milk products lasting longer than some JavaScript

@ManfredSteyer Web Components

@ManfredSteyer Contents • Web Components 101 • Web Components with

@ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

@ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements

@ManfredSteyer DEMO

@ManfredSteyer All this can be polyfilled down to IE11 (more

@ManfredSteyer Polyfill

@ManfredSteyer Selected Polyfills loader • Custom Elemens • Shadow DOM

@ManfredSteyer DEMO

@ManfredSteyer Labs https://www.softwarearchitekt.at/labs/AngularInDepth/

@ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to

@ManfredSteyer Summary Polyfills Custom_Element_Schema Angular Elements Shadow DOM Dynamically Adding

@ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer