Lessons learned while working with Backbone.js

I was developing a quite big Backbone.js application with my team of 2 more members. We were working on this project for about 7 months. We’ve learned an awful number of things in this journey as it was our biggest Javascript project for everyone in our team. Among many other things, OOP in Javascript always confuses me though I understand a few things better than earlier. I’ve tried to write a few things I’ve learned while working in this project; however, everything does not directly related to backbone.js

Source Code is the best documentation

I have relied on the backbonejs.org for several months for documentation purpose. However, I’ve found not everything was documented properly in the website. For example, from the website I knew fetch/sync accepts success and error as property of the options hash. What I didn’t know until I read the source code is that it also triggers sync and error events on success and failure respectively. Reading the official doc, I thought it’s possible only for save() method.

Simplified Object Copying

If I need to copy a variable/object attribute, I first need to check it whether it exists or not. Look at this example:

if(this.someAttribute){
  var localAttribute = this.someAttribute;
} else {
  var localAttribute = this.someAttribute = {} //or any default value;
}

However, while reading Backbone.js source code, I’ve learned we could write this in a very simplified one line.

var localAttribute = this.someAttribute || (this.someAttribute = {});

Changing in referenced object does not trigger events

When you change an attribute of a backbone model, change and change:attribute  events are triggered. For example,

object.set(‘name’, ‘The HungryCoder’) will trigger change and change:name events on object.  The following will not work.

var info = model.get('userInfo'); //returns a hash
info['id'] = 101;
model.set('userInfo', info);

The above change won’t trigger a change event. Here info variable is a reference to model’s userInfo and userInfo attribute in the object is already updated when you set info[‘id’] = 101;

In such cases, if you want to trigger the change events, you need to clone the attribute at first place when you are copying them.

var info = _.clone(model.get('userInfo'));
info['id'] = 101;
model.set('userInfo', info);

This will trigger change and change:info events correctly.

Learn fighting Zombies

If you’re working with Backbone.js for a while, chances are high that you’re already facing this kind of problems. Sometimes, you will notice that a particular action is triggering more than once though it is supposed to perform only once.

This happens because, even though, you remove elements from your DOM, they are still alive in your computer’s memory. Consider the example:

 

var Views.MyView = Backbone.View.extend({
  initialize: function() {
    this.model.on('change', this.render, this);
  },
  render: function() {
    //render template
    alert('hello');
  }
});

You’ve taken instance of this view and added to your DOM. When you wanted to remove these elements from DOM, you’ve called remove() method on this instance. Though the elements are removed from DOM, they are still in memory and can’t be cleaned up by Javascript’s garbage collectors as this object is still referenced from your model. It is due to the following line that you’ve written in our earlier view.

this.model.on('change', this.render, this);

The model has still a reference to this view and a referenced object is not cleaned. So your view is still going to alert you even if they are not visible in the DOM. This has been addressed in Backbone.js 0.9.9 where listenTo (and stopListening) is introduced. So you re-write the above line as following:

this.listenTo(this.model, 'change', this.render);

This will internally keep track of the bounded events and will reliably unbind any events when you call remove() on this view object.

to be updated…

Beginning Ruby From Novice to Professional

Beginning Ruby
I used to review books a bit detail. I include as much information as much possible and make senses. However, I’m going to make an exception this time. I will write a quick review on the book titled Beginning Ruby, From Novice to Professional authored by Peter Cooper published by Apress. The exception that I’ve just mentioned is that this review will be my shortest book review ever.

I’ve started by Ruby journey in a reverse way. First I’ve started working with Ruby on Rails directly (But I’ve read these tutorial to get basic idea). When I’ve found it’s fun, I started learning Ruby following this book.

The only thing I can tell about this book is “This is the one of the best book, of its kind, I’ve ever read”. So, If you want learn Ruby, you can consider this book without any second thoughts. That’s all about my review :).

Recent air travel experience

Recently I have experienced my life’s longest air journey! During this journey, I have used a few numbers of airlines! I am trying to share my experience about them!

I went to Goa, India on 23rd July, 2010! There was no direct flight from Dhaka-Goa! Even, if I want to use single airline, it will take at least 22hours to reach to Goa! On such a critical situation, Nazrul vy (Brother-in-law of arafat vy) from Pan Bright Tours & Travels, arranged connecting flights for me! At first I was very skeptical about the connecting flights because if any flight delays, I will miss the next flight! However, good news is that I did not miss any flight :D! Continue reading →

ঘুরে এলাম জাফলং….

Road to Jaflongগত বেশ কয়েকদিন ধরেই মনে হচ্ছিল কোথায় যাওয়া দরকার! কিন্তু যাওয়ার মত সঙ্গী না পাওয়ায় যেতে পারছিলাম না! আমি ছাড়া জগতের সবাই ব্যস্ত! অনেককে বললাম! সর্বশেষে বললাম আরাফাত ভাইকে! তিনি রাজি হলেন! সন্ধ্যায় সিন্ধান্ত নিলাম বরিশাল যাব! জাহাজে বসে নদী-চাঁদ উপভোগ করবো! পরদিন সন্ধ্যায় যাত্রা করার কথা! কিন্তু সকালে মনে হল আজকে তো বৃহঃস্পতিবার; বরিশালের জাহাজে কেবিন পাওয়া মুশকিল! তাই ভাবলাম তাহলে কক্সবাজার যাই! কেন আরাফাত ভাইকে বললাম দুপুরের পর চলে আসতে! এরপর দেখা যাবে কি করার! তিনি আসতে বেশ দেরিই করলেন! বিকালের দিকে আমরা বের হলাম! সিন্ধান্ত নিলাম যেহেতু কক্সবাজার ও বরিশালে আগেই আমরা গেছি এবং যেহেতু কক্সবাজারে প্রচুর গরম হবে তাই সিলেট যাওয়া যেতে পারে! দুজনেই অনেক আগে গেছি সেখানে! কিন্তু যন্ত্রণা শুরু হল যখন মালিবাগ এসে দেখি সোহাগে খালি সিট নাই! গ্রীন লাইনে ফোন করেও একই অবস্থা! বৃহঃস্পতিবার বলে কথা! তারপর আর কি করা! সায়দাবাদ এসে শ্যামলী বাসের টিকিট করলাম! ৬.৩০ এর বাস আসল ৭টায়! তাও ভাল উঠে বসলাম!Mountains in India
কিন্তু একি! একটু পর পর দেখি গাড়ির স্টার্ট বন্ধ হয়! ড্রাইভার দেখি হেলপার কে গালিগালাজ করছে! গাড়িতে সমস্যা! কি আর করা! চিটাগাং রোড এসে গাড়ি ঠিক করাতে দেয়া হল! প্রায় ৪৫ মিনিট শেষ! এরপর মোটামুটি ঝামেলা বিহীন ভাবেই যাত্রা শেষ হল! মাঝখানে একবার হেলপার ও কন্ডাকটরের সাথে কিছুক্ষণ তর্ক করলাম। আমার বক্তব্য ‘আপনাদের গাড়ির যে গ্রিলটি লাগিয়ে দিচ্ছেন এতে আপনারা যাত্রীর তুলনায় মূলতঃ নিজেদেরই সেভ করার চেষ্টা করছেন! ‘

রাত ১২.৩০ এর দিকে আমরা আম্বরখানায় নামলাম! আগেই সিন্ধান্ত হয়েছিল আমরা আরাফাত ভাইয়ের বোনের বাসায় থাকব! তাঁর দুলাভাই (পলাশ) এসে আমাদের নিয়ে গেলেন! আমরা খেয়ে দেয়ে ঘুমিয়ে পড়লাম! Continue reading →