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
@angular/elementsをもうちょっと追いかけてみる
Search
Toshiya Tanaka
December 14, 2017
Programming
1
340
@angular/elementsをもうちょっと追いかけてみる
ng-sake#10のLT資料
https://qiita.com/studioTeaTwo/items/13d3eed751781bf039fc
Toshiya Tanaka
December 14, 2017
Tweet
Share
More Decks by Toshiya Tanaka
See All by Toshiya Tanaka
hololens-meetup_20180218.pdf
studioteatwo
1
860
chat bot UI by Angular (ng-japan meetup)
studioteatwo
2
1.3k
Other Decks in Programming
See All in Programming
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
CSC509 Lecture 04
javiergs
PRO
0
300
XP, Testing and ninja testing ZOZ5
m_seki
3
310
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
970
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
490
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
400
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.4k
CSC305 Lecture 01
javiergs
PRO
1
400
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
540
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Become a Pro
speakerdeck
PRO
29
5.5k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Optimizing for Happiness
mojombo
379
70k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Speed Design
sergeychernyshev
32
1.1k
What's in a price? How to price your products and services
michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Practical Orchestrator
shlominoach
190
11k
4 Signs Your Business is Dying
shpigford
185
22k
Site-Speed That Sticks
csswizardry
11
880
Transcript
@angular/elementsΛ͏ͪΐͬͱ͍͔͚ͯΈΔ 2017/12/14 ng-sake LTࢿྉ @stutioTeaTwo
about me • TanakaToshiya • @studioTeaTwo • ϋϯυϧωʔϜຊ໊ͷΠχγϟϧΑΓ T.T→T2→TeaTwo •
angularࠓ5݄͔Βɻڈreactɺଞ ʹpureMVCɾbackboneɾcreateJSͳͲ • ڈ·Ͱ5΄Ͳιγϟή͍ͬͯͨɻ ࠓίϯγϡʔϚܥͷwebαʔϏεΛ ࡞͍ͬͯ·͢ɻ
@angular/elementsͱ https://qiita.com/studioTeaTwo/items/13d3eed751781bf039fc هࣄॻ͖·ͨ͠ɻ ࡶʹݴ͏ͱWebComponentsʹ͢ΔPKGͰ͢ɻ
ࠓ͏ͪΐͬͱ͍͔͚ͯΈ·͢ɻ
@angular/elements ͷ͕͜͜Θ͔Βͳ͍Αʂ AngularMixAngularConnect2017ͷRobࢯͷϓϨθϯ༰ͱ @angular/elementsͷެ։༰ʹڑ͕͋Δɻ ɾRobࢯportable(࣋ͪӡͼ)ͱinterop(૬ޓӡ༻)Λશ໘ʹग़͢ ʮAngular Components outside of Angular
applicationsʯ ɾgkalpakࢯWebComponentsʹ͚ͬΒΕͨΑʂYeah! ʮAngular applications on Web Componentsʯ
ཁɺrobࢯ͕ϓϨθϯ͍ͯ͠ΔFancy-DatePicker Λ࡞ͬͯͱ͔·ͩͰ͖ͳ͍ͬͯ͜ͱͰ͢ɻ
ͳͥڑ͕͋Δͷ͔ʁ • Packaging&Deploy͕ఏڙ͞Ε͍ͯͳ͍ • Angularࣗ3rd-partyϥΠϒϥϦΛશ෦όϯυϧ͠ͳ͍ͱ͍͚ͳ͍ • όϯυϧαΠζඦKBʙMBͱ͔Ͷ • ͱݴ͏͔ɺAngularPJؒͰͷcomponent૬ޓӡ༻Ͱग़Δ •
2ճϨϯμʔͪ͠Ό͏ɻdouble-compilation • AngularࣗͷrenderͷޙʹWebComponentsͱͯ͠͏Ұճrender ͢Δ • ಉ͡DependencyΛγΣΞͰ͖ͳ͍ • ճආࡦ͋ΔˠPlatformRefͰγΣΞ͢Δ • ͔͠͠ɺવͳ͕Βόʔδϣϯҧ͏ͱΩϏγΠ
double-compilation ಉ͡Ϙλϯ͕2ͭͰ͖ͯΔ https://github.com/angular/angular/issues/20859#issuecomment-350535825
AngularͷϑϧڥͰɺ͔͠ಉ͡PJͰ WebComponentsinclude͠ͳ͍ͱɺ@angular/elements ಈ͔ͳ͍ͬͯ͜ͱͰ͢ɻ
FancyͳDatePicker! εϦϜͳαΠζʂ ϑϧAngularApplication! MBڃʂ ୯ମͰಈ͚ΔΑʂ શ෦ࠐΈࠐΈͰϏϧυͯ͠Ͷʂ
ʮݱࡏɺ@angular/elementsɺlabsͱ͍͏R&Dͷ PJͰల։͞Ε͍ͯ·͢ɻʯ
ͳΔ΄Ͳɺ͔֬ʹʮlab=ݚڀࣨʯஈ֊Ͱ͢Ͷ
ͱ͍͑ɺղܾʹ͍Ζ͍Ζಈ͍͍ͯΔ ɾ ৽ϨϯμϥʔivyμΠϨΫτʹ͜ͷ݅ʹӨڹͦ͠͏ ɾ ϓϥοτϑΥʔϜϑϦʔͰಈ͚ΔΑ͏ʹZoneൈ͖ͷ ChangeDetectionOption͕ొ͍ͯ͠Δ ɾ double-compilationطͰݚڀதɻmix-project·ͩະ ౿ͷʢuncharted territoryʣΒ͍͠
ݱࡏͷ@angular/elementsͷ࣮༰ طଘͷPJͱڥγΣΞ͢Δͭ ࠓͷAppΛؙ͝ͱWebComponentsԽ͢Δͭ
࣍registerAsCustomElementsͰهࣄॻ͜͏ͱࢥ ͍·͢ʢwillʣ