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

Collaborative JS

D5f36cb3a2b97a68cc812d985726b5dd?s=47 Ben Foxall
August 10, 2016

Collaborative JS

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

D5f36cb3a2b97a68cc812d985726b5dd?s=128

Ben Foxall

August 10, 2016
Tweet

Transcript

  1. HELLO! I'm @benjaminbenben!

  2. I work at @Pusher

  3. None
  4. I co-organise @JSOxford

  5. None
  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

  11. None
  12. side note - not just frontend

  13. None
  14. cojs.co

  15. !

  16. /

  17. / 䡿 The challenges

  18. None
  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~
  22. None
  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…
  35. None
  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

  70. None
  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)