I decided to try both jQuery Mobile + PhoneGap and Sencha Touch 2 to create a simple hybrid application to see how they stack up, and record my initial impressions for building a simple app. I assume a complex app would magnify these issues, although experience with each platform would also improve the experience at that point. I am evaluating the install experience, and the development experience. I wanted to know how easy I could create a simple app that displays a list and has a simple form to add items into the list. I didn’t use any back-end technologies for this, the app is self-contained.
I used a Mac for this experiment, and at this point I am sure it would be a different experience on a PC.
jQuery Mobile + PhoneGap
Install
The install of this is very easy. Download the .zip files, extract them to wherever you would like. I used Eclipse for my IDE. Following the tutorials on both the PhoneGap and jQuery Mobile sites was simple enough to get up and running.
Development
Since I am experienced at both web development and Android development, getting going was pretty easy. I simply imported the necessary files into my project. The tutorials and docs were fairly easy to follow, and I had my demo app running before lunch. Debugging is a bummer if you use the app on the emulator or a device. You are better of using a browser to develop with and debug on, and then deploying to the emulator or device for testing. The code/debug cycle with the browser is very quick and efficient. But you still have to go back to the emulator/device a fair amount which is pretty slow. I didn’t use PhoneGap for anything but being a container, so if you were integrating with any native plugins the browser for debugging might be out.
Given it’s roots, jQuery Mobile will integrate well with server-side frameworks like ASP.NET or JSPs. jQuery Mobile doesn’t have a broad set of controls or features. For instance I wanted a date picker, but I needed to go and search for one because the platform I was targeting didn’t support the HTML5 date input control. I ran into a similar issue with data binding. You will need plugins and other libraries. jQuery plugins are abundant, and it’s not easy to separate the good ones from the bad.
For me, one of the downsides of jQuery Mobile is the UI. It looks like an iPhone app. If I’m building a hybrid solution, I don’t want my Android or WP7 apps to look like iOS apps. There is a terrific ThemeRoller tool, but in the end it still looks like what it is. I’m sure if you delved into the CSS you could get it to look more styled. If you have a high design component to your app, it could be hard to get there.
Sencha Touch 2
Sencha Touch was initially a mobile-web solution, but with version 2 Sencha has introduced the ability to package the app for iOS and Android.
Install
The install experience for this was frustrating to say the least. You need to download the SDK and a SDK tools package. This was really not clear on the download page, and I didn’t figure this out until trying to use the tutorial. The tutorials want these items to be installed in very specific places, so if you have a “standard” way of setting up projects this isn’t going to work for you. Also, you need to install Compass, and that isn’t documented anywhere except in the video, so if you are not inclined to watch a video (like me), you’ll have issues. I’m an experienced developer, it shouldn’t be this hard to get something up and working. As with any framework, there are often more than one way to accomplish tasks, and this is no different in ST2. In general the code used in the tutorial didn’t match up well with the task paradigm in the documentation, so that was frustrating as well.
Development
Since Sencha Touch 2 (ST2) is purely text file development, I used my favorite web editor WebStorm. Any editor would work fine, so this is a bonus for not being tied to Eclipse. You have to do more with the command-line, and I’m sure there are folks who want the IDE experience and folks who want the text editor experience. The command-line tool creates a project structure with all the dependencies set (like Rails, Maven, etc.), so getting going was quick once I got the tool working.
Getting to know the framework for ST2 is certainly harder if you are not a JavaScript guru. Most of how ST2 works is for you to write JavaScript that renders into HMTL at run time. You see this when starting up the app/site, there is an ellipsis on a blue background that displays while the rendering is going on. This makes the code/debug cycle slow. And if you make a mistake, this screen never clears. You have to have a JavaScript dev tool running at the time to know what went wrong.
The paradigm for ST2 is very different, heavy on the JavaScript. If you are a traditional web developer, this will be a tough shift. ST2 does not lend itself to integration with server-side frameworks because you would need to be emitting tons of JavaScript instead of HTML. For ST2 you need to embrace generating you content via JavaScript and writing Ajax web services to get the data from the server. I actually like this paradigm, but it’s going to be tough going for the .Net crowd to adopt this paradigm. This paradigm fits well with native mobile development, because you have to develop the services for data. So now you aren’t completely locked in to the hybrid platform if you want to make a change later. I’ll try to explore writing more HTML with ST2 and less JavaScript and see if it can work more like traditional web development.
I tried to use the command-line tool to build the hybrid Android app, but could never get it to work. I’m certain it is a permissions problem (remember I’m using a Mac), and from here it would probably be a better solution to wrap the ST2 app in PhoneGap. The tool also only took one image for the app icon. I’m not sure how that would work out for the other device sizes on the Android platform. Packaging ST2 this way felt like maybe it was a rushed feature.
ST2 has tons of controls, lots of great functionality like data binding built right in. It’s a steep learning curve though. ST has been criticized in the past for feeling slow, version 2 is supposed to improve upon that. Still, everything is rendering in the browser layer on a memory and processor-constrained device. I predict user’s experiences with speed will vary.
Conclusion
I think neither one of these are a clear winner. jQuery Mobile will force you to spend time to find other solutions to features you need, while ST2 will force you to spend time with its steep learning curve. I think this only further rebukes the myth that mobile web or hybrid is somehow cheaper than building a native app. PhoneGap is clearly a necessity for either of these for a hybrid solution, so you will still need separate projects and hardware platforms to get the work done for a cross-platform app. And as soon as you start using images in your designs, the effort for the creative team will quickly equal the need for creative work in a native development environment. You will need to spend significant time with CSS media queries and Modernizr to deal with the slight differences you will encounter between platforms and browsers. If I was forced to choose today between these two solutions, I would choose ST2 + PhoneGap, simply for the sheer amount of functionality built into ST2, despite the steep learning curve. I don’t believe either of these is THE solution for hybrid or mobile web development. I’m still looking….
Good Stuff!