Slide 1

Slide 1 text

Choo Fun Functional Framework Seiya Izumi (@sy_izumi)

Slide 2

Slide 2 text

About Me • Seiya Izumi • ෢ଂେֶ • JS, Ruby(Rails/Sinatra)  ͱ͖Ͳ͖Golang • trainyardίϯτϦϏϡʔλʔ

Slide 3

Slide 3 text

Choo.jsͷ͸ͳ͠Λ͠·͢

Slide 4

Slide 4 text

Chooͱ͸ • Fun Functional ProgrammingΛίϯηϓτʹ ͨ͠JSϑϩϯτΤϯυϑϨʔϜϫʔΫ • ඞཁ࠷খݶͷAPIͱϞδϡϥʔɾΞϓϦέʔ γϣϯ • ϫϯιʔεͰ͙͢ಡΊΔʢ200ߦऑͷindex.jsʣ

Slide 5

Slide 5 text

ΤίγεςϜ • trainyard/choo-cli … chooͷεΩϟϑΥϧσΟϯάπʔϧ • choojs/bankai … ઃఆϑΝΠϧͳ͠ͰJSόϯυϦϯά΍LiveReloadͳͲΛͯ͠ ͘ΕΔϏϧυπʔϧ • choojs/hyperx … ES6ͷλάɾςϯϓϨʔτ͔ΒԾ૝DOMΛੜ੒͢ΔϞδϡʔ ϧ • choojs/nanobus … ϑΝΠϧαΠζΛ࡟ͬͨEventEmitterͷ୅ସ࣮૷ • choojs/nanotick … ґଘੑͷͳ͍ process.nextTick ͷ࣮૷ ͳͲͳͲ

Slide 6

Slide 6 text

ϑϩϯτΤϯυͱؔ਺ܕΞϓϩʔν • ϏϡʔʢVʣ͸εςʔτΛݩʹDOMΛฦ͢୯ ͳΔؔ਺Ͱ͋Δͱߟ͑Δ • V=f(M) • εςʔτϨεͰςελϒϧ  ʢ֎෦ͷґଘੑΛߟྀ͠ͳ͍ʣ

Slide 7

Slide 7 text

Choo͸ݪଇFluxΞʔΩςΫνϟʹ৐Βͳ͍ • ChooͰ࢖ΘΕΔͷ͸nanobusͰ࣮૷͞Εͨγϯ ϓϧͳEventEmitter • Fluxύλʔϯͷૅʹͳ͍ͬͯΔObserverύλʔϯ ͔Β͸͡ΊΑ͏ͷਫ਼ਆ • ඞཁͳΒࣗ෼ͰFluxΞʔΩςΫνϟΛ࣮૷͢Δ͜ ͱ΋Ͱ͖Δ

Slide 8

Slide 8 text

͔ͭͬͯΈΑ͏ʂ

Slide 9

Slide 9 text

App.js const choo = require('choo') const app = choo() app.use(require('./stores/home')) app.route('/', require('./pages.home')) if (module.parent) { module.exports = app } else { app.mount('body') } ϛυϧ΢ΣΞͱϧʔςΟϯάΛࢦఆͯ͠ɺDOM΁Ϛ΢ϯτ

Slide 10

Slide 10 text

View.js const html = require('choo/html') module.exports = function (state, emit) { return html`

Hello, World!

If you are seeing this, then the generator works!

Demo

${state.title}

` function update (e) { emit('update', { value: e.target.value }) } } ES6ͷλάϦςϥϧͰDOMߏ଄Λهड़Ͱ͖Δ

Slide 11

Slide 11 text

Store.js module.exports = function (state, emitter) { state.title = '' emitter.on('update', function({ value }) { state.title = value emitter.emit('render') }) } store͸ΠϕϯτϦεφఆٛͱɺstateߏ଄ͷఆٛΛߦ͏

Slide 12

Slide 12 text

͔ΜͨΜ

Slide 13

Slide 13 text

͔ΜͨΜʂ • ͙͢࡞Εͯ؆୯ʂ • ͨͷ͍͠ʂ • trainyard/choo-cli Λ࢖͏ͱελʔλʔΩοτ Λશ෦४උͯ͘͠ΕΔͷͰΦεεϝ