Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

49899d411b88461a3a3d538b598949e2?s=128

Toshiya Tanaka

December 14, 2017
Tweet

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ʣ