Choo: Fun Functional Framework

第33回 PORTもくもく会

1. Choo Fun Functional Framework Seiya Izumi (@sy_izumi)
2. About Me • Seiya Izumi • ෢ଂେֶ • JS, Ruby(Rails/Sinatra)
 ͱ͖Ͳ͖Golang • trainyardίϯτϦϏϡʔλʔ
3. Choo.jsͷ͸ͳ͠Λ͠·͢
4. Chooͱ͸ • Fun Functional ProgrammingΛίϯηϓτʹ ͨ͠JSϑϩϯτΤϯυϑϨʔϜϫʔΫ • ඞཁ࠷খݶͷAPIͱϞδϡϥʔɾΞϓϦέʔ γϣϯ • ϫϯιʔεͰ͙͢ಡΊΔʢ200ߦऑͷindex.jsʣ
5. ΤίγεςϜ • trainyard/choo-cli … chooͷεΩϟϑΥϧσΟϯάπʔϧ • choojs/bankai … ઃఆϑΝΠϧͳ͠ͰJSόϯυϦϯά΍LiveReloadͳͲΛͯ͠ ͘ΕΔϏϧυπʔϧ • choojs/hyperx … ES6ͷλάɾςϯϓϨʔτ͔ΒԾ૝DOMΛੜ੒͢ΔϞδϡʔ ϧ • choojs/nanobus … ϑΝΠϧαΠζΛ࡟ͬͨEventEmitterͷ୅ସ࣮૷ • choojs/nanotick … ґଘੑͷͳ͍ process.nextTick ͷ࣮૷ ͳͲͳͲ
6. ϑϩϯτΤϯυͱؔ਺ܕΞϓϩʔν • ϏϡʔʢVʣ͸εςʔτΛݩʹDOMΛฦ͢୯ ͳΔؔ਺Ͱ͋Δͱߟ͑Δ • V=f(M) • εςʔτϨεͰςελϒϧ
 ʢ֎෦ͷґଘੑΛߟྀ͠ͳ͍ʣ
7. Choo͸ݪଇFluxΞʔΩςΫνϟʹ৐Βͳ͍ • ChooͰ࢖ΘΕΔͷ͸nanobusͰ࣮૷͞Εͨγϯ ϓϧͳEventEmitter • Fluxύλʔϯͷૅʹͳ͍ͬͯΔObserverύλʔϯ ͔Β͸͡ΊΑ͏ͷਫ਼ਆ • ඞཁͳΒࣗ෼ͰFluxΞʔΩςΫνϟΛ࣮૷͢Δ͜ ͱ΋Ͱ͖Δ
8. ͔ͭͬͯΈΑ͏ʂ
9. 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΁Ϛ΢ϯτ
10. View.js const html = require('choo/html') module.exports = function (state, emit) { return html` <body> <h1>Hello, World!</h1> <p>If you are seeing this, then the generator works!</p> <h2>Demo</h2> <h3>${state.title}</h3> <input type="text" oninput=${update} value=${state.title} /> </body> ` function update (e) { emit('update', { value: e.target.value }) } } ES6ͷλάϦςϥϧͰDOMߏ଄Λهड़Ͱ͖Δ
11. Store.js module.exports = function (state, emitter) { state.title = '' emitter.on('update', function({ value }) { state.title = value emitter.emit('render') }) } store͸ΠϕϯτϦεφఆٛͱɺstateߏ଄ͷఆٛΛߦ͏
12. ͔ΜͨΜ
13. ͔ΜͨΜʂ • ͙͢࡞Εͯ؆୯ʂ • ͨͷ͍͠ʂ • trainyard/choo-cli Λ࢖͏ͱελʔλʔΩοτ Λશ෦४උͯ͘͠ΕΔͷͰΦεεϝ
14. ൃలฤ: SAMύλʔϯ The SAM Pattern: http://sam.js.org
15. Happy Coding!