Forums/Community/Zendesk Apps

Tip: Getting Different Behavior During Development

James Rosen
posted this on September 16, 2012 08:41

In the course of developing your app, you may find that you want slightly different behavior while you're developing it than when it's ready for people to use. (Even if it will only ever be a private app, your "audience" is the agents on your account.) For example, you may want to increase the logging level or code against your own integration server instead of a production one. Here are some techniques you can use:

First, we define an inDevelopment variable in our closure.

(function() {
  var inDevelopment = true;

  return {
    requests: {
      getWidgets: {
        url: inDevelopment ? 'http://staging.example.com/widgets.json' :
                             'http://example.com/widgets.json'
      }
    },

    events: {
      'app.activated': 'loadWidgets'
    },

    loadWidgets: function() {
      if (inDevelopment) { console.log('loading widgets'); }
      this.ajax('getWidgets');
    },

    'getWidgets.done': function(widgetJSON) {
      if (inDevelopment) { console.log('rendering ' + widgetJSON.length + ' widgets'); }
      this.switchTo('widgets-list', widgetJSON);
      if (inDevelopment) { console.log('rendered widgets'); }
    }
  };
}());

Here, we use the inDevelopment flag in the definition of requests and during event callbacks. This works great, but I find it a little verbose. A constant will improve things a bit:

(function() {
  var inDevelopment = true,
      WIDGET_SERVER = inDevelopment ? 'http://staging.example.com' : 'http://example.com';

  return {
    requests: {
      getWidgets: {
        url: WIDGET_SERVER + '/widgets.json'
      }
    }, //...

We also have three places where we want to conditionally log. We can clean those up by defining a helper method:

(function() {
  var inDevelopment = true;

  function log(message) {
    if (inDevelopment) { console.log(message); }
  }

  return {
    // ...

    loadWidgets: function() {
      log('loading widgets');
      this.ajax('getWidgets');
    },

    renderWidgets: function(widgetJSON) {
      log('rendering ' + widgetJSON.length + ' widgets');
      this.switchTo('widgets-list', widgetJSON);
      log('rendered widgets');
    }
  };
}());

When you're ready to go live, simply set inDevelopment to false and your app will use the right server and be less verbose.