Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
@angular/elementsをもうちょっと追いかけてみる
Toshiya Tanaka
December 14, 2017
Programming
1
300
@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
studioteatwo
1
750
studioteatwo
2
860
Other Decks in Programming
See All in Programming
canon1ky
3
350
mizdra
7
4.9k
akatsukinewgrad
0
220
manfredsteyer
PRO
0
270
bkuhlmann
4
620
kazaman97
0
190
nauleyco
0
210
azdaroth
0
170
zsmb
1
130
nbkouhou
9
4.7k
tommykw
1
350
itosho525
1
370
Featured
See All Featured
colly
66
3k
morganepeng
17
1.1k
ammeep
656
54k
akmur
252
19k
davidbonilla
70
3.5k
deanohume
295
27k
danielanewman
1
480
lara
16
2.6k
thoeni
4
550
andyhume
62
3.4k
philhawksworth
190
17k
robhawkes
52
2.8k
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ʣ