Tweet
Tweet

Slide 1

Slide 1 text

Slide 2

Slide 2 text

about  me •  ໊લ     – ࣡ށढ़࠸   – ssd,  sisidovski   •  Front  EndϝΠϯ  

Slide 3

Slide 3 text

   ࠓ೔΋Ұ೔͕Μ͹Δ͍ͧʂ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

•  ͱॻ͚͹࢖͑ΔΧελϜλά   –  ͍ΘΏΔWebComponents   –  PolymerΛ࢖ͬͨ   –  chrome,  firefox,  safari,  IE10ʙͰ࢖͑Δ͸ͣ   •  github   –  https://github.com/sisidovski/zoi   •  bower   –  $  bower  install  ganbaru-­‐zoi

Slide 8

Slide 8 text

DEMO http://sisidovski.github.io/zoi/

Slide 9

Slide 9 text

•  HTMLͱCSSɺϨϯμϦϯάޙ΍ΫϦοΫ࣌ͷৼΔ ෣͍Λ·ͱΊͯ1ͭͷίϯϙʔωϯτʹ͍ͯ͠Δ   •  ӨΛ࡞͍ͬͯΔCSS,    Ξχϝʔγϣϯ෦෼͸ Polymer͕ఏڙ͍ͯ͠ΔΧελϜλάΛ಺෦Ͱར༻   •  ਧ͖ग़͠ʹදࣔ͢Δจࣈྻ͸σʔλόΠϯσΟϯ άͰ؅ཧ

Slide 10

Slide 10 text

WebComponents? •  ཁ͢Δʹʮ෦඼୯ҐͰ෼ׂʯ   •  Webඪ४ʹͳΔ༧ఆ   –  PCϒϥ΢βͰؾ݉Ͷͳ͘࢖͑Δʹ͸΋͏গ͠ઌͩͱࢥ͏   •  ίϯϙʔωϯτ͸ΧϓηϧԽ͞ΕΔ   –  ֎෦ΛԚછ͠ͳ͍   •  ίϯϙʔωϯτ͸࠶ར༻͕Մೳ   •  ͓͢͢ΊϦϯΫ   –  http://customelements.io/  

Slide 11

Slide 11 text

WebComponents? •  Custom  Elements    ෦඼Λ࡞Δ࢓૊Έ   •  HTML  Imports          ෦඼Λݺͼग़͢࢓૊Έ   •  Template        ෦඼Λ࢖͏࢓૊Έ   •  Shadow  DOM      ෦඼ΛΧϓηϧԽ͢Δ࢓૊Έ   ্ه4ͭΛ૊Έ߹ΘͤͯUIίϯϙʔωϯτ͕࡞ΕΔ            ˠWebComponents  

Slide 12

Slide 12 text

Polymer? •  WebComponentsඇରԠϒϥ΢β΁ͷPolyfillϥΠϒ ϥϦ   –  ҋͷٕज़ͰAPIΛ༻ҙٖͯ͠ࣅతʹ࢖͑ΔΑ͏ʹͯ͠ ͍Δ   –  ྫ͑͹Shadow  DOM͸ݱঢ়chromeͱoperaͰ͔͠࢖͑ ͳ͍ʢFirefox͸32Ҏ߱Ͱ༧ఆΒ͍͠ʣ   •  WebComponentsͷapiΛந৅Խͯ͠࢖͍΍͘͢   •  σʔλόΠϯσΟϯά  

Slide 13

Slide 13 text

in  other  frameworks •  ΧελϜλά͸࡞ΕΔ   –  Angular.jsͷσΟϨΫςΟϒ   –  Knockout.js͸3.2͔ΒComponentsͱ͍͏ػೳͰ࢖͑ΔΑ͏ʹͳΔ   –  Vue.js͸Component   •  WebComponentsͰ͸ͳ͍   –  Shadow  DOMʹରԠ͍ͯ͠ͳ͍ͷͰɺҾ͖ଓ͖άϩʔόϧԚછ ʹؾΛ͚ͭͨ։ൃ͕ඞཁ   •  Ұ෦ݹ͍IEʹରԠ͍ͯ͠Δ   –  ϑϨʔϜϫʔΫʹΑΓ͚Γ   –  Ұ෦੍໿͕͋ͬͨΓ͢Δ͕ɺPolymerΑΓ΋खް͍  

Slide 14

Slide 14 text

࡞ͬͯΈͨײ૝ •  ίϯϙʔωϯτ͝ͱʹΧϓηϧԽͰ͖Δͷ͸େ͖͍   –  ಛʹνʔϜ։ൃͰҖྗΛൃشͦ͠͏   •  ίϯϙʔωϯτؒͰґଘؔ܎͕͋Δͱ͖ʹΠϯϙʔτ ͢Δॱংͱ͔Λؾʹ͠ͳͪ͘Ό͍͚ͳͯ͘ΞϨ   •  ίϯϙʔωϯτ͸ͦΕͧΕඇಉظͰಡΈࠐ·ΕΔͷͰɺ Կ΋͠ͳ͍ͱϦΫΤετ਺͕രൃతʹ૿͑Δ   –  Polymer/Vulcanizeͱ͍͏πʔϧͰ·ͱΊΒΕΔͬΆ͍͚Ͳ ·ͩࢼͯ͠ͳ͍ɻgrunt/gulpϓϥάΠϯ΋طʹ͋Δ  

Slide 15

Slide 15 text

·ͱΊ •  NewGame!ͷΧελϜλάΛ࡞ͬͨ   •  ະདྷͬΆ͍WebComponentsͱPolymerͷ࿩   •  WebComponents͸·ͩ·ͩ՝୊΋ଟͦ͏  

Slide 16

Slide 16 text

એ఻ •  ҕୗൢച   •  8/17(೔)  ੢ϗʔϧ͖-­‐36B   •  Socket.IO  1.0ͷهࣄॻ͖· ͨ͠   •  γΣϧεΫϦϓτͰWebΞ ϓϦ࡞ͬͨͱ͔Imutableͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ෼໘ന͍