Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Collaborative JS
Search
Ben Foxall
August 10, 2016
Technology
1
170
Collaborative JS
How to build a collaborative browser-based editor (and why)
Ben Foxall
August 10, 2016
Tweet
Share
More Decks by Ben Foxall
See All by Ben Foxall
Web Sites & Fairy Lights
benfoxall
0
120
Making Simple Things
benfoxall
2
250
Simpler Things
benfoxall
0
1.8k
Using Browsers to Visualise Data
benfoxall
0
83
Serving Data From Browsers
benfoxall
0
66
Building multi-device interfaces with the web
benfoxall
1
170
Other Decks in Technology
See All in Technology
AI時代、“平均値”ではいられない
uhyo
8
2.6k
SOTA競争から人間を超える画像認識へ
shinya7y
0
600
20251027_findyさん_音声エージェントLT
almondo_event
2
480
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
1k
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Dify on AWS 環境構築手順
yosse95ai
0
150
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
430
AIの個性を理解し、指揮する
shoota
1
230
Building a cloud native business on open source
lizrice
0
190
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
390
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
sony
0
140
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Side Projects
sachag
455
43k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
HELLO! I'm @benjaminbenben!
I work at @Pusher
None
I co-organise @JSOxford
None
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
Live coding across all the things
Live coding across all the things
How to build a collaborative browser-based editor (and why)
䡿 Browser-based editors
None
side note - not just frontend
None
cojs.co
!
/
/ 䡿 The challenges
None
The challenges —Making a textarea feel nice —Showing content —Code
transpilation —External modules —Not breaking things
/ 䡿 The challenges Making a textarea feel nice
Web based code editors (maybe don't write one yourself) —Ace
Editor —Monaco —CodeMirror —~Atom~
None
Integration with our textarea CodeMirror.fromTextArea(source)
…tonnes more stuff
/ 䡿 The challenges Showing content <iframe id="target" href="/mypage"></iframe> (normal
answer: host it somewhere) !
Option 1.
"Upload" to ServiceWorker Web page → Service Worker → Network
hmmmmm —trendy —cool —persistant urls —overkill possibly —support is …
positive? —really cool
Option 2.
Data URIs
data:[<mediatype>][;base64],<data>
data:text/html,<h1>Hello! !
iframe.src = 'data:text/html;charset=utf-8,'+ '%3Cbody%3E%3Cscript%3E' + encodeURI(source.value) + '%3C/script%3E'
hmmm —lack of error handling —length limitations —random encoding issues
—restrictions…
None
Option 3.
Blobs new Blob(blobParts[, options])
b = new Blob(['…'], {type: 'text/html'})
b = new Blob(['…'], {type: 'text/html'}) url = URL.createObjectURL(b) //
"blob:https%3A/…/2084018…ab3a2cec02" // later URL.revokeObjectURL(url) !
var blob = generate(source.value) URL.revokeObjectURL(target.src) iframe.src = URL.createObjectURL(blob)
hmmm! —not stored on the stack —safe, and lots of
control —sounds cool
/ 䡿 The challenges Code transpilation
ES2015 const hey = (you) => console.log(`HELLO ${you}`) !
Tracuer Babel Bublé
All pretty cool, though personally ♥Bublé
Bublé —inspired by Babel —no shims / polyfills —compact transforms
only —less extensibility —fast —Nice one, Rich Harris
buble.transform(source.value).code
/ 䡿 The challenges External modules
// commonjs const utils = require('utils') utils.say('yeah!') // ES2015 modules
import {say} from 'utils' say('yeah!')
bundling !
Webpack Browserify Rollup
All pretty cool, though… ♥Rollup
Rollup —embracing ES2015 modules —minimal code-rewriting —tree shaking —d3, THREE.js
Rollup —embracing ES2015 modules —minimal code-rewriting —tree shaking —d3, THREE.js
—Seriously, Rich Harris you're the best
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 )
/ 䡿 The challenges Not breaking things
for(var i = 99; i > 0; i++) { console.log(`${i}
bottles of beer`) }
jsbin/loop-protect Super props, Remy Sharp loopProtect(`for(var i = 99; i
> 0; i++) { console.log(\`${i} bottles of beer\`) }`)
{;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`) } !
/
/ 䡿 Why
Closing the loop
Closing the loop change, save, tab, ftp, wait, tab, refresh
Uploading stuff to a server
Closing the loop change, save, tab, refresh Local development
Closing the loop change, save Live reload+
Closing the loop change In place editing
This is a good thing
/ 䡿 Why Multi Device Development Experiments
/1 Collaboration
None
/2 Broadcast
/2.1 (Broadcast) For development
/2.2 (Broadcast) For talk-workshops
/3 Social inspired development
/
/ demo? let's build a "musical instrument"
People & user experience are the difficult things (so let's
focus on them)
Thank you, I'm @benjaminbenben (also, right here)