The road to mobile web application development

It seems every web company get to that problem one way or the other. Should you leverage your web expertise and try to simply create a mobile web app or go completely native? Since I am currently coding a web app for Cakemail I tought it would be a good idea to do a round up of what I learned so far, mind you i’m not going to talk about native, this is only about web tech for android and ios.

The position fixed

Some very long time ago I launched abettermobileweb.com. The idea was to do awareness about the fact that we were critically missing position fixed from our mobile stack, this was early 2010. Unfortunately I failed to impress important figures in the community and the site never took off and is now offline (the only trace you can find of it is this ajaxian article).

A lot of people tried to emulate this feature using complex tricks involving rewriting the scrollbar behavior. My advice here is too not embark in this madness and stay away from those tricks. Even if you get native performance on iphone (which I doubt), you will never get it on the hundreds of android phones.

It will always feel like something is wrong while scrolling since emulating it will never be 100% perfect.

Fortunately webkit implemented the feature not so long ago, and position fixed is now available on ios5 and android 2.3. That mean we can now do what us front-end developers do best, progressive enhancement. Put the feature for the best phones and the other will just default to unsticky toolbars.

Small note, I had performance problems with content heavy page (tablet app) and a position fixed toolbar on android 4.0.1. Be aware that lower end devices even if they support it, could behave badly giving a choppy experience.

Resources:
iOS 5: Fixed Positioning and Content Scrolling
ISCROLL 4

The frameworkssS

There is so much web mobile frameworks that it makes my head spins. Here my general impression, don’t use them.

You don’t need another framework to code for mobile, it’s not really more difficult to code an app for android and ios. My stack goes like this, backbone.js, jQuery & couple of plugins, but let’s do a small run through anyway.

jQuery mobile

This guy will be a bitch to integrate in your flow (specially with backbone), and really it does not seems to have been coded with the js “mvc” stack in mind, but yes it can work with some patches. However for me, it just does too much in a very weird way. For example, it rewrite all your data attr to css classes and just that should be a no go if you care about the performance of your app.

One thing jQuery mobile does very well is css, embedding that part for your app could be a quick win. Also this framework is really good when you want to do a simple mobile web site compatible with a freaking whole range of devices (but don’t expect to write custom code and keep that compatibility).

Sencha Touch

This is a very thorough mobile app framework that handle everything you can think of, even app package for the appstore. Personally I did not want to learn a complete framework just to do mobile and be stuck with it, but the demos are impressing and it is worth a look.

iUI, jQtouch, zepto, the M project, Jo and all the others.

There is a lot of frameworks, i’m sure most of them are good and depending on your needs it could be a good idea to incorporate one of them. For me, mobile add only add 2 things to my normal flow, special animations betweens views & more responsive designs that I usually do. These can be solve without incorporating a new framework into my flow.

Resources:
Mobile Frameworks Comparison Chart
Our Experience With jQuery Mobile and Sencha Touch
Sencha Touch 2 vs. jQuery Mobile + PhoneGap

(3d) Animations

Animations between application states can be really hard to master on mobile. jQtouch, if my memory is good, pioneered in this creating a list of CSS3 animations to use between your pages 3 years ago. Unfortunately, these animations have taken some times (understatement) to be implemented in android. They have been integrated in android 4.0 which means there is a lot of device where it’s not implemented.

2 solutions, one you check the device and use progressive enhancement and to get the best experience for some device, or you just use javascript animation like opacity.

However, even opacity animations can take it’s tole on some of the lower end android devices, some of the jQmobile animations also make all my text jerky while animating on my sony xperia. With android you need to be careful how much people you want to support, that could even end with taking the decision to remove all animations on these devices.

Resources:
CSS3 and Backbone.js for killer mobile apps tutorial
lQuery Transit – CSS3 animations for jQuery
Fix: CSS Animation slow or choppy in mobile browsers

Native Packaging

It is possible to package natively your app but that will probably take some readjustment. The biggest barrier for me is that I have a tendency to use the back-end for some of the “trivial” stuff, like css and js merging. I definitely had to work on that.

As far as frameworks goes, the one I can recommend is PhoneGap. It’s open source, it got a very big community and a good documentation. It should really cover all your appstore packaging needs.

Resources:
PhoneGap From Scratch: Introduction
Introduction to Cross-Platform Development With Appcelerator
Sencha Touch 2: Native Packaging

So the whole native vs web argument..

You can find a bunch of article on this, and the answer is not in this conclusion. The only person that can be sure about the road to take is you, and while there is a lot of arguments either way, one thing I can say is if your looking to create a web app with the same quality of a native app you will probably miss the mark.

The Facebook app was a web app enclosed in a native packaging, but they had so much complains that they reverted to completely native. Some will argue that it’s the engineers behind that felt short, only thing I can say is that if they, I do not think you will succeed.

Yes linkedin did a very good ipad app enclosed in native packaging, only it’s not completely web, and well that’s the only example anyone can think of it seems. I still wait to see a web app that have the same quality than a app of the like of Path, specially on android.

Resources:
Mobile Apps: HTML5 vs Native
You’ll never believe how LinkedIn built its new iPad app
LinkedIn For iPad: using local storage for snappy mobile apps
LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5
HTML5 vs. native apps: How to pick the right path