Barry M. Wong

UI Engineer + Designer

Blog

Promises in Javascript

August 27, 2013 at 6:11 pm | code

Never make a promise that you cannot commit. Fortunately, Javascript is trustworthy!

Basically, a promise is an async callback inside another async callback and that’s it. (You could keep doing callback inside another callback inside another and so on, but this is really ugly.) The promise is that code will be returned to you at some time. At that time, you can decide what you want to do with it.

Here is an expert from my team project PreLinked. This is using Backbone’s ajax and jQuery’s promises:

...
  fetchUser: function(){

 // assign promise to here
 var deferred = $.Deferred();
 var that = this;
 this.model.fetch()
 .done(function(data){
 // console.log('user attributes: ', that.attributes);
 // console.log('fetchUser success with data: ', data);
 // when the promise is delivered at some time resolve it here
 deferred.resolve(data);
 })
 .fail(function(error){ // if all fails
 console.log('fetchUser failed');
 // reject the promise
 deferred.reject('fetchUser failed');
 });
 // return the promise whenever it is ready
 return deferred.promise();
 },
...

Node.js also has a library for dealing with promises called Q.

SlideParty + Socket.io

August 10, 2013 at 10:54 pm | code

I used Socket.io in my personal project SlideParty.

In case you haven’t heard, Socket.io is a framework for Node.js that deals HTML5 websockets and necessary fallbacks. It’s realtime communication between multiple browser clients.

In SlideParty, one user can give a slide presentation and simultaneously control all the slides across all the audience’s devices. In return, the audience members can hit the Like button that will increment and update on all the devices at the same time.

When the client browser loads, it sends an emit to the server:

SPTY.socket.emit('initLoad', {});

The server listens and for initLoad, does it’s thing, and emits data back to the client:

socket.on('initLoad', function(data) {
  data['slideData'] = Server.getSlideData();
  data['pollData'] = Server.data.pollData;
  data['isAdmin'] = Server.data.isAdmin;
  socket.emit('initSuccess', data);
});

The client listens for initSuccess and accepts the data then triggers the function appInit:

SPTY.socket.on('initSuccess', function(data) {
  SPTY.Events.trigger('appInit', data);
});

This one was easy

July 13, 2013 at 9:18 am | code

/**
 * We have a textbox where we get the info with the following code:
 *
 *   var tb = $(".textbox");
 *
 * We want to get the text of that box, but only 600 ms after the person stops
 * typing in that box. How would you implement it?
 */
 
var timer;
var tb = $(".textbox");

tb.on('keyup', function() {
  var that = this;
  clearTimeout(timer);
  timer = setTimeout(function() {
    $('.textboxContents').html(that.value);
  }, 600);
});