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
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
45
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
33
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
66
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
39
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
40
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
120
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
160
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
200
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
120
Other Decks in Programming
See All in Programming
파급효과: From AI to Android Development
l2hyunwoo
0
170
事業KPIを基に価値の解像度を上げる
nealle
0
150
Носок на сок
bo0om
0
1.4k
ビカム・ア・コパイロット
ymd65536
1
160
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
3
2.8k
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
2
550
Rubyの!メソッドをちゃんと理解する
alstrocrack
2
380
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
2k
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
160
M5UnitUnified 最新動向 2025/05
gob
0
140
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.6k
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
190
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Building Applications with DynamoDB
mza
94
6.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Rails Girls Zürich Keynote
gr2m
94
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
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