Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adventures in Pocket Sized Javascript

Adventures in Pocket Sized Javascript

How do you write a framework-less front-end? How do you maintain functionality while keeping the packet size small. I cover these things and more.

tomcartwrightuk

November 30, 2016
Tweet

Other Decks in Programming

Transcript

  1. Unix Write programs... • that do one thing and do

    it well. • to work together. • to handle text streams
  2. function deviceSelector (page, side, idx) { return ( <div className="page-design-cont

    sub-section pure-u-1-1"> <span>Device</span> <div onchange={handleClick} data-click={{type: "update-form"}}> {radioButton('iPhone', 'iphone', radioOpts)} {radioButton('iPad', 'ipad', radioOpts)} {radioButton('Browser', 'browser', radioOpts)} </div> </div>) }
  3. function deviceSelector(page, side, idx) { return h( 'div', { className:

    'page-design-cont sub-section pure-u-1-1' }, [h( 'span', null, 'Device' ), h( 'div', { onchange: handleClick, 'data-click': { type: "update-form" } }, [ radioButton('iPhone', 'iphone', radioOpts), radioButton('iPad', 'ipad', radioOpts), radioButton('Browser', 'browser', radioOpts) ] )] ); }
  4. module.exports.formEv = function(ev) { var reducer = ev.target['data-click'] var formEl

    = document.getElementById('custom-wright') var action = actionWithData(reducer, formEl) events['render'](action) }
  5. module.exports.render = function (action) { var reducer = action.type ||

    'update-form' module.exports.renderPage(reducers[reducer](store, action)) } module.exports.renderPage = function (state) { // Write the state to the hidden input so that form reloads on back nav stateEl.value = JSON.stringify(state) store = state var newTree = formPartial(store); var patches = diff(tree, newTree); rootNode = patch(rootNode, patches); tree = newTree; }
  6. Build watchify app/assets/javascripts/src/*.js -t babelify -o app/assets/javascripts/bundle.js { "presets": ["es2015"],

    "plugins": [ ["transform-react-jsx", {"pragma": "h"}], ["transform-es2015-arrow-functions", { "spec": true }], "transform-object-assign", "transform-es2015-for-of", "transform-es2015-block-scoping", "h-children-fix" ] }