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
530
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
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
manfredsteyer
PRO
0
38
Reactivity, Reimagined: Angular Signals at Every Layer
manfredsteyer
PRO
0
55
Angular Architecture Workshop @AngularDays in Berlin 2025
manfredsteyer
PRO
0
46
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
120
All About Angular's New Signal Forms
manfredsteyer
PRO
0
220
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
220
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
150
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
81
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
530
What's new in Spring Modulith?
olivergierke
1
170
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
300
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
860
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
品質ワークショップをやってみた
nealle
0
650
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
180
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
530
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
210
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Facilitating Awesome Meetings
lara
57
6.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Navigating Team Friction
lara
190
15k
Building an army of robots
kneath
305
46k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
What's in a price? How to price your products and services
michaelherold
246
12k
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