As I mentioned in my previous post on using DeftJS, I've also adopted CoffeeScript. I've pushed a CoffeeScript version of the Car Store sample application to GitHub if you'd like to look through the source code.

Since the application looks exactly the same, there's no point in uploading a second running version. The main difference is the fact that the code is written in CoffeeScript and then compiled to JavaScript.

Let's look at a quick example of the difference. Here was the original JavaScript for one of the files (MyViewController.js):

Ext.define( 'carStore.controller.MyViewController', {
    extend: 'Deft.mvc.ViewController',
    mixins: [ 'Deft.mixin.Injectable' ],
    inject: [ 'carChartJson', 'carDataJson' ],
 
    control: {
        carGrid: {
            selectionchange: 'onCarGridSelectionChange'
        },
        carDetail: true,
        carChartPanel: true
    },
 
    config: {
        carChartJson: null,
        carDataJson: null
    },
 
    onCarGridSelectionChange: function( selectionModel, selections ) {
        var carDataModel = selections[0];
        this.getCarDetail().update( carDataModel.getData() );
        this.getCarChartJson().loadData( carDataModel.getData().quality );
    }
 
});
		

And here is the CoffeeScript version of the same file:

Ext.define( 'carStore.controller.MyViewController',
  extend: 'Deft.mvc.ViewController'
  mixins: [ 'Deft.mixin.Injectable' ]
  inject: [ 'carChartJson', 'carDataJson' ]


  control:
    carGrid:
      selectionchange: 'onCarGridSelectionChange'

    carDetail: true
    carChartPanel: true


  config:
    carChartJson: null
    carDataJson: null


  onCarGridSelectionChange: ( selectionModel, selections ) ->
    carDataModel = selections[0]
    @getCarDetail().update( carDataModel.getData() )
    @getCarChartJson().loadData( carDataModel.getData().quality )

)
		

Just so you can see what the compiled CoffeeScript looks like, here's the JavaScript code generated from the above CoffeeScript file:

// Generated by CoffeeScript 1.3.1
(function() {

  Ext.define('carStore.controller.MyViewController', {
    extend: 'Deft.mvc.ViewController',
    mixins: ['Deft.mixin.Injectable'],
    inject: ['carChartJson', 'carDataJson'],
    control: {
      carGrid: {
        selectionchange: 'onCarGridSelectionChange'
      },
      carDetail: true,
      carChartPanel: true
    },
    config: {
      carChartJson: null,
      carDataJson: null
    },
    onCarGridSelectionChange: function(selectionModel, selections) {
      var carDataModel;
      carDataModel = selections[0];
      this.getCarDetail().update(carDataModel.getData());
      return this.getCarChartJson().loadData(carDataModel.getData().quality);
    }
  });

}).call(this);
		

As you can see, just being able to drop all the braces when creating objects makes the code a lot cleaner. But overall, the difference between the CS and JS version of this file isn't all that huge. To show a slightly more compelling difference, take a look at part of the AppConfig.coffee file:

constructor: ( cfg ) ->
  if cfg?.environment and carStore.appconfig.AppConfig?[ cfg.environment ]
    @setEnvironment( carStore.appconfig.AppConfig[ cfg.environment ] )
  else
    @setEnvironment( carStore.appconfig.AppConfig.PRODUCTION_ENV )


getEndpoint: ( endpointName ) ->
  environmentConfig = @[ @getEnvironment() ]
  endpoints = environmentConfig.endpoints
  defaults = environmentConfig.defaults

  if endpoints?[ endpointName ]
    result =
      url: endpoints[ endpointName ].url
      root: endpoints[ endpointName ]?.root ? defaults.dataRoot
  else
    result =
      url: defaults.urlPrefix + endpointName + defaults.urlSuffix
      root: defaults.dataRoot
		

Now, the generated JavaScript:

constructor: function(cfg) {
  var _ref;
  if ((cfg != null ? cfg.environment : void 0) && ((_ref = carStore.appconfig.AppConfig) != null ? _ref[cfg.environment] : void 0)) {
    return this.setEnvironment(carStore.appconfig.AppConfig[cfg.environment]);
  } else {
    return this.setEnvironment(carStore.appconfig.AppConfig.PRODUCTION_ENV);
  }
},
getEndpoint: function(endpointName) {
  var defaults, endpoints, environmentConfig, result, _ref, _ref1;
  environmentConfig = this[this.getEnvironment()];
  endpoints = environmentConfig.endpoints;
  defaults = environmentConfig.defaults;
  if (endpoints != null ? endpoints[endpointName] : void 0) {
    return result = {
      url: endpoints[endpointName].url,
      root: (_ref = (_ref1 = endpoints[endpointName]) != null ? _ref1.root : void 0) != null ? _ref : defaults.dataRoot
    };
  } else {
    return result = {
      url: defaults.urlPrefix + endpointName + defaults.urlSuffix,
      root: defaults.dataRoot
    };
  }
}
		

Notice all the great things that CoffeeScript does to hide the complexity around checking for existence and soaking up calls to properties that might not exist? This is really just scraping the surface of CoffeeScript's great features, but I hope it's enough to pique your interest.

Comments Comments (0) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 11689 Views

Related Blog Entries

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)