katratxo on Software Development

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

Posts Tagged ‘enyo

Openbravo Mobile: Technical Overview and Roadmap

leave a comment »

Have you seen the power of Openbravo Mobile already? As you may have read in a previous post, we have been looking for the best HTML5 framework for Openbravo Mobile. After several months of researching, prototyping and testing we have decided that Enyo is our best option.

What’s Enyo?

Enyo is an object-oriented JavaScript application framework emphasizing modularity and encapsulation.

Back in January, HP announced the new version of Enyo, the framework powering webOS applications, but this time, a cross-browser solution optimized for mobile devices and released under the Apache license.

Since this initial announcement we have been tracking the evolution of the framework on every release. In February I posted a very simple example on how to consume Openbravo JSON REST WebServices, using Enyo (core).

In July the first non beta version was a released, by then we knew that Enyo was a real option for us.

Our experience with Enyo

We’ve been working with Enyo for several of months now and we are really pleased and enjoying the experience.

After investing time in prototypes and getting to know Enyo, our first real work was the code refactor using Enyo abstractions (Kind, Component, Control, Event) in Openbravo Web POS.

Openbravo Web POS – Powered by Enyo

The experience and result of this process gave us enough knowledge and confidence to decide and go for it:

Enyo is the right framework for Openbravo Mobile, as it provides the building blocks for developing a modular, extensible, thin, and fast mobile applications

In Openbravo Mobile we’ll use the full suit of Enyo, core, onyx and layout. Here you have some examples of the output of this great framework.

Grid View – Purchase Order Lines

Form View – Purchase Order (Processing)

The Data Model

We’ll also use Backbone.js Models and Collections for representing the entities declared in the Application Dictionary and Enyo will provide the UI widgets for manipulating those collections and models.

In the back-end we’ll use the same modular architecture in Openbravo 3.

Openbravo Mobile Architecture

Openbravo Mobile Architecture

The Roadmap

The main goal of Openbravo Mobile is to deliver the framework for developing mobile applications by the end of Q4-2012, with a few milestones in between:

  • Basic infrastructure (Login + Workspace): Be able to login using a mobile device, and open a window
  • Standard Windows: Support for windows declared in the Application Dictionary
  • Processes and Reports: Support for launching reports and processes from a mobile device
  • Support for Manual Windows: Support for View Implementations (aka Manual Windows)
  • Fine-tune Functional Flows: Revisit the flows and usability in a mobile device (Q1-2013)

I hope this gives you an overview on what has being going on in Openbravo Mobile, the Roadmap and milestones of this project. To know more about Enyo visit http://enyojs.com

Written by katratxo

October 8, 2012 at 11:37 am

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.

Written by katratxo

February 24, 2012 at 9:47 am