Hacker News new | ask | show | jobs
by tvwonline 4949 days ago
I just recently completed a mobile web app for my start-up and was pleasantly surprise with what I was able to achieve.

If I was to share anything from my recent experience these would be my main points: - use the correct HTML5 elements for input (eg: "number" brings up the keyboard with numbers already selected, "date" brings up a native datepicker (iOS5+))

- Use lightweight javascript frameworks, or write your own. I tried JQueryMobile and performance was terrible with just a simple list(on iPhone 4). Used XUIJS instead and rolled my own framework on top to manage views etc. Performance is great.

- Use graphics only when needed, gradients, shadows, should all be css.

- If you must use graphics, be sure to support high res screens with alternative resolution images. I found the best way is to use the 'background-image' css property with pixel ratio css media queries to differentiate between different resolutions.

- Set the correct metadata values so you can add your web app to the homescreen to run full screen.

One problem I had was a lack of access to Android devices for testing, but I used this site http://www.manymo.com/ and found it invaluable.

1 comments

Interesting. I found I had the exact same experience as you did for my latest projects. In fact you helped solved a problem I have with JQuery Mobile (i.e. it laaaaaaaaaaaaaaa....gs)

Guess I'll be picking up XUIJS.

Zepto is also worth checking out, especially if you're looking to reuse bits built with jQuery from a larger web app (API is almost identical).
Yeah I've tried Zepto as a drop-in replacement for JQuery once ... a long time ago. The results were disastrous (everything broke!) but I guess I'll try it again
It's still not a drop-in replacement, but it's close. You need to include more modules than just the core for eg. ajax or transition effects (the official modules are all available from http://zeptojs.com and/or the github linked there). I maintain a pretty hefty Backbone based web app where we use Zepto for mobile/non-IE to save on file size, and serve the exact same code but with jQuery for IE. In about a thousand lines of code, there are only 3 or 4 edge cases where the code paths diverge for a line or two, and they're due to IE peculiarities rather than Zepto/jQuery conflicts.
You should have a look at this page for a comparison of javascript frameworks on mobile devices:

http://www.codefessions.com/2012/08/performance-of-jquery-co...