When I started working at Blimp a year ago, we were about to go into the process of refactoring the code and core functionalities. It was the perfect opportunity to introduce new client-side technologies as well as things Gio and José learned from the first Blimp launch and things I learned from my previous startup experiences.

The frontend was composed of two javascript files and a couple of Sass files. While it served it’s purpose, it was hard to implement new features or even debug the code as it had no organization. There was a lot of room for improvement and at the same time, interesting libraries like Backbone were emerging. I had  experimented with Backbone and Commonjs Modules, so I was eager to use them in a large project such as Blimp.

After that first re-write our stack consisted of:

Months later, lots of changes and new features were introduced, so I decided to re-write the front-end again. We wanted to try other alternatives to the libraries and technologies we used before as well as try better implementations for problems we previously solved.

As of now our current front-end stack consists of:

Backbone

Backbone powers Blimp’s front end. Its lightweight, battle tested, and flexible. To us, the thing that sets Backbone apart from other MV* frameworks and libraries is that it’s not opinionated, so we are able to use different libraries and build new functionality on top of it without having to hack the core functionality.

Lodash

We use lodash instead of underscore because it’s faster and more complete.

Handlebars

Handlebars is our template engine of choice because of it’s simplicity and extensibility by way of helpers. We try to make our templates as logic-less as we can, but sometimes we need more functionality so we extend handlebars with Swag.

CommonJS Modules

In order to keep things clean and organized we separate our logic into modules. We use the commonjs module spec because for us it’s cleaner in comparison to the AMD spec and provides us with the same functionality.

Coffeescript

I truly love Javascript, but CoffeScript allows us to move faster while writing simple, readable, and maintainable code.

Stylus

Stylus is an awesome css pre-processor (the best imho). One of the things that we like about it is Nib (like Compass), a collection of mixins and functions that saves us a lot of time.

Brunch

Brunch is probably our most important tool in our front-end tool belt. It watches files for changes and automagically compiles everything and reloads the browser, allowing us to focus on coding instead of compiling. We used the Brunch with Hipsters app skeleton as a base for Blimp’s front-end structure.

Choosing your tech stack is never easy. For us, it was a process of trial and error. But in the end, we found the right tools to move fast and break less.

It’s  been great working with Blimp’s front-end and I am very proud of what we’ve been able to accomplish with these technologies. Go ahead sign up and tell us what you think. Feel free to ask further questions about our tech stack on the comments below!