My Affair With Node

I feel like I have done something dreadful...

This Friday my team and I decided to take a couple of hours to rapidly prototype something, anything, in what we call 'Fun time Friday'. In the past this has lead to us quickly coming up with an idea (usually people will have them in the week) and then we each take responsibility for a certain bit, and start either designing or implementing that part.

But this time I did something different...

What tends to happen is we break into the rapid prototype cabinet that contains Rails, Bootstrap, Devise and more Tumblr gifs of Adventure Time characters than I care to imagine exist... but I decided to give the team the challenge of using Node. The reason was actually due to the challenge, we wanted to try and recreate the idea of Pictionary online, with a really simple creation and joining mechanism, and a Javascript powered canvas drawing wotsit. What I hadn't planned for was the simplicity, joy and dare I say it 'love' that rapidly came over me for Node and extensive world of NPM extensions.

It's simply wonderful...

As if that wasn't bad enough I decided I had had enough of Bootstrap as well, and we decided to give PureCSS a shot, which is also fantastic and wonderfully simple (although we pretty much nicked the whole boilerplate from their docs site). We still have lots to do during another session, but here is the basic vibe

Home page, showing how lovely PureCSS looks

After doing a tiny amount of Googling I landed on PassportJS (there are surely countless other, even better, sign in extensions) which provided Twitter sign in, and fit in pretty quickly to our little Express app.

PassportJS takes care of all the Twitter tokens and sessions.

The part that fell to me was to provide the app structure, fleshing out the Express routes, dividing up template logics, and setting up the Socket.io part. I have to say playing with Socket makes me feel like an excited child, the possibilities are just so tantalising and easily accessible. Whilst setting up the login path, and also the 'Rooms' structure that we set up to use Socket.io with, it quickly dawned that we would need some sort of database. I had already played around with MongoDB through playing with MeteorJS (something else I love) but found it easiest to use Mongoose connecting into a MongoLab hosted DB (which are free!). We then had the ability to set up 'Rooms' that users could create, and then invite their buddies into.

Super simple room creation.

To speed the whole process up, and to up the fun count, we decided on a random word generator called RandWord which generates ten random words for the user to pick from, which then becomes that rooms key. The idea being that once the room is created the user can then share that key, wait until the room fills and then start.

Waiting for the room to fill.

The 'lobby' function is just using a simple bit of Socket.io to track sockets by the room name, and pings a new list to the connected sockets every time a new user joins the room (still need to work out exiting, hear that using the heartbeat is the way forward!). We then need to hook it up so the owner of the room can then trigger the game to start and go into 'Draw' mode or whatever. We have our drawing canvas pretty much there (and it broadcasts the image to all in the room via Socket.io).

The drawing canvas.

The data for the drawings is still a bit hooey, but we did some work making it only send the new bits of the drawing, which is triggered from mouse/touch down to mouse/touch up. This would then be pushed into a DB array, so any newcomers could get the full picture... so to speak.

Raw data going through the sockets.

Obviously there is still quite a way to go, but it is pretty impressive to imagine that we achieved this in little under 2 hours (though I have made some cheeky commits over the weekend!). Feel free to have a butchers, work permitting we will do a couple more hours at the end of the week and see if we can get it mostly done.

Sorry Rails, it's not you it's me.

Royles

comments powered by Disqus