Cross-Platform Mobile Development #3

Tweet

 

Cross-Platform Mobile Development #3

Integrating innovative JavaScript web components in traditional web applications.

Post 3 of an ongoing series

Written by Pablo Elustondo

In the previous post of this series (1 and 2) we presented a cross-platform architecture and methodology to develop user centric applications both for our browsers and mobile devices at a reasonable cost and speed. That was based on various principles including use of web services and modern and powerful JavaScript frameworks for the clients. Of course an application primarily or solely targeting iPad or iPhone  would be better developed using Apple development platform and methodology, as we are discussing in our other series. The advantages of our cross-platform strategy becomes clearer when the application that we need to develop has to run on all browsers as well as at least two mobile platforms such as Apple and Android.

In this post we will show this strategy works for the browser. In future posts we will show the same for the Iphone,  The framework and components that we describe here are a best-of-breed and we just finished to implement them in one of our current projects.

Our example is a simple page inside a bigger application made with .NET webforms technology aimed at managing projects. This particular page is intended to show a simplified Gantt chart that can be modified using drag and drop; as interactive as a desktop application. The next screen shot shows what the pages does. You can see a categorized and color coded set of tasks on a graphical timeline representation, you can drag and drop to change dates and you can also change the timeline resolution, zooming and collapse or expand a task. More functionality could be enabled but this page is meant to be simplistic on purpose.

This page was developed using the JavaScript framework Ext JS provided by Sencha and a specific component, called Ext Gantt, developed on top of that framework, provided by Bryntum. Both the framework and the component were developed following best practices in object oriented architecture, have very clear and well documented API and follow the model view controller paradigm.