Collaborative JS

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)