Sam Stites

Building a Backbone Twitter Clone Part 1 Introduction

October 17, 2013

I’ve just finished working through JavascriptIsSexy’s Learn Backbone.js Completely which, in my opinion, is one of the best places to learn javascript on the interwebs. I’ve also been reading John Resig’s Secrets of the Javascript Ninja, and have completed half of Learn Javascript Properly. So I may not be a javascript pro, still I’m gunning to build my first Backbone App. This is going to be a twitter clone, because it seems fairly comprehensive. Feel free to follow me on twitter ([@samstites]twitter), by the way. you can also find the source of these files over at my github page: stites/BBTwitterAMD.

To start with, while I understand that this might seem like a bit of a shortcut, I’ve decided to use Yeoman as my workflow tool. I just rewrote the beginnings of a backbone application four times in the past three days, so I think I’m good on that front. Also Yeoman will be a good introduction to some new tools which will force some good habits (hopefully).

I want to go with as many best practices as possible, so I’ve decided to make this Twitter Clone with Asyncronous Module Dependency (AMD) which you learn about in the tail end of JavascriptIsSexy’s guide. Looking for the appropriate generator, mrichard’s marionette generator seems perfect. There are also a lot of new technologies, which I’m going to research and breifly introduce in this blogpost.

The Marionette Generator Stack



Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.


Express is a lightweight server-side framework inspired by Ruby’s Sinatra.

Socket IO

Socket.IO is a lightweight Websocket API which simplifies bi-directional communication over HTTP protocols. Thus using websockets we get realtime communication. This one will have to be put on the backburner for a while as the app starts off. Also, right now, I know a bit more about AJAX than websockets, so I think I might navigate away from this for a while. Also, I need some practice with AJAX calls and it seems that there could be cause to not to use Socket.IO -

Database & Object Data Manager


MongoDB is a NoSQL database management system written in C++, it’s great for prototyping as it’s document type is BSON. Also, on the note of databases, keep in mind that Mongo is strongly consistent, and has partition tolerance according to Brewer’s CAP Theorem. This means that all nodes see data at the same time, and that the system will continue to operate event if errors occur. I really want to get into some more database experimentation later on - I come from an SQL background so NoSQL facinates me.


Mongoose is a MongoDB object modeling tool, written in JavaScript, designed to work in an asynchronous environment. - StackOverflow



Our client-side framework, running a very structured and well defined MV* model.


A library/plugin for Backbone which allows you to scale out modular, event-driven applications.


The sweetest sugar for DOM Manipuation.


Making our application modular and optimized for speed! I read some counter arguments talking about how AMD is usless for javascript, however I respectfully disagree and want to give this a shot!


A templating library using mustache templates.

The Require-Handlebars Plugin

so that we can make our handlebar templates useful.


Cause I’m definitely not a designer! Maybe I’ll dabble, one day…


Useful cause I know a little sass from codeschool!

Workflow Tooling


A workflow which includes Yo (to scaffold out applications), Grunt (to build, preview and test projects), and Bower (for dependency management).


Okay I’m gunna be honest since this is my first backbone app, testing is a little over my head. Listing these out, however I am not sure I will use them all, but I’d like to give Jasmine a shot.


Swapped out Mocha for this in the generator. Automated testing framework for JavaScript. Want to try and use this.


Is for headless Webkit testing, works with other testing frameworks like Jasmine.


A BDD / TDD assertion library.


Standalone test spies, stubs and mocks.

Project is currently pending as I am now at HackReactor coding up a storm!