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.

Transcript

1. Ask ques(ons during the talk Heckling is encouraged
2. Unix Write programs... • that do one thing and do it well. • to work together. • to handle text streams
3. Tom Cartwright @tomcartwright lostmy.name wrightsnotes.com
4. Adventures in pocket-sized Javascript
5. <show the crappy website here>
6. <show the new website now>
7. Climbing the ladder inference
8. The 7 Kingdoms of Website requirements
9. The 7 Kingdoms of Website requirements
10. The 7 Kingdoms of Website requirements
11. The 7 Kingdoms of Website requirements
12. The 7 Kingdoms of Website requirements
13. The 7 Kingdoms of Website requirements
14. The 7 Kingdoms of Website requirements
15. North of the wall
17. Frameworks Framework Size Ember ~125 Kb React ~42 Kb Angular 2 ~110 Kb Jquery ~29 KB
18. This dev installed a babel plugin. You won't believe what happened next.
19. Solu%oneering 1. App architecture 2. Build chain 3. Stats and reckons
20. Dependencies: 1 Sub-dependencies: 5 Packet size: ~12Kb
21. One package to rule them all. One package to bind() them. virtual-dom
25. 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>) }
26. 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) ] )] ); }
28. function handleClick (ev) { ev.stopPropagation() ev.preventDefault() dispatchers.formEv(ev) }
29. 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) }
30. 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; }
31. 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" ] }
32. < play about with Chrome now > (keep it brief, a-en/on might be waning)
33. Final pon)fica)ons
34. Main advantage I have wri*en most of the code
35. Main disadvantage I have wri*en most of the code
36. Thank you kindly Other resources http://idlewords.com/talks/website_obesity.htm - for lolz https://github.com/HenrikJoreteg/feather-app - for example app @tomcartwrightuk - me on the internet if you have other questions