WebComponentsについて

 WebComponentsについて

社内勉強会で発表

A82d0263c90b1def7afedfdd89dd642d?s=128

Shunya Shishido

October 06, 2014
Tweet

Transcript

  1. <web-­‐components>

  2. about  me •  ໊લ     – ࣡ށढ़࠸   – ssd,  sisidovski

      •  Front  EndϝΠϯ  
  3.    ࠓ೔΋Ұ೔͕Μ͹Δ͍ͧʂ

  4. None
  5. None
  6. None
  7. <ganbaru-­‐zoi> •  <ganbaru-­‐zoi></ganbaru-­‐zoi>ͱॻ͚͹࢖͑ΔΧελϜλά   –  ͍ΘΏΔWebComponents   –  PolymerΛ࢖ͬͨ  

    –  chrome,  firefox,  safari,  IE10ʙͰ࢖͑Δ͸ͣ   •  github   –  https://github.com/sisidovski/zoi   •  bower   –  $  bower  install  ganbaru-­‐zoi
  8. DEMO http://sisidovski.github.io/zoi/

  9. <ganbaru-­‐zoi> •  HTMLͱCSSɺϨϯμϦϯάޙ΍ΫϦοΫ࣌ͷৼΔ ෣͍Λ·ͱΊͯ1ͭͷίϯϙʔωϯτʹ͍ͯ͠Δ   •  ӨΛ࡞͍ͬͯΔCSS,    Ξχϝʔγϣϯ෦෼͸ Polymer͕ఏڙ͍ͯ͠ΔΧελϜλάΛ಺෦Ͱར༻

      •  ਧ͖ग़͠ʹදࣔ͢Δจࣈྻ͸σʔλόΠϯσΟϯ άͰ؅ཧ
  10. WebComponents? •  ཁ͢Δʹʮ෦඼୯ҐͰ෼ׂʯ   •  Webඪ४ʹͳΔ༧ఆ   –  PCϒϥ΢βͰؾ݉Ͷͳ͘࢖͑Δʹ͸΋͏গ͠ઌͩͱࢥ͏  

    •  ίϯϙʔωϯτ͸ΧϓηϧԽ͞ΕΔ   –  ֎෦ΛԚછ͠ͳ͍   •  ίϯϙʔωϯτ͸࠶ར༻͕Մೳ   •  ͓͢͢ΊϦϯΫ   –  http://customelements.io/  
  11. WebComponents? •  Custom  Elements    ෦඼Λ࡞Δ࢓૊Έ   •  HTML  Imports

             ෦඼Λݺͼग़͢࢓૊Έ   •  Template        ෦඼Λ࢖͏࢓૊Έ   •  Shadow  DOM      ෦඼ΛΧϓηϧԽ͢Δ࢓૊Έ   ্ه4ͭΛ૊Έ߹ΘͤͯUIίϯϙʔωϯτ͕࡞ΕΔ            ˠWebComponents  
  12. Polymer? •  WebComponentsඇରԠϒϥ΢β΁ͷPolyfillϥΠϒ ϥϦ   –  ҋͷٕज़ͰAPIΛ༻ҙٖͯ͠ࣅతʹ࢖͑ΔΑ͏ʹͯ͠ ͍Δ   – 

    ྫ͑͹Shadow  DOM͸ݱঢ়chromeͱoperaͰ͔͠࢖͑ ͳ͍ʢFirefox͸32Ҏ߱Ͱ༧ఆΒ͍͠ʣ   •  WebComponentsͷapiΛந৅Խͯ͠࢖͍΍͘͢   •  σʔλόΠϯσΟϯά  
  13. in  other  frameworks •  ΧελϜλά͸࡞ΕΔ   –  Angular.jsͷσΟϨΫςΟϒ   – 

    Knockout.js͸3.2͔ΒComponentsͱ͍͏ػೳͰ࢖͑ΔΑ͏ʹͳΔ   –  Vue.js͸Component   •  WebComponentsͰ͸ͳ͍   –  Shadow  DOMʹରԠ͍ͯ͠ͳ͍ͷͰɺҾ͖ଓ͖άϩʔόϧԚછ ʹؾΛ͚ͭͨ։ൃ͕ඞཁ   •  Ұ෦ݹ͍IEʹରԠ͍ͯ͠Δ   –  ϑϨʔϜϫʔΫʹΑΓ͚Γ   –  Ұ෦੍໿͕͋ͬͨΓ͢Δ͕ɺPolymerΑΓ΋खް͍  
  14. ࡞ͬͯΈͨײ૝ •  ίϯϙʔωϯτ͝ͱʹΧϓηϧԽͰ͖Δͷ͸େ͖͍   –  ಛʹνʔϜ։ൃͰҖྗΛൃشͦ͠͏   •  ίϯϙʔωϯτؒͰґଘؔ܎͕͋Δͱ͖ʹΠϯϙʔτ ͢Δॱংͱ͔Λؾʹ͠ͳͪ͘Ό͍͚ͳͯ͘ΞϨ

      •  ίϯϙʔωϯτ͸ͦΕͧΕඇಉظͰಡΈࠐ·ΕΔͷͰɺ Կ΋͠ͳ͍ͱϦΫΤετ਺͕രൃతʹ૿͑Δ   –  Polymer/Vulcanizeͱ͍͏πʔϧͰ·ͱΊΒΕΔͬΆ͍͚Ͳ ·ͩࢼͯ͠ͳ͍ɻgrunt/gulpϓϥάΠϯ΋طʹ͋Δ  
  15. ·ͱΊ •  NewGame!ͷΧελϜλάΛ࡞ͬͨ   •  ະདྷͬΆ͍WebComponentsͱPolymerͷ࿩   •  WebComponents͸·ͩ·ͩ՝୊΋ଟͦ͏  

  16. એ఻ •  ҕୗൢച   •  8/17(೔)  ੢ϗʔϧ͖-­‐36B   •  Socket.IO

     1.0ͷهࣄॻ͖· ͨ͠   •  γΣϧεΫϦϓτͰWebΞ ϓϦ࡞ͬͨͱ͔Imutableͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ෼໘ന͍