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
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
98
Your Architecture as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
72

Other Decks in Programming

See All in Programming
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
3
2.4k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
280
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
Avatar for Nealle nealle
0
120
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
220
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
490
PicoRuby on Rails
Avatar for makicamel makicamel
2
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
220
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
3
360
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
730
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
180

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
730
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k

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