Choo: Fun Functional Framework

Choo Fun Functional Framework Seiya Izumi (@sy_izumi)

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

Choo.jsͷ͸ͳ͠Λ͠·͢

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

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

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

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

͔ͭͬͯΈΑ͏ʂ

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΁Ϛ΢ϯτ

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ߏ଄Λهड़Ͱ͖Δ

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

͔ΜͨΜ

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

ൃలฤ: SAMύλʔϯ The SAM Pattern: http://sam.js.org

Happy Coding!

Choo: Fun Functional Framework

Choo: Fun Functional Framework

Seiya IZUMI

More Decks by Seiya IZUMI

Other Decks in Technology

Featured

Transcript