Backburner.js
A  light  weight  queueing  library.





Pavithra Kodmad
@PKodmad

Where is it from?



Microlib offshoot  of  Emberjs'  internal  run  loop.

What  Does  it  Do?


Gives  you  functionality  to

  • Combine/Reduce  unnecessary  invocations  to   an  efficient   subset
  • Defer  methods  to  be  executed  later  and  reliably.
  • Define  priority  while  scheduling   methods.
  • Some  more  sugar,  like  throttle,  setTimeout  and  debounce.

Why?


DOM manipulations are expensive!!



Why?



Asynchrony
Everything    good   and   bad   in  Front   End  Development

Why?


More performance!

ScheduleOnce
Throttle
Debounce

How?


Prioritised   queues!


var mybb = new backburner(['firstQ', 'secondQ', 'thirdQueue']);


mybb.run(function(){ mybb.scheduleOnce(queuename, target, method); mybb.schedule(queuename, target, method); });



app.TodoView = Backbone.View.extend({
  // ...

  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    // do our DOM manipulations here. they'll get run many times :(
  }

  // ...
});
          

// triggers the view to rerender
model.set('firstName', 'Erik');
// triggers the view to rerender
model.set('lastName',  'Bryn');
          




app.TodoView = Backbone.View.extend({
  // ...

  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    // put the rerender on the backburner!
    backburner.deferOnce('render', this, this.actuallyRender);
  },

  actuallyRender: function() {
    // do our DOM manipulations here. will only be called once.
  }

  // ...
});


// ... somewhere in our app code ...
backburner.run(function() {
  model.set('firstName', 'Erik'); //you can pass {silent:true} to supress change
  model.set('lastName',  'Bryn');
});

// our view has been rerendered only once, thanks to backburner!

Using  Backburner.


var queuenames = ['render', 'afterRender'];
var backburnerSim = new backburner.Backburner(queuenames);
var j = 0;
var person = {'name':'PK'};
var self = this;
document.getElementById('withBB').addEventListener('click', function(){

  backburnerSim.run(function(){

    document.getElementById('bodyc').innerHTML = '';
    self.setName('Ini');
    self.setName('Mini');
    self.setName('Maini');
    self.setName('Mo');
    document.getElementById(name).style.color = red;
    //self.changeNameColor('named');

  });	
});

function setName(name){
  person.name = name;
  backburnerSim.scheduleOnce('render', setDomName);
}
i=0;
function setDomName(){
  console.log(i);
  var div = document.createElement('div');
  div.id = 'named';
  div.innerHTML = person.name + i;
  div.style.border = '1px solid black';
  div.style.height = '100px';
  div.style.width = '100px';
  document.getElementById('bodyc').appendChild(div);
  i++;
}

function actualColorChange(name){
  elem = document.getElementById(name);
  elem.style["background-color"] = 'red';
}	

function changeNameColor(name){
  var elem;
  backburnerSim.scheduleOnce('afterRender', this, actualColorChange, name);	
}
backburnerSim.run(function(){

    document.getElementById('bodyc').innerHTML = '';
    self.setName('Ini');
    self.setName('Mini');
    self.setName('Maini');
    self.setName('Mo');
    //document.getElementById(name).style.color = red;
    self.changeNameColor('named');

  });	
http://jsbin.com/megaj/2/edit

Currently used by - 


Ember.js
For the run loop implementation.

Backburner.js

By Pavithra Kodmad

Backburner.js

  • 1,872
Loading comments...

More from Pavithra Kodmad