Slide 1
Slide 1 text
Ask ques(ons during the talk
Heckling is encouraged
Slide 2
Slide 2 text
Unix
Write programs...
• that do one thing and do it well.
• to work together.
• to handle text streams
Slide 3
Slide 3 text
Tom Cartwright
@tomcartwright
lostmy.name
wrightsnotes.com
Slide 4
Slide 4 text
Adventures in pocket-sized
Javascript
Slide 5
Slide 5 text
Slide 6
Slide 6 text
Slide 7
Slide 7 text
Climbing the ladder
inference
Slide 8
Slide 8 text
The 7 Kingdoms of
Website
requirements
Slide 9
Slide 9 text
The 7 Kingdoms of
Website
requirements
Slide 10
Slide 10 text
The 7 Kingdoms of
Website
requirements
Slide 11
Slide 11 text
The 7 Kingdoms of
Website
requirements
Slide 12
Slide 12 text
The 7 Kingdoms of
Website
requirements
Slide 13
Slide 13 text
The 7 Kingdoms of
Website
requirements
Slide 14
Slide 14 text
The 7 Kingdoms of
Website
requirements
Slide 15
Slide 15 text
North of the wall
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Frameworks
Framework Size
Ember ~125 Kb
React ~42 Kb
Angular 2 ~110 Kb
Jquery ~29 KB
Slide 18
Slide 18 text
This dev installed a babel plugin. You
won't believe what happened next.
Slide 19
Slide 19 text
Solu%oneering
1. App architecture
2. Build chain
3. Stats and reckons
Slide 20
Slide 20 text
Dependencies: 1
Sub-dependencies: 5
Packet size: ~12Kb
Slide 21
Slide 21 text
One package to rule them all.
One package to bind() them.
virtual-dom
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
function deviceSelector (page, side, idx) {
return (
Device
)
}
{radioButton('iPhone', 'iphone', radioOpts)}
{radioButton('iPad', 'ipad', radioOpts)}
{radioButton('Browser', 'browser', radioOpts)}
Slide 26
Slide 26 text
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)
]
)]
);
}
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
function handleClick (ev) {
ev.stopPropagation()
ev.preventDefault()
dispatchers.formEv(ev)
}
Slide 29
Slide 29 text
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)
}
Slide 30
Slide 30 text
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;
}
Slide 31
Slide 31 text
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"
]
}
Slide 32
Slide 32 text
< play about with Chrome now >
(keep it brief, a-en/on might be waning)
Slide 33
Slide 33 text
Final pon)fica)ons
Slide 34
Slide 34 text
Main advantage
I have wri*en most of the code
Slide 35
Slide 35 text
Main disadvantage
I have wri*en most of the code
Slide 36
Slide 36 text
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