Cycle.jsを使ってみた話 / Introductory talk about Cycle.js

Cycle.jsの概要紹介

Transcript

1. Cycle.jsΛ࢖ͬͯΈͨ࿩ We Are JavaScripters! @12th 2017.10.2 tipo159
2. Cycle.jsͱ͸ • ϦΞΫςΟϒϓϩάϥϛϯά(Observable)ͰԾ૝DOMΛૢ࡞͢Δϑ ϨʔϜϫʔΫ • xstreamͱ͍͏ϦΞΫςΟϒϓϩάϥϛϯάͷϥΠϒϥϦΛ࢖༻ • xstream͸RxJSͷܰྔ൛ • RxJSͱmost.js(Monadic Streams)΋࢖༻Մೳ 2
3. Ծ૝DOM • SnabbdomΛ࢖༻ • HyperScript HelpersͰDOMੜ੒Λهड़ div('.myClass', {style: {color: 'red'}}, []) 3
4. Cycle.jsͷߟ͑ํ • Cycle.jsͷΞϓϦέʔγϣϯͰ͸ɼ७ਮؔ਺(෭࡞༻ͷͳ ͍)main()͕ɼ֎෦͔ΒͷೖྗΛSources͔ΒಡΈࠐΈɼ ֎෦΁ͷ࡞༻ΛSinks΁ॻ͖ग़͢ɽ 4 main() Sources Sinks DOM΍HTTP౳ͷ෭࡞༻ ७ਮؔ਺
5. σϞ 5
6. ιʔείʔυ 6
7. ϋϚͬͨϙΠϯτ • hyperscript helperͰͷselect()(<select>ͷ<option>)ͷ هड़ํ๏͕෼͔Βͳ͍ • html-to-hyperscript.paqmind.comͱ͍͏HTML͔Β hyperscriptʹม׵͢ΔαΠτͷग़ྗ௨Γʹهड़ͯ͠ ΋ಈ࡞͠ͳ͍ • ηϨΫλ༻ؔ਺(DOM.select())ͷݕࡧ݁Ռ͕ଟ͗͢ ͯɼ<select>ͷαϯϓϧΛݕࡧͰ͖ͳ͔ͬͨ 7
8. ࠂ஌ We Are PureScripters #3 • ॳ৺ऀ׻ܴ ؔ਺ܕJavaScript LTେձ • PureScript΍ElmͳͲͷؔ਺ܕϓϩάϥϛϯάݴޠ͚ͩͰͳ ͘ɺImmutable.js΍LodashͳͲͷJavaScript༻ؔ਺ܕϥΠϒ ϥϦͳͲ΋ؚΊͨLTେձ • ೔࣌: 2017.10.20 19:30ʙ21:30 • ձ৔: ະఆ • LTొஃऀ ืूத 8