Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Advancing into new areas with Angular Elements ...
Search
Manfred Steyer
PRO
February 25, 2019
Programming
1
520
Advancing into new areas with Angular Elements & Ivy
Manfred Steyer
PRO
February 25, 2019
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
600
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
350
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
20
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
380
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
250
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
300
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
160
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
170
Other Decks in Programming
See All in Programming
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
3.1k
定理証明プラットフォーム lapisla.net
abap34
1
690
Rubyでつくるパケットキャプチャツール
ydah
1
610
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
260
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
570
SpringBoot3.4の構造化ログ #kanjava
irof
2
850
ASP.NET Core の OpenAPIサポート
h455h1
0
170
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
1
200
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
540
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
150
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
610
Amazon Bedrock Multi Agentsを試してきた
tm2
1
260
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
33
3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing for humans not robots
tammielis
250
25k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Transcript
@ManfredSteyer Advancing into new areas with Angular Elements & Ivy
Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
@ManfredSteyer
@ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]
@ManfredSteyer
@ManfredSteyer Angular Elements
@ManfredSteyer Web Components
@ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS- Integration Dynamic
Loading
@ManfredSteyer Contents 1) Web Components 2) Angular Elements 3) Ivy
@ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • External Angular Team Member Page ▪ 9 Manfred Steyer Public: Frankfurt, Stuttgart, Vienna In-House: everywhere http://softwarearchitekt.at/workshops
@ManfredSteyer 1) Web Components
@ManfredSteyer Framework independent Components
@ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM
@ManfredSteyer Usage <script src="my-bundle.js"></script> <date-picker min="0" max="100"></date-picker>
@ManfredSteyer DEMO 1]
@ManfredSteyer All this can be polyfilled down to IE11 (more
or less)
@ManfredSteyer Polyfill
@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)
@ManfredSteyer 2) Angular Elements
@ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class DateModule { }
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class DateModule { }
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class DateModule { constructor(private injector: Injector) { } }
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class DateModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }
@ManfredSteyer DEMO 2]
@ManfredSteyer Bundle Custom Element 1 Libraries: Angular, RxJS, …
@ManfredSteyer 3) Ivy (Angular 8)
@ManfredSteyer Angular Compiler HTML Template JavaScript Angular Compiler
@BASTAcon & @ManfredSteyer Ivy New Compiler/ View Engine More treeshakable
Code No Breaking Changes Public with Angular 8
@BASTAcon & @ManfredSteyer [Miško Hevery, ngconf 2018 Keynote]
@BASTAcon & @ManfredSteyer
@ManfredSteyer Angular Elements + Ivy + Tree Shaking* Custom Element
1 „Runtime“ * UI-centric code
@ManfredSteyer DEMO 3]
@ManfredSteyer
@ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core,
@angular/common Libs like @angular/forms or @angular/router
@ManfredSteyer Roadmap (details can change) • Ivy behind a flag
• Try it out! Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
@ManfredSteyer More on SOFTWAREarchitekt.at
@ManfredSteyer Summary Angular: full fledged SPAs Angular Elements: Lightweight Scenarios
Widgets CMS Integration Enriching Existing Applications Ivy: Better Treeshakability
@ManfredSteyer Contact and Downloads [mail]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d http://softwarearchitekt.at/workshops Slides & Examples