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
310
@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
830
chat bot UI by Angular (ng-japan meetup)
studioteatwo
2
1.2k
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
330
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
ゆるい個人開発のススメ
kuroppe1819
10
930
受託開発でGitLab CI を活用していく
xiombatsg
1
270
Semantic search with Django and pgvector
pauloxnet
0
240
Featured
See All Featured
Faster Mobile Websites
deanohume
297
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Side Projects
sachag
451
41k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
GitHub's CSS Performance
jonrohan
1023
450k
Why Our Code Smells
bkeepers
PRO
331
56k
Embracing the Ebb and Flow
colly
79
4.1k
GraphQLとの向き合い方2022年版
quramy
31
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
Building Applications with DynamoDB
mza
88
5.6k
A better future with KSS
kneath
231
16k
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ʣ