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
330
@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
型で語るカタ
irof
0
200
Hack Claude Code with Claude Code
choplin
5
2.3k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
160
What's new in AppKit on macOS 26
1024jp
0
110
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
510
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
6k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
790
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
180
PicoRuby on Rails
makicamel
2
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Facilitating Awesome Meetings
lara
54
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Site-Speed That Sticks
csswizardry
10
690
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How to train your dragon (web standard)
notwaldorf
96
6.1k
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ʣ