Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
HELLO! I'm @benjaminbenben!
Slide 2
Slide 2 text
I work at @Pusher
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
I co-organise @JSOxford
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
I've not really said this stuff yet 1. Tell me if we've been here too long 2. I'd be happy (and sorry) if you tell me this is rubbish
Slide 7
Slide 7 text
Live coding across all the things
Slide 8
Slide 8 text
Live coding across all the things
Slide 9
Slide 9 text
How to build a collaborative browser-based editor (and why)
Slide 10
Slide 10 text
䡿 Browser-based editors
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
side note - not just frontend
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
cojs.co
Slide 15
Slide 15 text
!
Slide 16
Slide 16 text
/
Slide 17
Slide 17 text
/ 䡿 The challenges
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
The challenges —Making a textarea feel nice —Showing content —Code transpilation —External modules —Not breaking things
Slide 20
Slide 20 text
/ 䡿 The challenges Making a textarea feel nice
Slide 21
Slide 21 text
Web based code editors (maybe don't write one yourself) —Ace Editor —Monaco —CodeMirror —~Atom~
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Integration with our textarea CodeMirror.fromTextArea(source)
Slide 24
Slide 24 text
…tonnes more stuff
Slide 25
Slide 25 text
/ 䡿 The challenges Showing content (normal answer: host it somewhere) !
Slide 26
Slide 26 text
Option 1.
Slide 27
Slide 27 text
"Upload" to ServiceWorker Web page → Service Worker → Network
Slide 28
Slide 28 text
hmmmmm —trendy —cool —persistant urls —overkill possibly —support is … positive? —really cool
Slide 29
Slide 29 text
Option 2.
Slide 30
Slide 30 text
Data URIs
Slide 31
Slide 31 text
data:[][;base64],
Slide 32
Slide 32 text
data:text/html,
Hello! !
Slide 33
Slide 33 text
iframe.src = 'data:text/html;charset=utf-8,'+ '%3Cbody%3E%3Cscript%3E' + encodeURI(source.value) + '%3C/script%3E'
Slide 34
Slide 34 text
hmmm —lack of error handling —length limitations —random encoding issues —restrictions…
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Option 3.
Slide 37
Slide 37 text
Blobs new Blob(blobParts[, options])
Slide 38
Slide 38 text
b = new Blob(['…'], {type: 'text/html'})
Slide 39
Slide 39 text
b = new Blob(['…'], {type: 'text/html'}) url = URL.createObjectURL(b) // "blob:https%3A/…/2084018…ab3a2cec02" // later URL.revokeObjectURL(url) !
Slide 40
Slide 40 text
var blob = generate(source.value) URL.revokeObjectURL(target.src) iframe.src = URL.createObjectURL(blob)
Slide 41
Slide 41 text
hmmm! —not stored on the stack —safe, and lots of control —sounds cool
Slide 42
Slide 42 text
/ 䡿 The challenges Code transpilation
Slide 43
Slide 43 text
ES2015 const hey = (you) => console.log(`HELLO ${you}`) !
Slide 44
Slide 44 text
Tracuer Babel Bublé
Slide 45
Slide 45 text
All pretty cool, though personally ♥Bublé
Slide 46
Slide 46 text
Bublé —inspired by Babel —no shims / polyfills —compact transforms only —less extensibility —fast —Nice one, Rich Harris
Slide 47
Slide 47 text
buble.transform(source.value).code
Slide 48
Slide 48 text
/ 䡿 The challenges External modules
Slide 49
Slide 49 text
// commonjs const utils = require('utils') utils.say('yeah!') // ES2015 modules import {say} from 'utils' say('yeah!')
Slide 50
Slide 50 text
bundling !
Slide 51
Slide 51 text
Webpack Browserify Rollup
Slide 52
Slide 52 text
All pretty cool, though… ♥Rollup
Slide 53
Slide 53 text
Rollup —embracing ES2015 modules —minimal code-rewriting —tree shaking —d3, THREE.js
Slide 54
Slide 54 text
Rollup —embracing ES2015 modules —minimal code-rewriting —tree shaking —d3, THREE.js —Seriously, Rich Harris you're the best
Slide 55
Slide 55 text
rollup.rollup({ entry: '__main__', plugins:[ { resolveId: (i) => i, load: (id) => { if(id == '__main__') return source.value return fetch('/module/' + id + '.js') } } ] }).then(bundle => bundle.generate({ format: 'iife' }).code )
Slide 56
Slide 56 text
/ 䡿 The challenges Not breaking things
Slide 57
Slide 57 text
for(var i = 99; i > 0; i++) { console.log(`${i} bottles of beer`) }
Slide 58
Slide 58 text
jsbin/loop-protect Super props, Remy Sharp loopProtect(`for(var i = 99; i > 0; i++) { console.log(\`${i} bottles of beer\`) }`)
Slide 59
Slide 59 text
{;loopProtect.protect({ line: 1, reset: true }); for(var i = 99; i > 0; i++) { if (loopProtect.protect({ line: 1 })) break; console.log(`${i} bottles of beer`) } !
Slide 60
Slide 60 text
/
Slide 61
Slide 61 text
/ 䡿 Why
Slide 62
Slide 62 text
Closing the loop
Slide 63
Slide 63 text
Closing the loop change, save, tab, ftp, wait, tab, refresh Uploading stuff to a server
Slide 64
Slide 64 text
Closing the loop change, save, tab, refresh Local development
Slide 65
Slide 65 text
Closing the loop change, save Live reload+
Slide 66
Slide 66 text
Closing the loop change In place editing
Slide 67
Slide 67 text
This is a good thing
Slide 68
Slide 68 text
/ 䡿 Why Multi Device Development Experiments
Slide 69
Slide 69 text
/1 Collaboration
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
/2 Broadcast
Slide 72
Slide 72 text
/2.1 (Broadcast) For development
Slide 73
Slide 73 text
/2.2 (Broadcast) For talk-workshops
Slide 74
Slide 74 text
/3 Social inspired development
Slide 75
Slide 75 text
/
Slide 76
Slide 76 text
/ demo? let's build a "musical instrument"
Slide 77
Slide 77 text
People & user experience are the difficult things (so let's focus on them)
Slide 78
Slide 78 text
Thank you, I'm @benjaminbenben (also, right here)