Mobile development with HTML5
engineyard.com
engineyard.com
jQuery? Just including that puts your mobile web-app at 86KB of JavaScript and you haven't even written a single line of your app's code. Rendering on the client-side with jQuery templates is not anywhere near practical for the majority of web-enabled phones – if not all of them except the iPhone. More than 100-150KB of JS and most phones will enter sluggish territory.
Something you'll notice reading about HTML5 is most books and online articles are written by people who have never built or released web-app to be run on phones less powerful than an iPhone 4. They picked up an HTML5 book and regurgitated everything and every new nifty feature into their own words and examples.
My advice?
Don't use jQuery or any framework. Use native JS and only the functions you need, don't use CSS3, keep the DOM structure as simple as possible, and test from day one. My entire web-app's JS is 60KB minified, because I don't rely on framework's like jQuery (86KB) or Sencha Touch (250KB). These sizes don't matter on a desktop computer, but on an HTC from last year running Android 2.3, size greatly affects performance.
I agree that client-side rendering is not optimal, but for different reasons. This isn't 2006 anymore, phones are more powerful now. Unless I absolutely have to, I'm not going to care about your Nokia from back in the Stone Age. My problem with client-side rendering is that it chokes on large data-sets. You also have to pay the penalty to download the dynamic content after you download the static content, but this can be mitigated by only updating the content, rather than using AJAX to load it all to begin with. That also kills the author's use of the plug-in that stores AJAX data locally, but that's a separate issue.
My advice: Use jQuery, jQuery Mobile, and AppCache. When combined, jQuery and jQuery Mobile (including CSS) take up 58KB of space. Oh, and since you're storing it all locally from now on, there's no need to cry about the time (less than 1s on 3g) it takes to download all those fancy JS files.
This is because almost invariably the larger the JS is, the more code you're likely executing.
> don't use CSS3
Of course, this is all pure speculation, it'd be much better to test this out.
[1]: http://www.bitstorm.org/weblog/2010-8/Introduction_to_the_Go...
Targeting phones outside of iOS and Android with anything but the most basic functionality is a difficult task without help. A prime example being the 500+ ms delay created when adding event listeners for click instead of touch events. Click covers everything but it creates a perceptibly slow ui for the user.
Pretty much an experience like http://m.twitter.com
The click delay workaround is like 15 lines of JS. It's one of the few issues (along with foreach) requiring a major workaround, if you design your HTML/CSS layouts properly. Also, don't forget you can take what you need from jQuery or other libraries. For example, the click delay workaround I think I grabbed from HTML5 mobile boilerplate, and my foreach function I grabbed from jQuery.
http://zeptojs.com is worth considering for some cases (~5k micro-library for mobile WebKit browsers)
I grok what you're selling, but looking at JQuery, and especially Sencha Touch, I'm asking myself: how the heck could I make a native-looking app in plain JS without having to dive deep and beating the hell out of myself with all this crap that's already been solved?
Are you saying that the extra UI snazzle just isn't worth it? Or to buck up and start trying to replicate huge pieces of frameworks on my own?
There may be a place for jQuery, but stay away from Sencha Touch. It's a huge library, and barely runs on any device but an iphone. Don't be fooled by their slick marketing and examples.
Essentially, trying to replicate a native app in JS is a losing battle, unless your app is extremely simplistic. The majority of smartphones are simply too underpowered to replicate a native experience.
Aim for a site like http://m.twitter.com instead of trying to replicate a native experience. Test on real devices you intend to support as soon as possible, even if you've barely written the app.
Also what exactly is your claim on how size is greatly affecting performance? That Android takes a long time to deflate a large zipped javascript file or that it takes a long time to parse a large javascript file or the large javascript libraries are ineffecient? Do you have any evidence on these things?
The amount of JS that has to be interpreted by the browser does noticeably affect performance. At least in my experience testing and building webapps for mobile phones, over 100KB of JS and many devices start to manifest performance issues. I find it interesting so many people here question JS size affecting performance, when this has been the main focus and selling point of browser development for the last year.
CSS3 animations and gradients are not really feasable for anything but the iPhone at this point. On HTC devices running Android 2.3, just adding a CSS3 gradient to each item in a list slows my scrolling speed significantly and introduces stutters in the scroll, versus using a PNG of the same gradient I'm using CSS for. This is just one example of many, but CSS3 support is very shoddy on devices outside of the latest iPhones.
One note of caution: Rendering on the client side using jQuery Templates as the author suggests is great for small amounts of content, but even a list with 40 items will nearly freeze the UI while its rendered. I've experienced this on both iPhone and Android.
Also, using a cache manifest will cache your AJAX/JSONP calls. Either explicitly list these URLs in the network section of your manifest or add a timestamp to each request so its unique.
Needless to say, the best advice I would give (that others have said here as well) is to avoid frameworks like jQuery Mobile. There many other reasons too...not least of which is that jQuery Mobile doesn't work on T-Mobile or O2 in the UK and parts of Europe. It appears these networks intercept all traffic and try to minify the JS and CSS before they deliver it to the phone. There is some part of jQuery Mobile that they choke on and the page doesn't render correctly. I've tested extensively using Perfecto Mobile and even the jQuery Docs & Demo pages don't work right (so I know its not just me).
I don't really see the point of this option. The website can (presumably) scale to many different devices already, surely it can then scale with zooming as well. I'd think you could use percentages to create any kind of 'static' ui, if you really wished to do so.
So, which version of iOS do they plan on fixing this (or did fix this)? But then, that doesn't factor the people who don't know about OS updates and never sync.
Is this really the way forward? Why the assumption that the only reason I might zoom in is 'accidental'?
Also I am uneasy about populating all content via JSON but I can't put my finger on the precise technical reasons (but then neither could Gawker wrt desktop browsers so they went ahead with it anyway)
When I started using it, it seemed awesome. Then I played with it a little, and it started failing. Given that I have friends who actually give talks at conferences on the HTML5 application cache and how cool it was, this didn't make any sense: I believed I must be doing it wrong.
Then, one day, I decided to read the source code for WebKit's implementation of the HTML5 application cache, and found it to have tons of race conditions that would lead to whole-browser crash conditions (which I was even experiencing in my app). I even found a bug on the bug tracker with my most-occurred bug on it.
https://bugs.webkit.org/show_bug.cgi?id=43506
Only, that bug had been filed only months before, and this feature of WebKit had been "in production", with these bugs, for a couple years. My only guess is that no one really uses this feature very often.
Reading into the bug tracker some (to find more bugs), staring at the commit messages for the previous year, and even reading some of the posts on the mailing list, I found choice quotes from the people maintaining it that explained that no one knew how this code works, and that the one guy who did forgot.
In iOS 4.3 (I believe it was only 4.3, not 4.2, but I'd sort of believe 4.2, /maybe/ even 4.1), the crash bugs have been "fixed" (or I'd have given them to comex to maybe build another jailbreakme.com), but the race conditions remain: the code doesn't actually /work/, it just sort of doesn't fail.
Specifically, the issue is that the application cache loader for a page is tied to a specific frame: the one that started loading the cache. If that frame is freed, such as by the simple act of the user hitting the reload button, while the download is occurring, the entire thing gets wedged, and you can no longer get any parts of your page cached, nor can you recover or fix the process without the user totally closing the web browser and reopening it.
In practice, this actually happens constantly: if the user has a reasonably slow connection, and things are taking a while in the background to cache, they will hit reload. This deletes the old frame, but associates a new frame with the same cache builder. When the current download stops, the frame it was using is gone, and it ends up in this horrible wedge state.
Ok, I no longer even remember why I'm bothering to type this here (does anyone care? does anyone actually intend to try to use this feature? ;P), but I also no longer seem to have anything more to say, so I'm going to click "add comment" ;P.
Yes, that's a very interesting (if disheartening) exposé on the risks of trying to use the application cache.
I have a post on idevblogaday.com today on calling Objective-C from JavaScript, calling JavaScript from Objective-C, and logging to the Xcode console from JavaScript.