Testing Backbone.js and Enyo

As you may know we are iterating over several JavaScript frameworks to find the most appropriate for the mobile version of Openbravo 3.

As Salvador mentioned in the Open Discussions forum, Backbone.js + Twitter’s Bootstrap is a valid combination for a mobile application.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface …

On the other hand, Enyo

Enyo is an open source object-oriented JavaScript framework emphasizing encapsulation and modularity. Enyo contains everything you need to create a fast, scalable mobile or web application:

Built from the ground-up for mobile first – Enyo powers webOS, and was designed from the beginning to be fast and work great on mobile devices …

How easy is to create a plain product list using Backbone.js or Enyo? I wanted to give it a try. With a few lines of code I was able to make a REST call to Openbravo’s REST JSON Webservices and render a list of products.

Backbone.js

var Product = Backbone.Model.extend({});

  var ProductList = Backbone.Collection.extend({
    model: Product,
    url: '../../org.openbravo.service.datasource/Product',
    parse: function (response, error) {
      if (response && response.response) {
        return response.response.data;
      }
    }
  });

  var Products = new ProductList;

  var ProductsView = Backbone.View.extend({
    el: '#products',
    
    tag: 'ul',
    
    tpl: "<% _.each(models, function(product) { %> <li><%= product.attributes._identifier %></li> <% }); %>",
    
    initialize: function () {
      Products.bind('all', this.render, this);
      Products.fetch();
    },

    render: function (event, collection, error) {
      $(this.el).html('<ul>' + _.template(this.tpl, collection) + '</ul>');
      return this;
    }    
  });

  var App = new ProductsView;

Enyo

enyo.kind({
  name: 'ProductList',
  kind: enyo.Control,  
  components: [
      {name: 'btn', content: 'Load Products', ontap: 'loadProducts', tag:'button'},
      {name: 'list', tag: 'ul'}
  ],  
  loadProducts: function() {
      new enyo.Ajax({
        url: '../../org.openbravo.service.datasource/Product'
      })
      .go()
      .response(this, 'processResponse');
  },
  processResponse: function(inSender, inResponse) {
    var data = (inResponse && inResponse.response && inResponse.response.data), i;
    if(!data) {
      return;
    }
    for(i = 0; i < data.length; i++) {
      this.$.list.addChild(new enyo.Control({
        tag: 'li',
        content: data[i]._identifier
      }));
    }
    this.$.list.render();
  }
});
var products = new ProductList().renderInto(document.body);

I have packaged this code examples as a module. You can install it by cloning the repository and running smartbuild:

openbravo$ cd modules
openbravo/modules$ hg clone https://bitbucket.org/iperdomo/com.wordpress.katratxo.mobile.sample1
openbravo/modules$ cd ..
openbravo$ ant smartbuild -Dlocal=no

Note: openbravo is the root of your Openbravo sources

This examples doesn’t handle authentication, so in order to test them, first login into Openbravo and then visit the urls:

• /openbravo/web/com.wordpress.katratxo.mobile.sample1/backbone.html
• /openbravo/web/com.wordpress.katratxo.mobile.sample1/enyo.html

Conclusion

You can see that the Openbravo REST Web Services, provides a powerful layer for building alternative user interfaces for Openbravo.

We’ll keep iterating over the list of available JavaScript frameworks for Openbravo Mobile. If you have experience with Mobile Web Development, share your experience in the Open Discussions thread.

About these ads