Category Archives: Programming

Polling VS Websockets – 1 Thing to consider

In a meeting today, A Co-Worker mentioned that Basecamp uses polling vs websockets because of stability. I mentioned that I might be converting one of my websockets to polling because it goes down sometimes.

Here is what I learned:

If your server fails for whatever reason the websocket will die and you will have to restart the connection. Now, this isn’t that bad as long as your program never crashes but if there is an intermittent db connection problem or some other unhandled error, the socket will fail and you will need a client side watcher to get it going again.

Polling works in this situation because what is down now may be up in 30 seconds and it will just keep polling even if the last one failed.

Here is a polling example:

 

self.poll = function() {
setTimeout(function() {
$.ajax({
url: "MY_URL",
success: function(data) {
self.alerts = data;
},
dataType: "json",
complete: function (){ self.poll(); }
});
}, 15000);
}

BTW: Using an angular service vs writing this code in multiple controllers made the conversion take less than 5 minutes.

Tagged , , ,

Use Bootstrap Modal as a view

Bootstrap modals are a nice way to alert users without using the basic JS alerting mechanism. I use them when I can and wanted to tie one to a backbone view and it was not hard at all:

Modal HTML:


<div class="modal fade" id="delete_modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Delete Sheet</h4>
 </div>
 <div class="modal-body">
 Are you sure that you want to permantely delete this sheet?<br>
 <b></b>Please note that we are trying to keep a history of sheets and only sheets with major mistakes should be deleted.</b><br>
 <br>
 Click Delete Sheet to confirm and your sheet will be deleted and a blank template will be placed into the edit area.
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-danger" id="delete_sheet">Delete Sheet</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

var DeleteSheetModalClass = Backbone.View.extend({
   el: "#delete_modal",
   initialize: function(){
     this.$el.modal("show");
   },
   events:{
      "click #delete_sheet": "deleteSheet"
   },
   deleteSheet: function(){
        var that = this;
		that.collection.remove(that.collection.where({sheet_id: that.model.get("sheet_id")})[0]);
		that.model.destroy({success:function(){
		that.collection.fetch();
		that.collection.trigger("reset");
		$("#sheet_type").change();
		}
		that.$el.modal("hide");
		});
   },
   render: function(){
    
  }

Essentially, you just need to set the el and events correctly and you are ready to go. I placed my modal(“show”) in init but it may be better off in render, that is up to you.

Tagged , ,

Backbone Resources

I am just getting into backbone and love it. I thought I would share what resources that I am using to get familiar with it.

 

The video that got me interested in it:

https://www.youtube.com/watch?v=4udR30JYenA
Lynda also had a getting started section on it:

http://www.lynda.com/Backbone-js-training-tutorials/1583-0.html

Here is a great set of videos talking about Marionette as well, I only watched the free ones:

http://www.backbonerails.com/series/engineering_single_page_apps

Try it out some free things here but also some paid:
https://www.codeschool.com/courses/anatomy-of-backbonejs

It is very freeing to let your data be your data and your view be your view.

Tagged , ,

Convert cookies into a Backbone collection

I had a need to look at my cookies in a Backbone project and decided that I needed them in a Collection and here is how I did it.
  //Create a base ModelClass
  var cookieModelClass = Backbone.Model.extend({

  });

//Create the collection
   var CookieCollectionClass = Backbone.Collection.extend({
	   model: cookieModelClass,
	   initialize: function(){
                   //Grab the cookies and go to work
 		   var ca = document.cookie.split(';');
			for(var i=0; i<ca.length; i++)
			{
			         var cookie = ca[i].trim().split("=");
					 this.add(new cookieModelClass({
					   name: cookie[0],
					   value: cookie[1]
					  }));

			}
	}
    });

//To retrive
var cookies = new CookieCollectionClass();
cookies.where({name: 'user_email'})[0].get("value")
Tagged , ,