WebComponentsについて

社内勉強会で発表

Transcript

1. <web-­‐components>
   
2. about  me
   •  ໊લ     – ࣡ށढ़࠸   – ssd,  sisidovski   •  Front  EndϝΠϯ  
3.    ࠓ೔΋Ұ೔͕Μ͹Δ͍ͧʂ
   
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ͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ෼໘ന͍