I wrote about my impending Christmas of heads down grafting on a new, improved product for managing your online information. Well, Christmas has come and gone, leaving only an empty box of Lindt Lindor chocolates, 1/2 stone in excess body fat and a little 21 month old boy even more addicted to trains than he was before.

And true to my intentions, we've been busy.

I'll be giving you regular updates on that from now on, as and when there's something significant to show and tell. But in the meantime, I want to say that having delved into the world of real-time, complex web-app development from scratch, how impressed I am with the open source eco-system. 

The technologies, tools, libraries and frameworks at our disposal our numerous, with more being created all the time. This post is a brief overview of those which we have decided to implement as core, or test as necessary. Some you will certainly know, some you may not... all worth noting and adding to your list of tech-to-try.


Heroku - Although it is my first real experience building on Heroku, the choice was an easy one. Free setup, easy to scale, support for and easy installation of 3rd party apps like SendGrid, New Relic and others, the list goes on. I've had to become a little more familiar with GIT (I use SVN normally) but deploying to our repo at Beanstalkapp.com  has been pretty easy.

Server Side

MongoDB - Another first has been a foray into the world of noSQL databases. Not because it's trendy, hip or fashionable to do so, but because we felt this would be the best fit for database needs - primarily due to our perceived "need for speed". We took a lot of guidance from the team at Trello, who have been kind enough to detail lots of thoughts on their choice of stack.  I'm not qualified to debate on SQL over noSQL, but experience with query speeds using mySQL previously (on just about every other project I've built) urged me to try something new, and for this product, definitely seems to be a good fit.

Ruby on Rails - At MySpareBrain, the app was built on Google App Engine and thus, any server side scripting was written in Python. For this new product, we discounted Python due to new team skills and experience. We toyed with using Node.js which has been growing in popularity, but in the end opted to progress with Ruby on Rails providing the server side MVC we need, which also works very well with MongoDB.

Devise for RoR - Devise is a modular authentication solution for RoR. We've used Devise in conjunction with Facebook and Twitter social login API's for what we think is a nicely rounded model for creating and managing user accounts with different roles & capabilities. Check out the docs on Github

Client Side

Backbone.js - Backbone is, as the name suggests, at the er, *heart*, of our web application providing structure and order to the complex front-end javascript code required for something like this. Backbone's only dependency is Underscore.js, a utility-belt of functional programming support for Javascript.

Raphael.js - a nifty little javascript library for working with vector graphics on the web, we've been playing with Raphael predominantly due to it's SVG support (as opposed to other HTML5 canvas-based libraries. It's been quite useful for quickly rendering objects within the app's UI, but we have started to hit some limitations/complications for more complex uses - particularly when trying to append HTML to extend basic Raphael objects. We've got around it so far, in one case, by opting to paint in the additional interactive elements, but jury's out on it's longer term viability. Another test will be performance under stress of high volumes of objects rendering simultaneously   

D3js - D3 is a library for manipulating javascript documents using data. Some initial scoping tests suggest this may be a suitable alternative to Raphael, but we're still testing/reviewing the docs. From a pure product perspective, I'm interested in the physics engine and it's possible uses for the app, though this maybe a bit of a creative tangent.

Angular.js - This is a little misleading, as we're not currently using Angular. Consider it a bonus. But I have been playing with it a bit (I have the makings of a nifty little to-do list app). It's interesting because it enables you to write functional code into the html which makes it quick, relatively easy and clear to read when building web applications.

CoffeeScript - Hey, it's just javascript. But having done a few javascript courses and tutorials (check out my Codecademy badges) I can see how the reduction in braces and semi colons could really help speed up my learning, development and reduce stupid errors. More importantly, the devs can rattle out CoffeeScript like there's no tomorrow and therein lies the real benefit for us.

Animate.css - A sweet little CSS3 library for CSS animations that's very easy to use, cross-browser compatible. Use with class and subtlety. Overuse will kill you. 

Kinetic.js - Since we made the decision to use SVG for objects in the new product, Kinetic wasn't really going to be all that much help to us. But, I found a little time to use it to fake the drag and drop of objects that we create in the app using Raphael, in a little section of my attempt to take the online Pitch Deck to the next level. I'll be posting about that soon... Kinetic is good for lots of reasons, just a quick look at some of the demos / examples show just how complex graphical animations can be produced.

SASS - Less or SASS, Less or SASS? OK, SASS. Development team choice, I think related to personal preference of indentations and workflow with HAML, which SASS takes it's own inspiration from. See this to help you decide which to use. 

HAML - Our pursuit for beautiful code, something which we decided we wanted to get right from the off, led us to use HAML, for simplified template creation - particularly useful for RoR apps. Our development principles align with HAMLs stated objectives:

  • Markup should be beautiful
  • Markup should be DRY
  • Markup should be well indented
  • HTML structure should be clear