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
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
91
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
170
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
110
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
190
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
250
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
530
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
200
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
250
Other Decks in Programming
See All in Programming
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
監視 やばい
syossan27
11
10k
ComposeでWebアプリを作る技術
tbsten
0
120
RuboCop: Modularity and AST Insights
koic
2
1.9k
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
Exit 8 for SwiftUI
ojun9
0
140
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
300
Jakarta EE Meets AI
ivargrimstad
0
350
The Evolution of the CRuby Build System
kateinoigakukun
1
730
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.8k
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
150
State of Namespace
tagomoris
5
2.1k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.3k
The Cult of Friendly URLs
andyhume
78
6.3k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Thoughts on Productivity
jonyablonski
69
4.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Designing for humans not robots
tammielis
253
25k
Typedesign – Prime Four
hannesfritz
41
2.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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