Tuesday, January 17, 2012

Sencha Touch

This blog is outlining my experiences developing a mobile web based application developed with Sencha Touch and packaged with PhoneGap.

I have been developing a quick app for my iphone using Sencha Touch API (currenty 1.1). I have found it quite intuitive and the outcome is that I get a web based app that can be run nicely on Android as well as iOS devices. And I get to develop on my Win based machine in Java. Easy to test without emulator using normal browser too.

The idea is to write code via HTML5 that can be useful on touch based devices such as iPhone, iPad and Android based phones and tabs. Rather than learning languages and frameworks specific to these technologies it is possible to stick to common HTML5 skills that still support touch device like gestures and form factors.

In addition to deploying as a device capable web site, I intend to wrap it up with PhoneGap to deploy it as native binaries onto multiple devices (Android, iOS, BB) with access to native APIs.

The technology I am starting with

I'm not cool enough to develop on a Mac Book, so I'm building on Win 7 Laptop. For my editor, I've been trying out Sublime Text 2. Nice that it opens a folder tree and has smart syntax highlighting for JavaScript, and knows about all the HTML5 stuff (CSS, JSON, HTML, JavaScript) but a full fledged IDE would have things like code complete and syntax checking right in the IDE, so I am also old schooling it and using Eclipse IDE.

I have setup Eclipse IDE (Classic edition) augmented with Android SDK and the emulators, with the ADT Android Developer Tools eclipse plugin. However, for just Sencha touch the android stuff is not needed. But soon i will be looking at PhoneGap to create binaries ready to deploy to devices. And I'm also developing with Android SDK specifically.

I am also building the server side. I have been looking at node.js as a possibility. But I am also looking at Java based solutions as well (I'm showing my age I guess). For the Java based solutions, I am looking at deploying a J2EE (war) app and using Spring MVC as a core framework on the server side.

To deploy as a server based web app (and I also intend to have server side components as well), I have constructed a maven driven web app from a maven archetype (see this great blog article), and assuring it has the web app nature for using eclipse with help and great gratitude from this blog. This process of getting Eclipse to work with Maven for a web app based project was more complex and error prone than I'd like. My desire was to use the IDE to code and build, and see the results immediately synchronized on the integrated web server. But Eclipse doesn't build natively with Maven goals like NetBeans does, and the integrated web server plugins aren't as smart as they should on when to sync, deploy and run. I may rethink this choice as I go along.

To help provide the server stuff I need (remember Im on a Windows platform) I downloaded XAMPP and am running separate a Tomcat instance as an independent deployment target different from the Eclipse integrated tomcat server where I can test changes during development.

For the hosted solution and since I'm deploying to a java based app server (tomcat), I am deploying to jelastic I can test  it on my real devices. I also have Android emulators integrated into Eclipse and also iPadian emulating an ipad but I haven't tried that avenue yet.

The real devices I have to test on incude:
  • galaxy 10.1 tab
  • iphone 3GS (old I know)
For basic application architecture I have two MVC frameworks!

  • One MVC on the client (Sencha Touch with MVC pattern) and 
  • One MVC on the server (Spring MVC). 
Overkill? we shall see. We will get into the MVC model client and server side in another blog.

For Sencha Touch I am following the MVC pattern as described by the sencha forms tutorial.  Also, I have followed a great talk and tutorial from this German developer Nils Dehl where he creates a shopping list app.

For persistence, I have two choices: old school main stream relational (MySQL) or NoSQL approach with MondoDB. I will start out with mondo db and see what happens. The idea is that the data model is going to be json based and object oriented. Structured, hierarchic data can be managed using objects and indexes. For the app I want to build, it may work well. But it seems heretical (not necessarily a bad thing)..

Next article I will get into the app design...


David La Motta said...

Try GWT4Touch from Emitrom. www.emitrom.com/gwt4touch

You can do Java on the front end (GWT4Touch is a Java API for Sencha Touch) and Java on the back-end (and do GWT to talk between client and server). Best of all, you can integrate with PhoneGap, also in Java. Check out the video at DZone for a sneak preview http://java.dzone.com/videos/intro-gwt4touch-20

Version 2 for GWT4Touch is in dev preview right now, will soon be in beta...

Mark said...

Hey, I'm interested in how things go for you. I am trying to figure out what mobile client api will work best and what will work with Java/Spring MVC.

FYI - For your Java stuff, get STS (Springs Eclipse). Eclipse does have Maven support. Creating a Maven based Spring MVC app in STS is easy.

edlovesjava said...

Thanks @David for your heads up on GWT4Touch.

edlovesjava said...

Thanks for the recommend @Mark, I have STS and have been ROO ing a bit but for some reason I went with a vanilla Eclipse for sencha. Although Eclipse is fine supporting Maven (not as good as NetBeans though) Eclipse's web project nature is not out of the box compatible with maven's web archetype, so surefire builds the war correctly but running web project built from maven within eclipse required a bit of configuration, in particular the deployment assembly needed to add maven dependencies to deploy to WEB-INF/lib, but not too bad.