@angular/elementsをもうちょっと追いかけてみる

ng-sake#10のLT資料
https://qiita.com/studioTeaTwo/items/13d3eed751781bf039fc

Transcript

1. @angular/elementsΛ΋͏ͪΐͬͱ௥͍͔͚ͯΈΔ 2017/12/14 ng-sake LTࢿྉ
 @stutioTeaTwo
2. about me • TanakaToshiya • @studioTeaTwo • ϋϯυϧωʔϜ͸ຊ໊ͷΠχγϟϧΑΓ T.T→T2→TeaTwo • angular͸ࠓ೥5݄͔Βɻڈ೥͸reactɺଞ ʹpureMVCɾbackboneɾcreateJSͳͲ • ڈ೥·Ͱ5೥΄Ͳιγϟή΍͍ͬͯͨɻ ࠓ͸ίϯγϡʔϚܥͷwebαʔϏεΛ ࡞͍ͬͯ·͢ɻ
3. @angular/elementsͱ͸ https://qiita.com/studioTeaTwo/items/13d3eed751781bf039fc هࣄॻ͖·ͨ͠ɻ ࡶʹݴ͏ͱWebComponentsʹ͢ΔPKGͰ͢ɻ
4. ࠓ೔͸΋͏ͪΐͬͱ௥͍͔͚ͯΈ·͢ɻ
5. @angular/elements ͷ͕͜͜Θ͔Βͳ͍Αʂ AngularMix΍AngularConnect2017ͷRobࢯͷϓϨθϯ಺༰ͱ @angular/elementsͷެ։಺༰ʹڑ཭͕͋Δɻ ɾRobࢯ͸portable(࣋ͪӡͼ)ͱinterop(૬ޓӡ༻)Λશ໘ʹग़͢ ʮAngular Components outside of Angular applicationsʯ ɾgkalpakࢯ͸WebComponentsʹ৐͚ͬΒΕͨΑʂYeah! ʮAngular applications on Web Componentsʯ
6. ཁ͸ɺrobࢯ͕ϓϨθϯ͍ͯ͠ΔFancy-DatePicker Λ࡞ͬͯ഑෍ͱ͔͸·ͩͰ͖ͳ͍ͬͯ͜ͱͰ͢ɻ
7. ͳͥڑ཭͕͋Δͷ͔ʁ • Packaging&Deploy͕ఏڙ͞Ε͍ͯͳ͍ • Angularࣗ਎΍3rd-partyϥΠϒϥϦΛશ෦όϯυϧ͠ͳ͍ͱ͍͚ͳ͍ • όϯυϧαΠζ਺ඦKBʙ਺MBͱ͔Ͷ • ͱݴ͏͔ɺAngularPJؒͰͷcomponent૬ޓӡ༻Ͱ΋໰୊ग़Δ • 2ճϨϯμʔͪ͠Ό͏ɻdouble-compilation • Angularࣗ਎ͷrenderͷޙʹWebComponentsͱͯ͠΋͏Ұճrender ͢Δ • ಉ͡DependencyΛγΣΞͰ͖ͳ͍ • ճආࡦ͸͋ΔˠPlatformRefͰγΣΞ͢Δ • ͔͠͠ɺ౰વͳ͕Βόʔδϣϯҧ͏ͱΩϏγΠ
8. double-compilation ಉ͡Ϙλϯ͕2ͭͰ͖ͯΔ https://github.com/angular/angular/issues/20859#issuecomment-350535825
9. Angularͷϑϧ؀ڥͰɺ͔͠΋ಉ͡PJ಺Ͱ WebComponents΋include͠ͳ͍ͱɺ@angular/elements ͸ಈ͔ͳ͍ͬͯ͜ͱͰ͢ɻ
10. FancyͳDatePicker! εϦϜͳαΠζʂ ϑϧAngularApplication! ਺MBڃʂ ୯ମͰಈ͚ΔΑʂ શ෦ࠐΈࠐΈͰϏϧυͯ͠Ͷʂ
11. ʮݱࡏɺ@angular/elements͸ɺlabsͱ͍͏R&Dͷ PJͰల։͞Ε͍ͯ·͢ɻʯ
12. ͳΔ΄Ͳɺ͔֬ʹʮlab=ݚڀࣨʯஈ֊Ͱ͢Ͷ
13. ͱ͸͍͑ɺղܾʹ͍Ζ͍Ζಈ͍͍ͯΔ ɾ ৽Ϩϯμϥʔivy͸μΠϨΫτʹ͜ͷ݅ʹӨڹͦ͠͏ ɾ ϓϥοτϑΥʔϜϑϦʔͰಈ͚ΔΑ͏ʹZoneൈ͖ͷ ChangeDetectionOption͕ొ৔͍ͯ͠Δ ɾ double-compilation͸ط஌໰୊Ͱݚڀதɻmix-project͸·ͩະ ౿ͷ஍ʢuncharted territoryʣΒ͍͠
14. ݱࡏͷ@angular/elementsͷ࣮૷಺༰ طଘͷPJͱ؀ڥγΣΞ͢Δ΍ͭ ࠓͷAppΛؙ͝ͱWebComponentsԽ͢Δ΍ͭ
15. ࣍͸registerAsCustomElementsͰهࣄॻ͜͏ͱࢥ ͍·͢ʢwillʣ