Category Archives: javascript

Using LocalStorage for client side caching

I have a need to get a list of all production devices and place them on a map. This data takes about 12 – 16 seconds to load. This means that if a user wants to view the map on page load they are out of luck for a few seconds. So what I do is allow the wait to happen once and then cache the data in local storage. This data is updated every 5 minutes. This allows the user to have at least the last fetch of data locally and will display a map right away.

Here is my angular service for doing this:

//Angular service that gets a list of devices
dashboardApp.service('deviceService', function() {
    //Set self to this so we dont lose scope
    var self = this;
    self.devices = new Array();
    //Go and get the latest device list - Takes a long time!!!!
    this.promise = $.getJSON('devicelist');
    //Since the last call takes a long time, I toss it in local storage and grab the cached version from there until the new list comes in.
    if (localStorage.getItem("devicelist")) {
        //I store json as text and need to parse it to make it a JS object
        self.devices = JSON.parse(localStorage.getItem("devicelist"));
    }
    //When the promise (ajax call) is comeplte then write the data to local storage for next time and set the var to the new list
    $.when(this.promise).then(function(data) {
        self.devices = data;
        localStorage.setItem("devicelist", JSON.stringify(data));
    });
    //Repeat every 5 minutes.
    setInterval(function() {
        $.getJSON('devicelist', function(data) {
            self.devices = data;
            localStorage.setItem("devicelist", JSON.stringify(data));
        });
    }, 300000)
});
Tagged , , ,

Angular try to avoid $scope.$apply() inprog error

Sometimes Angular does not pick up deep variable changes and needs a kick to do so. We have $scope.$apply() available to use but sometimes it is running already and you get an error when using it. Here is what I found from here and it works.

My Modified Version:

if(!$scope.$$phase) {
 $scope.$apply();
 }
Tagged ,

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 , , ,

Replace confirm with Bootstrap modal and Backbone view

We all hate ugly confirms but now you can use a nice backbone view and bootstrap modal to bug your users and act on btn click.

Modal:

<div class="modal fade" id="confirm-modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <span id="header-text"></span><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Are You Sure?</h4>
 </div>
 <div class="modal-body">
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-ok" data-dismiss="modal">OK</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Backbone View:

App.Views.ConfirmModalClass = Backbone.View.extend({
   el: "#confirm-modal",
   events: {
    "click .btn-ok": "runCallBack"
   },
   initialize: function(args){
	   this.$el.find(".modal-body").html("<p>"+args.body+"</p>");
	   this.cb = args.cb;
   },
   render: function(){
     this.$el.modal("show");
  },
  close: function(){
     this.$el.modal("close");
  },
  runCallBack: function(){
       this.cb();
  }
});

Usage (from inside another view):

var that = this;
	   var confirmModal = new App.Views.ConfirmModalClass({
	      cb: function(){
				//use that to run functions for this view
	      },
		  body: "BODY"
	   });
	    confirmModal.render();
Tagged , ,

Use Backbone (Underscore) templates with Mojolicious

Mojolicious uses it’s own embeded Perl parser and the embeded variables look something like this:

<%= $var %>

Underscore uses this as their embeded vars:

<%= var %>

So unless we use a different template engine, we cannot place these underscore templates inline with mojolicious templates because it will try to parse the Javascript template.

Here is how I get around it:

1. Create the template as a plain html file.
A.The file name of this template will be user.html:

<%= first_name %> <%= last_name %> 

2. Place the html file inside of your public directory in the mojo tree.

3. Create a javascript function that does grabs the template when you need it:

window.template = function(id){
    var theTemplate = ""

    $.ajax({
	url:"/templates/"+id+".html",
	success: function(data){
	  theTemplate = data;
    },
	async: false
	});

return _.template(theTemplate); 

};

5. Implement the template in a view

App.Views.User = Backbone.View.extend({
   el: "#main",
   render: function(){
    var theTemplate = template("user");	
    this.$el.html(theTemplate(this.model.toJSON()));
  }
});

6. run the render function when needed.

That is all it took and it works great.

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 , ,