Of late, my team and I have been building larger scale browser based apps.

With the (at its introduction) ground breaking ideas brought to the fore in Gmail & Google Maps' (and others) use of technologies priorly hidden in browsers like XMLHttpRequest, hidden frames, asynchronous loading of content into iframes coupled with John Resig's work on jQuery, and its almost immediate embracement and wide spread use off (over 55% of the 10,000 most visited websites), browser based apps have been taking off with improvements in browser technology and the general nature of interconnected-ness on systems.


Further advantages include a platform independent markup, presentation, and scripting (HTML, CSS, JS) technology have further made browser based apps an attraction. Going are those days where registry issues, dll hell, missing or outdated runtimes were some of the reasons for delays and late deployments. Browsers give my team and many developers around the world independence and conformity (lets not go there) of technologies to solve user problems (the real reason why we introduce these tools in the first place).

These apps my team and I are building are nontrivial apps (in our sense). They've gone by a few different names on the blogosphere most popularly Single Page Apps (SPA). These kinds of applications perform a wide range of functionality at fewer server accessible URIs. My team's library of choice are jQuery for DOM manipulation, Backbone for providing structure and persistence, and Coffeescript for improving javascripts language semantics.

Backbone brings structure in applications where LOCs go over a few hundreds or functionality is less than trivial where developers have tried to structure code with jQuery abusing the libraries' original idea of simplifying "simplify the client-side scripting of HTML","document traversing, event handling, animating, and Ajax interactions for rapid web development".

This topic's aim isn't to try to get you to look at backbone or similar frameworks, learn it and try to shoehorn it into implement God forbids, a form validation function in your app. It is for developers to look out to the landscape and embrace new development tools that promote existing and well researched, used, and documented philosophies (my speak) from older areas of development like desktop application development. 1 of such is MV* (Model View Variations coined I think by Addy Osmani).

I won't delve into the meaning or MV*. Please read the well written articles up on the web about client side MV*.

A scenario where backbone applies is an app that manages stuff (best word I could come up with) about stuff (think properties about objects).

For example in designing an app to manage hotel reservation and bookings + plus integrated electronic card based room access system control, we used backbone to develop a single page application which houses all functionality in 1 non-realoaded browser accessible url at ex. http://our-hotel-suc.ks/app

We describe entities managed by the application as Models. Eg. (in javascript. we use coffee script to eliminate some in our thinking, unnecessary semantics).

var GuestInformation = Backbone.Model.extend({
	defaults: {
		name: "",
		phoneNumber: "",
		
		// other properties
	}
});

var StayInformation = Backbone.Model.extend({
	defaults: {
		checkInDate: Helper.Now()

	}
});

var Room = Backbone.Model.extend({
		defaults: {
			number: "",
			clean: false,
			occupied: false
		}
		
		checkIn: function(guest) {
			this.set("occupied" = true;
			this.set("guest" = guest;
		}
})

After describing individual entities, we describe collections of entities ex.

var Rooms = Backbone.Collection.extend({
	model: Room,
	
	cleanRooms: function() {
		return this.filter(function(room) {
			return room.get("clean" == true;
		});
	}
	
	availableRooms: function() {
		return this.filter(function(room) {
			return room.get("occupied" == false;
		});
	}
	
	occupiedRooms: function() {
		return this.filter(function() {
			return room.get("occupied" == true
		});
	}
});

Lastly a number of views present the information stored in the models and collections
in host of ways. Ex. simple, detailed

var SimpleRoomView = Backbone.View.extend({
	initialize: function(room) {
		this.model = room
	}
	
	render: function() {
		var template = 
			"<div>" +
				"<span class='title'>" +
					this.model.get("number" + 
				"</span>" +
				"<img class="cue" src='" + (this.model.get("occupied" == true ? "/img/cues/occupied.png" : "/img/cues/unoccupied.png" + "' />"
			"</div>";
		
		this.$el.html(template);
		return this;		
	}
});

var DetailRoomView = Backbone.View.extend({
	initialize: function(room) {
		this.model = room
	}
	
	render: function() {
		var template = 
			"<div>" +
				"<span class='title'>" +
					this.model.get("number" + 
				"</span>" +
				"<img class="cue" src='" + (this.model.get("occupied" == true ? "/img/cues/occupied.png" : "/img/cues/unoccupied.png" + "' />"
				
				// some more detail, like the
				//  check-in date, 
				//  expected check-out date
				
			"</div>";
		
		this.$el.html(template);
		return this;		
	}
});

var SimpleRoomViewForHouseKeeping = Backbone.View.extend({
	initialize: function(room) {
		this.model = room
	}
	
	render: function() {
		var template = 
			"<div>" +
				"<span class='title'>" +
					this.model.get("number" + 
				"</span>" +
				"<img class="cue" src='" + (this.model.get("occupied" == true ? "/img/cues/occupied.png" : "/img/cues/unoccupied.png" + "' />"
				"<img class="cue" src='" + (this.model.get("clean" == true ? "/img/cues/clean.png" : "/img/cues/unclean.png" + "' />"
			"</div>";
		
		this.$el.html(template);
		return this;		
	}
});

var SimpleRoomListView = Backbone.View.extend({
	initialize: function(rooms) {
		this.collection = rooms;
		this.collection.on("add", this.add)
	}
	
	add: function(room) {
		this.el("el".append( new SimpleRoomView(room) )
	}
	
	render: function() {
		var template = 
			"<ul>" +
				"<li class='room'>" +
					this.collection.reduce(function(memo, room) { return memo + (new SimpleRoomView(room)).render().$el.html() }
				"</li>" +
			"</ul>" +	
			"<span> Rooms available: " +  this.rooms.availableRooms().length + " </span>"
			"<span> Rooms occupied: " +  this.rooms.occupiedRooms().length + " </span>";
		
		this.$el.html(template);
		return this;		
	}
});

These simple blocks of quickly changeable functionality allows(ed) to roll out fast easy and efficiently while keeping code bug count low.

To be continued, users are seeing a our super-duper secret Fail Whale.

To be frank I really find Backbone.js impressive especially the Model and the Autobinding, recently ave been looking at SPA but as a Dojo person, the dojo.mvc.StatefulModel and Output is also equivalent to Backbone, and much more features but this is not a BB vs Dojo, I think Backbone is a superb framework worth learning but an MV can also be implemented in other frameworks KnockoutJS, ExtJS, am glad to see another javascript developer talking about it on NL. Keep it up bro all the best.

Really av been programming serverside scripting technologies, php, jsp for 2 years without considering learning javascript. av used JQuery without even knowing javascript. I think with all thes advances in clientside technologies, a modern web developer is supposed to have javascript and some of this clientside techology in his toolbox.I heard that GWT offers all this clientside functionalities but never used it before, anyway i think i need to get deep into javascript and it frameworks for the next 2months before i turn an outdated developer

If you want my advise I'd say go with jQuery or Backbone ,Dojo is cool just the learning curve is damn too high, BackBone is a superb FW but I think its used with other frameworks and also look at AMD JavaScript might make life saner creating modules. I can write a tutorial if you want.

@Pc-guru
Wont be bad if you start a tutorial right here!

I wrote such on NL before AMD JavaScript, if we start from there you'll be able to write most new JS frameworks. And its quite simple lemme search for it.

thanks man

Av checked it, mehn i think are will brush up on javascript fundamentals and face these frameworksnext week. thanks for the tutorial

One of the advantages of developing with (or on, depending on how you use/see it) Backbone is the advanced use cases it allows us to support in our work while still being able to stay out of the way for the most part.

The library is a tiny. Its source can be understood by an intermediate JS programmer.

Its built to be easily extensible, _.extend(Backbone.Model.prototype, { newFunction: function() { // do something } })

Objects extend one of Model, View, Collection or Router (not controller, and yes, not shown in the previous code) which are defined roles for not just
Backbone supported applications but existing well used and understood development philosophies (MVC).

Change tracking which is just plain hard or almost impossible with plain javascript objects come for free with very little overhead. Tacking on uni- or bi- directional binding between model and view, client side model and server side representation, or any combination of the library's basic components is easy.

Underscore its only dependency is a real a utility belt. "It's the tie to go along with jQuery's tux, and Backbone.js's suspenders."

For example in this really cool feature, we implemented a kinda remote assistance system that synchronizes view elements over any number of connected authorized clients. Administrators, support staff can "type" into a remote user's screen of our application, and the changes made to the user screen from his/her browser window are streamed back to the assistance givers. Such a feature could have been built with jQuery but building a manageable, scalable and extensible solution would have simply sent one of us over the brink. This was achievable thanks to Backbone's change tracking and notifications.

Another place where 2 weeks was reduced down to 4 days was in implementing an unintrusive undo/redo system for an application we are working on. We had requirements to enable users view and undo operations on entities managed by our application. Thank you Backbone.

Our team loves dynamism everywhere. But make it better, give us controlled dynamism. Backbone gives us that control to implement really varying but share the same simple underlying library. Another technology that gives us such control and dynamism at superb levels is the C# language on the .NET platform but that is a topic for another topic (tautology ).

Until pc_guru formally decamps to the Backbone camp, he is currently sitting on the fence with his statement " I really find Backbone.js impressive ", lets share use cases where Backbone has been really helpful in helping you and your team deliver interesting solutions.

pc_guru mentioned knockoutJS. We treat HTML and JS as Zerksis and Leonidas. They can't get tangled in one another's affairs cos when they do, blood is shed. Applications get ugly and messy real quick with combos like HTML and JS using frameworks like Knockout, angular...

This reply isn't meant to fuel any flame wars, but to describe 1 framework fulfills our requirements well for us.

I intended pasting code on how we achieved the streaming model above, but later decided against. There seems to be little JS activity not enough to spend 30 minutes formatting code.

pls kadeerna, do you have any video tutorial on backbone.js or may be recommend a very good ebook for me cos its really geting intresting,am a type that believes in seperation of concerns just as backbone does the model and view stuffs clearly

I wouldn't consider this an exhaustive list but they should be enough to bootstrap your knowledge.

http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/

http://arturadib.com/hello-backbonejs/

http://oneofthesedaysblog.com/backbone-js/

http://liquidmedia.ca/blog/2011/01/backbone-js-part-1/

@kadeerna at all no flame wars every dev has his tools of choice and will always explain why he feels his is better, which is normal, i have looked at BackBone yes like i said Backbone is impressive but personally i feel Dojo caters to what i need and also i know Dojo already,the mvc is a sub-package in Dojo, because am the type that loves to create widgets without mixing html and js together like jQuery, The MVC in Dojo allows the Dijit(Widgeting Classes) system to reference a model which watches changes and Binds to the Widget Element it is binded to, and the best part i love is using the declarative pattern think of it like Flex MXML, i've seen people using Backbone and looking at it, it reminds me of Dojo.MVC except in Dojo we don't have a View because Dojo has a templating System which is flexible enough. also don't worry am not an Anti-Backbone person. but my only fear is if people here will really appreciate it because i know its a good structure for today's App but some just prefer to stick to jQuery which is odd to me, all the best with the BB tutorials and have a nice day.

wow!! thanks bro

reviving this thread.

i encountered backbone week before last and last week. Seems to be all the rage these days..

yeah a friend gave me a Backbone Video tutorial with Jquery mobile, i'm watching it the thing that led me to it is the aspect of it being lightweight as compared to Dojo with numerous builds.