Slide 1

Slide 1 text

The Bits Behind JS Bin Remy Sharp — @rem

Slide 2

Slide 2 text

Hi. Mine: nodemon 5minfork.com Full Frontal Me: @rem [email protected] remysharp.com

Slide 3

Slide 3 text

JS Bin?

Slide 4

Slide 4 text

• 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!

Slide 5

Slide 5 text

BACKSTORY

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Workshop in Iceland

Slide 8

Slide 8 text

Code Casting I wanted to create

Slide 9

Slide 9 text

jsconf.eu 2009

Slide 10

Slide 10 text

Förbind http://forbind.net

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Pre-decent require

Slide 13

Slide 13 text

Pre-package knowledge

Slide 14

Slide 14 text

Straight up nutty

Slide 15

Slide 15 text

2 hours later...

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

April 2012 & @aron

Slide 19

Slide 19 text

100% JavaScript

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

The Spike

Slide 23

Slide 23 text

Thank you Boris Grishenko

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

• 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Features

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

• 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

Slide 43

Slide 43 text

Production

Slide 44

Slide 44 text

scripts.json

Slide 45

Slide 45 text

index template

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

.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

Slide 48

Slide 48 text

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" [email protected] 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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text