posted on
categories workflow

Remy Sharp on The Bits Behind JS Bin

Thanks to Laterooms, MancJS and Martin Rue for organising this and the wonderful Remy Sharp for giving us an incite into JS Bin.

Here are my somewhat haphazard live notes taken from the event…

If you spot anything that needs updating please raise an issue, or pull request.

## jsbin

Used to be php, now a full node JS project.

1st jsbin - 4 hours of hacking php.

CSS didn't need it's own tab it lives in the HTML section surely? Lol…

last Year:

  • 415,000 uniques/month
  • 69,000+ registered users
  • 48 timers and lots of iframes

XHR / JSON codedumper.com - still running on a server somewhere, somehow…

casted code from a John Resig tutorial using apache with 25 connections, but the 26th visitor wouldn't be able to join.

twisted / python / juggernaught / ruby - couldn't use.

jsconf.eu 2009

  • Ryan Dahl
  • was seeing node for the first time, but didn't realise this was the first time this was being seen
  • knew then and something clicked that node code help out

Förbind

from 4 hours, to 4 days created Förbind

"just a few hours work"… had a demo working of 2 browsers communicating with each other and back and forth

express socket.io mongodb ejs

postgres / mysql

2012

@aron on github helped a lot

jsbin is in npm and all available on github

The Spike (Boris Grishenko from Golden Eye reference) https://www.youtube.com/watch?v=mIq9jFdEfZo

  • As author is editing it saves to db, so if there's a refresh it will still be there, using XHR save on keypress to jsbin to update event to spike.js with server side events

codecasting is easy livereload is easy live injection into PhoneGap is easy

  • can use on a local device, but can't submit to store as this can have access to the phone data itself for example camera and contacts

why IE7 support? (ask me at the bar later :wink:)

can even record when user is when scrolling on a page

event source is polyfilled (see photo)

also work offline

npm install -g jsbin

instead of relying on internet access, this is useful for slides and code demos as it's local, so if you can't connect to jsbin you can simply point to your locally copy

can also run on a usb stick - dependency free, plus all the 'bins' that have been saved are also on the sub stick - Lynda from code club, can use with old crappy school computers - massive win! Congrats here.

todo - add update-notifier to let people now if there's a jsbin update

features - feature flags - using a/b split testing for example bin vs file,

ngrok - allows people to tunnel into machines

Remy Sharp workflow to work directly in Chrome dev tools - big fan of this.

npm, grunt, bash post hook script, nginx, upstart?, if server restarts @rem will get an email with the last 100 lines of the jsbin.log - nice

Mistakes

  • urls - should have usernames in them
  • db is mysql, but 4 hours down time for a db change with 1.8million lines? (maybe postgres is better here)
  • very few tests, there is infinite loop protection

It's hard

  • memory leaks
  • CPU loop
  • easy to get lazy, lol there's an npm for 'hello world'

gbd? ftw - CPU issue - russian v8 developer helped rem through google plus how to jump inside the process and set a breakpoint, turned out stylus had a bug where if you add a body {} without the code in it then it will call an infinite loop

sustainability: Pro

also using handlebars in jsbin

JSbin

Running on EC2 machines, one CPU on the machine, db running a 17gb (heavy cost for an open source side project)

Interesting point regarding not having all the dev envs the same, as to highlight issues that may arise from different OS's

Heroku instance (full frontal website runs on this and it's really easy) docko, having own mini herokus

gdb on process as being a JavaScript developer

emberjs - create a jsbin (whitelabel) branded to your own business

Laterooms

  • 3 days with Remy

moonstick.js want tests and quick tests, looking forward CI components - modular, self contained

TDD

  • karma, mocha

  • RequireJS - browserify made my head hurt (@rem agreed, he can't use his workflow because of working with compiled JS)

  • Cheerios? / instead of selenium?

  • nock?

  • handlebars - executing the test on the client and server

  • CasperCSS - taking screenshots of sections

  • vagrant / chef

  • project badger? - elastic stash / live monotoning, Chris at laterooms working on this

  • perf testing

  • grunt tasks

  • production readying

  • pipelines

  • live monotoring

  • promises?

Browse by category: