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
160
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
240
Simpler Things
benfoxall
0
1.7k
Using Browsers to Visualise Data
benfoxall
0
79
Serving Data From Browsers
benfoxall
0
62
Building multi-device interfaces with the web
benfoxall
1
170
Other Decks in Technology
See All in Technology
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
1.5k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
1k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
390
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
550
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
430
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
450
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
120
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
220
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.8k
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Statistics for Hackers
jakevdp
799
220k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
4 Signs Your Business is Dying
shpigford
184
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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)