Short comparison of Ember.js and GWT

Its been a while since I posted anything here, really hard to make continuous post.  Well try again for the n-th time.

I have been using Google Web Toolkit (GWT) for while, as this is what we use at work.  Its pretty good and has lots of positives, however it also has it's own negatives.

Lets go with the positives first:

• For some people that knows Java they don't have to learn JS to develop full featured web apps
• Existing java tooling works on GWT projects.  Re-factoring, IDE support, etc.
• Performance of GWT is still the best among any JS frameworks
• Pretty good documentation and examples

Now for the negatives:

• Not learning JS, or some people will need to learn Java to develop JS code  
• GWT seems to be on its own eco system outside of the wider JS eco system
• Sometimes hard to control the html, making iterative changes with a web designer significantly more harder.  This is even using ui binder
• REST/JSON still seems to be 2nd citizen in GWT.  There is autobeans in GWT now, however still lots of plumbing to do or use 3rd party library.

Using GWT to architect a full blown web app is great.  Using established patterns such as Model View Presenter (MVP), a cousin of the more popular Model View Controller (MVC) pattern.  For the past few years there has been a lot of JS MVC frameworks coming out.  A quick look of the Todo MVC project will give us a lot of different implementation.  (The GWT implementation hasn't been pulled yet).  One of the JS MVC framework that's been gathering a bit of attention is Ember.js.

I gave ember.js a try over the weekend, its been initially a bit frustrating.  Like always when you learn something new, sometimes we just need to unlearn our own old learnings.  Ember documentation is a bit confusing, as its formatted on how to use the different features.  Some of the materials I have found to helpful in getting me running are:

http://emberjs.com/documentation/

http://www.adobe.com/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html

http://www.infoq.com/articles/emberjs

http://awardwinningfjords.com/2011/12/27/emberjs-collections.html

After things started to fall in place, ember.js seems to be pretty straight forward.  Compared to GWT there is really significantly less abstractions.  As ember.js really tries get you in the middle of JS, HTML and CSS.  I am still unsure on how unit testing will be done, haven't look at ember data yet, etc.  However with this initial code:

var App = Em.Application.create();

App.Plant = Ember.Object.extend({
 id: 0,
 name: null,
 description: null
});

App.PlantsView = Em.View.extend({
 plantsBinding: 'App.PlantsController.content'
});


App.PlantsController = Em.ArrayProxy.create({
 content: [],
 
 init: function() {
  var me = this;
  var url = 'http://localhost/plants';
  $.getJSON(url,function(data){
    me.set('content', []);
    $(data.plants).each(function(index,value){
        var plant = App.Plant.create({
            id: value.id,
            name: value.name,
            description: value.description,
        });
        me.pushObject(plant);
    });
  });
 }
 
});

As you can see its really straight forward to get data from a rest/json server.  I have an equivalent GWT project, but its too big to post here.  However the equivalent GWT functionality would include.  A model class, a ui binder file, an entry point class, a presenter interface, a view interface, a presenter implementation, a view implementation, http get code, etc.

This doesn't mean longer code is worse code, I am not in the camp of Java is bad too much typing.  I still use Java, although less these days as Scala has pretty much filled the space.  Even with the above code, one can see JS short coming of not having name spaces and no real support for OOP.  However one can see also there is a lot less boiler plate and more natural integration with JS and HTML.  When I mean less boiler, I do not mean about Java's verbose code but the bindings are straight forward.  More natural integration, I just used jQuery's getJSON function straight out of the box and handlebars' template inside html.  GWT has JSNI to call jQuery, but that is less natural and not used often.

Ember.js seems to be promising for organizing web apps.  Then coupled with other mature JS frameworks like jQuery, I think it may make GWT a bit heavy for some use cases.  I am still thinking of looking at Scala+GWT, aside from getting to use Scala to do JS I don't see a lot of difference from normal GWT.