katratxo on Software Development

tail -f /var/log/brain | grep -i software

Archive for February 2012

Testing Backbone.js and Enyo

with 3 comments

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.

Advertisements

Written by katratxo

February 24, 2012 at 9:47 am

Choosing a HTML5 framework for Openbravo Mobile

with 6 comments

Openbravo 3 is a great product built on top of SmartClient library. SmartClient is a great framework that provides a set of UI components for building enterprise size, data driven applications, but it targets desktop browsers and is not well suited for mobile devices. You could make it work on a tablet device with some simplification of the UI you’re building, but when it comes to a smartphone, is way too heavy.

One of the key projects of Openbravo in 2012, is the support for mobile devices. In the last few weeks I’ve been doing some research on the available frameworks for mobile web development.

You can make a list of available HTML5 frameworks from developer community driven sites like Stack Overflow
or Hacker News:

We can complete the previous list with other libraries targeting mobile devices like:

Splitting the list in two groups

The list of available frameworks can be divided in two groups based on their approach to solve the problem:

  1. You need to generate HTML code and the library is just an abstraction on top of the DOM that helps you with the user interaction (gestures, tapping, etc)
  2. You rely and “talk” JavaScript then the framework takes care of generating the necessary HTML code for building the UI component, plus helping with the user interaction (capturing events, etc)

From our experience in building Openbravo 3, the latter approach is preferred. It’s easier to write something like isc.Window.create({width: 600, height: 400}); than building the tree structure of DIVs for building a window, apply CSS styles and then test in the different supported browsers.

I went through the list of available frameworks. For example, jQuery Mobile takes the first approach. You need to create HTML tags and annotate them with some attributes like data-role in a list.

On the other hand, with Sencha Touch you “talk JavaScript” and the library takes care of building the UI component. Unfortunately Sencha Touch is released under GPLv3 license and is not compatible with Openbravo Public License (OBPL), so Sencha Touch is not an option.

For the same licensing reason Kendo UI and DHTMLX Touch discarded too.

Other libraries

There are other interesting libraries like Bakbone.js or Ember.js.

Backbone.js “gives structure to web applications” and is usually used with jQuery or Zepto, and Ember.js (previously SproutCore 2.0) aims to eliminate “boilerplate and provides a standard application architecture”. A comparison between the two libraries can be found on Backbone and Ember

Other Approaches

There are other attempts to use Google Web Toolkit combined with PhoneGap to build mobile applications. You can check the Webcast made by O’Reilly Creating Mobile Apps with GWT and PhoneGap.

Conclusion

We haven’t decided yet which framework we’ll use, but we prefer to use a library that will help us eliminating the need of generating HTML code.

We are still iterating over the available choices, but probably we’ll make a decision in a few weeks.

If you have experience in mobile web development and want to give us a hint, we’ll love to hear from you. Drop us a line in our Open Discussion forum thread.

Written by katratxo

February 17, 2012 at 4:53 pm

Posted in Openbravo

Tagged with , , ,