yo backbone

There was a bug with yo backbone with require.js

The fix is: https://github.com/yeoman/yeoman/issues/1182

Fix : As soon as I go to start creating new app. I hit ctrl+c and stopped the process. Then I went to the package.json file which is created and updated it based on this stack overflow discussion asciidisco/grunt-requirejs#65

“grunt-requirejs”: “*”, to “grunt-contrib-requirejs”: “*”.


Day 54, Thorax 101

Only after using it for three weeks, I begun to understand the differences between Thorax and Backbone

– Thorax automatically fetch model/collection for a view when:

var view = new Thorax.View({
  model: myModel

var view = new Thorax.View({
  collection: myCollection

//Please don't try to fetch again

– “Note that while any view may bind a collection only a CollectionView will actually render a collection. A regular Thorax.View may declare a collection helper which in turn will generate and embed a CollectionView.” This means:

//in your admin.js file
var view = new Application.Views["web/admin"]({
  collection: admin
view.admin = admin; // this is absolutely necessary if view is a regular Thorax.View

//so that you can do this in your template, which is your admin.handlebars
{{#collection admin}}
  {{name}} //name is a property of the model inside the collection

Day 40, Thorax.js sub views

Continue working on the client project.

Made significant progress with my Thorax project.

One cool thing is to have a child-view telling the parent-view to close.

I have a modal view with a sub-modal view. The modal view will have all the basic functions of a modal. The sub-modal view is going to change all the time, showing different content. The concept worked well until I hit the point that I need to: click a button inside the sub-modal view, and ask the modal view to close.

With the help of Victor, I did a couple of things:

1. on click, the sub-modal view triggers an ‘close-modal’ event
2. the modal view listens to the ‘close-modal’ event from the sub-modal view and close itself. The key is using Backbone’s listenTo function.
3. Of course, life is never that easy. In reality, I extended my modal view from the Backbone.bootstrap-modal library, added the “listenTo” in the initialize(), and also called the super class (Backbone.bootstrap-modal)’s initialize() too.

Anyway, I was so happy that it actually worked!!! Yeah….

Oh, Marcus hosted a technical interview meetup in HackReactor tonight. It was very informative.

First, he interviewed Kyle and another guy. Then, we broken into smaller groups to work on four different technical problems. In the end, he was interviewed by another guy.

Nothing is really surprising, but compared to a case interview, there is not enough focus on thinking out out during a technical interview. It makes sense since there are way more interactions between consultants and clients than the interaction between different developers. The other difference is a case interview will likely have many right answers, while a technical interview has at most a couple right answers, with one or two of them being the best.

Marcus asked the question on how to design the architecture of Twitter. I guess this must be a fairly popular question for backend positions. It involves understanding of different pieces of the stack, basic database queries and advanced database operations during scaling. To serve a user’s read request for his own timeline, the user’s timeline was precomputed and stored in the database. You are essentially sacrificing space for speed. The more we talked about Twitter, the more I appreciated the smooth operation of Weibo. Kudos to engineers in Weibo, you guys did an awesome job in scaling it up.

The four technical problems are: hashTable, breadth first / depth first tree traversal, count the frequency of characters and sort them by frequency … (don’t remember the last one)…

I came up with a way to do breadth first tree traversal:

var node_list = [];
node_list.push(root_node); //root_node is the first node in the tree
var i = 0;
while (node_list[i] !== undefined){
  //each node stores all the children in an array called node.children
  for(var j=0; j<node_list[i].children.length; j++){
    node_list.push( node_list[i].children[j] );
  i += 1;

Day 32, more review sprint, hello Backbone

Continuing my review sprint. Spend the morning working on MongoDB and the afternoon working on BackBone.

It was surprising nobody really knew enough about MongoDB. Guess all the instructors never really used MongoDB in their work because MongoDB was so new.

Backbone is an interesting one. I followed the video of http://backbonetutorials.com/. Instead of writing the app he was talking about, I re-wrote my own ChatClient. I paused the video many times and was able to finish my re-write. A couple of takeaways:
– Can’t believe how many small magics there are. The video tutorial really helped.
– I am constantly paralyzed by the number of choices I have. Basically, I can achieve the same result with many ways and I don’t know which one is the best practice. So, in that regard, the tutorial also helped. However, I am not sure that the tutorial itself is following the best practice all the time

Personal projects:
We talked a little bit more about personal projects. The criteria are:
– heavy in employer relevant skills. Note: using cutting edge tech-tools is also employer relevant. The tool itself might not be relevant, but your appetite for cutting edge tech is employer relevant.
– hackernews worthy. This is an interesting idea. The teachers went on to classify that hackernews worthy is different from a general audience worthy. For example, a fairly nerdy idea might not appeal to the general public but might be interested to the tech community.
– focus & viable in two weeks. It is better to have a focused and complete product than a half-baked large product.
– show relevant skills / interests in certain field

In a one-to-many relationships, store the information in the many side. A good example is thinking about a celebrity and his/her many fans, only fans remember the celebrity, not the other way around.


Day 19, coffee script and backbone

Coffee script. Yeah… I miss you, Python… Overall feeling is Coffee is trying to be just like Python, but might have overdone it. Anyway, not a big deal.

Key features of Coffee:

– Same language features as Javascript, meaning no performance boosts(?)

– Indentation matters

– @ means this

– -> means function

– => means function with the correct this binding, useful for callbacks

– no ternary operators, but has “if … then … else …”

– return is not necessary

– scoping might be confusing sometimes

– arguments can have default values (c=4) or be optional ([c])

– check for existence is “if obj?”

– keywords include: is, not, or

– ‘ is different from “; “” allows variable interpolation such as “his username is #{user.name}”

– easy list comprehension, similar to Python?

Under the hood stuff for js:

– Event system

— where events are registered, including callbacks and setTimeouts

– Execution queue

– Run loop

while (true){

work on system process such as repainting ?

consider all events firing

run queued user code


– needs to read more on this topic

This sprint is a flexible sprint. You can choose to work on a Backbone project with Coffee script or review previous sprints. Jake and I paired again and we chose to work on the Blackjack Backbone Project with Coffee. It was fun and we had a blast. However, our game started with some random bugs due to our still superficial understanding of both Backbone and Coffee script. The most interesting bug is that we forgot to remove the old event listener after user resetting game. As a result, in the second game, user will lose/win twice the amount of his bet, third game will be three times the amount. It takes a while to figure out why there are multiple winning or losing event firing, but I laughed so hard that once I knew what was going on. It was like a snow ball gambling game. The system forces you to go big or go home baby.


Day 18, level up with Backbone.js

Toy problems:

– Solutions for recursiveContains for LinkedList is slightly surprising because contains() should be added to the node, not the list.

Backbone is a monster and we are leveling up in this monster fighting game. Afte spending half an hour with Victor the instructor, I begun to get it. In the mytunes App, click in DOM -> fn() in model, emits events -> events bubble through the collection of models -> App, the main model captures the event and dispatch it to some other model-view pairs. When Googling, someone mentioned about a center event dispatch system for Backbone. Should go check it out when I have time.

A model is the only thing that emits events about itself. Hence, we should only see:


NEVER this.***.trigger() NOR **.trigger()

Code isolation or modulation should be something we strive for.


– Put debugger inside callback()

– window.app = new app() // allow easy access in the console

– Should feel very comfortable calling non-existing functions, to finish the outline of the code

– Grep -r ‘query_string’ .

– Start from the view; only include the top level model / views in index.html

– For Models:

— trigger(‘enqueue’)

— do work to itself if necessary

— do NOT introduce global changes

– For Collections:

— Make sure the item you are trying to listen are actually part of the collection

– For Views

— listen to its models


Day 17, Backbone is a monster

I knew Backbone is hard, but I didn’t know it is this hard. It was even worse because the sprint was designed to push you into the unknown. It is sink or swim mode, and my pair Gary and I were drowning.

My pair and I were having such a hard time that we were unable to reason about basic things even after working on it for an entire day. Luckily, it was senior review night and Zak the senior provided generous help. After drilling him on all kinds of basic questions, I finally felt like I knew what is going on.

Another light bulb went off at midnight about the lack of controller inside Backbone. CJ came by my room at midnight and asked me what I was working on. I briefly explained my situations and he said “*** event is kind of the controller ***”. I was shocked. What? I thought this was a MVC framework and I was  expecting another component of the system called controller that was to be introduced by Marcus tomorrow. Coming from a Django background, I thought I knew something about MVC (or MTV in Django). Boy, I was wrong.


– Special keywords in Backbone:

— collection / Collection / events

– Basic Backbone flow

model –event–> view –jQuery–> DOM

model <–function_call– view <–user_events– DOM

– Every view needs an instance of a model

Rules implied in Backbone:

— One view talks to one model

— One view talks to its direct children (at least, maybe indirect children too)

— One view can NOT talk to its parents or siblings

— One register listeners to its model

— Model does NOT know anything about the views. Model emits events, and doesn’t know anything about listeners.

Models vs Views

– Models

— graph like

— objects representing some data

— structure & no sequence

— objects have types and keys

— objects are normally not repeated

– Views

— tree like

— output to users

— structure & sequence

— objects normally don’t have types, nor keys

— objects/data tend to be repeated

— has styles

Shared vs non-shared properties (???not sure)

// the following one is shared
initialize: function(){

/* the line below is implied */

/* this.attributes = {} */

this.attributes.key1 = 'value1';

// not recommended due to the lack of event emission

// key1:value1 is shared among all instances of the class


// the following one is NOT shared
this.set('key1', 'value1')

Some conventions in Backbone:

// Return this.$el in SomeView.render()


return this.$el;


// so we can use this code in index.html

//Creation of a view

var carView = new CarView({model:car});

console.log(carView.$el); //special property, always there, always a jQuery obj

//Render of a view



this.$el.html('<div></div>'); //this maybe implied ?


//Creation of a model

var Car = Backbone.Model.extend({

initialize: function(params){

this.set('key1', params.key1);


// this is run at construction time, as expected

// params is normally a {} with key:value pairs

// example: var car = new Car({key1:'car_value1'})


– Mixin can be used to add trigger / on events to an obj. For example, flying() or evented()

– Event registration: Obj.on(‘event_name’, callback/listener/handler)