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

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ʣ