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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
150
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
500
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
370
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
130
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
180
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
330
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
220
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
190
Other Decks in Programming
See All in Programming
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
170
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
960
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
260
画像コンペでのベースラインモデルの育て方
tattaka
3
1.2k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
37
11k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
760
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
7
1.3k
QA x AIエコシステム段階構築作戦
osu
0
240
Vibe coding コードレビュー
kinopeee
0
410
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
KATA
mclloyd
31
14k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building Adaptive Systems
keathley
43
2.7k
Docker and Python
trallard
45
3.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
How GitHub (no longer) Works
holman
314
140k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
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