The Bits Behind JS Bin Remy Sharp — @rem

Hi. Mine: nodemon 5minfork.com Full Frontal Me: @rem remy@leftlogic.com remysharp.com

JS Bin?

• 415,000 uniques/month (2mil page views) • 30-35 queries per second • 69,000+ registered users • 9.6mil bins in total / 1.5mil "owned" bins • 48 timers & lots of iframes!

BACKSTORY

Originally a PHP hack • Inspired by XHR insolation issues • Proceeded by ugliness (codedumper.com) • Tipping point: John Resig's http://ejohn.org/apps/learn/ • Approximately 4 hours of dev to live

Workshop in Iceland

Code Casting I wanted to create

jsconf.eu 2009

Förbind http://forbind.net

No content

Pre-decent require

Pre-package knowledge

Straight up nutty

2 hours later...

No content

Förbind: how it works express socket.io mongodb ejs Tightly coupled collections listening for messages, then firing it on all open connections. Restart and it all breaks...

April 2012 & @aron

100% JavaScript

No content

Pros of Node for JS Bin • CodeCasting & live reload (across all platforms) • Easy local and dependency free installs • Some code reuse, lots of knowledge reuse.

The Spike

Thank you Boris Grishenko

Author JS Bin XHR save on keypress DB spike.js update event IE8 Chrome xbox iOS Firefox OS etc SSE push The Spike

• Client saves on keypress • Server on save triggers "spike update" event with bin passed to event • Spike searches for sessions interested in that bin, and sends the updated panel

All authored content is streamable •CodeCasting is easy •LiveReload is easy •Live injection into PhoneGap is easy

Good Side Effect • XSS recently fixed using postMessage & run.jsbin.com • IE7 doesn't support postMessage • But IE7 does LiveReload - so IE still works & securely

No content

No content

if (res.connection.writable === false) { // remove cached connection } Is the connection open?

Testing event source • Sadly no devtools (http://crbug.com/254973) • curl --header "Accept: text/event-stream"

No content

No WebSockets? •EventSource is polyfilled only with JS •IE6-9 •Android Browser

No content

Local installs • Always possible since day #1 on github • Now via `npm install -g jsbin` • Windows support is (now) pretty solid

Database upgrades via npm • Package.json "scripts": { "install": "build/install.js", "preupdate": "build/pre-update.js", "postupdate": "build/post-update.js" }, • Pre-update - saves current version • Post-update - uses semver & checks upgrade//*.sql

Dependency free •USB contains Node binaries for all platforms, code & dependancies •Saves to raw HTML files on USB stick •For teaching in strict tech environment

todo •Add update-notifier for prompted updates •Get visibility on local installs •Release to npm frequently

Features

No content

No content

• Paid/donated • Alternative domain (ie. jsbin.leftlogic.com) • Each dev runs under rem.jsbin.leftlogic.com • Now we can remotely view each other's work ngrok

Production

scripts.json

index template

Grunt build generates concat & uglified. Triggered by...

.git/hooks/post-merge remy@jsbin:/WWW/jsbin$ git pull remote: Counting objects: 19, done. remote: Compressing objects: 100% (7/7), done. remote: Total 11 (delta 8), reused 7 (delta 4) Unpacking objects: 100% (11/11), done. From git://github.com/remy/jsbin a7bf4f8..f99beff master -> origin/master * [new branch] feature/menu-update -> origin/feature/menu-up Merge made by the 'recursive' strategy. test/loop_detection_test.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) rebuild jsbin.js? [Y/n] y building public js Running "concat:dist" (concat) task File "public/js/prod/jsbin-3.4.8.js" created. Running "concat:runner" (concat) task File "public/js/prod/runner-3.4.8.js" created. Running "uglify:dist" (uglify) task Source Map "public/js/prod/jsbin.map.json" created. File "public/js/prod/jsbin-3.4.8.min.js" created. Running "uglify:runner" (uglify) task File "public/js/prod/runner-3.4.8.min.js" created. Done, without errors. restart jsbin? [Y/n] y restarting forever info: Forever restarted processes: data: uid command script forever pid logfile

Upstart console log stop on shutdown respawn respawn limit 20 5 post-start script # log that we restarted logger -is -t "$UPSTART_JOB" ">>>>>>>> jsbin restart" # email the last 100 lines from the log tail -100 /var/log/upstart/jsbin.log | mail -s "ALARM: jsbin restart" jsbin@leftlogic.com end script script set -e # make sure you only write out to /var/log/upstart/ exec sudo -u www-data PORT=8000 /usr/local/bin/node /WWW/jsbin/ 2>&1 end script https://github.com/jsbin-org/production/blob/master/apps.jsbin.com/etc/init/jsbin.conf

•URLs - probably not fixable •Database choice - fixable hard •Database adapter logic - fixable easy •Near total lack of tests - fix in progress Mistakes

It's hard •Memory leaks •CPU loops •Easy to get lazy

gdb ftw http://remysharp.com/2013/09/11/how-i-fixed-an-anonymous-infinite-loop-in-jsbin/

Sustainability: Pro • Dropbox support & live syncing • Bin playback & annotation • Sass, SCSS, smart screenshots... • Branded JS Bin's ala http://emberjs.jsbin.com

⾨