Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop: Angular Elements @AngularInDepth 2019...

Avatar for Manfred Steyer Manfred Steyer PRO
June 15, 2019
Programming
0
270

Workshop: Angular Elements @AngularInDepth 2019, Kiev

Avatar for Manfred Steyer

Manfred Steyer PRO

June 15, 2019
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
310
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
480
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
240
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
220

Other Decks in Programming

See All in Programming
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
200
ソフトウェアテスト徹底指南書の紹介
Avatar for Hiroki Iseri goyoki
1
140
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
220
テストカバレッジ100%を10年続けて得られた学びと品質
Avatar for もっち mottyzzz
2
460
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
Avatar for Taito Tanaka taitotnk
0
680
機能追加とリーダー業務の類似性
Avatar for Rinchoku rinchoku
2
910
Rancher と Terraform
Avatar for Ryoma Fujiwara fufuhu
2
200
フロントエンドのmonorepo化と責務分離のリアーキテクト
Avatar for Takuma Kajikawa kajitack
2
160
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
690
The state patternの実践 個人開発で培ったpractice集
Avatar for miyanokomiya miyanokomiya
0
160
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
1.4k
Vue・React マルチプロダクト開発を支える Vite
Avatar for ANDPAD inc andpad
0
110

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
187
28k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k

Transcript

  1. @ManfredSteyer Workshop: A Deep Look into Angular Elements Manfred Steyer

    SOFTWAREarchitekt.at ManfredSteyer

  2. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

    ✓ 64 KB RAM ✓ Disks with 170 KB

  3. @ManfredSteyer Version with two cores ;-) Challenge: Resources!

  4. @ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10

    +/- yrs

  5. @ManfredSteyer There are milk products lasting longer than some JavaScript

    frameworks

  6. @ManfredSteyer Web Components

  7. @ManfredSteyer Contents • Web Components 101 • Web Components with

    Angular Elements • Polyfills • Dynamically Adding Web Components • Loading External Web Components

  8. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 8 Manfred Steyer Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at

  9. @ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements

    Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements

  10. @ManfredSteyer DEMO

  11. @ManfredSteyer All this can be polyfilled down to IE11 (more

    or less)

  12. @ManfredSteyer Polyfill

  13. @ManfredSteyer Selected Polyfills loader • Custom Elemens • Shadow DOM

    es5-adapter • For browsers that DO support custom elements • Alternative: Differential Loading

  14. @ManfredSteyer DEMO

  15. @ManfredSteyer Labs https://www.softwarearchitekt.at/labs/AngularInDepth/

  16. @ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to

    V • Web Components with Angular Ivy in 6 Steps

  17. @ManfredSteyer Summary Polyfills Custom_Element_Schema Angular Elements Shadow DOM Dynamically Adding

    Dynamically Loading

  18. @ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d Blog about this stuff Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at