Collaborative JS

How to build a collaborative browser-based editor (and why)

Transcript

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