February 12, 2014

Things I learn from developing phonegap app

While working with phonegap to build native apps I learn a lot. As you know phonegap or any other tools that used to develop apps with html5 always have bad performance. Here we tips that I learn which can be helpful.
I love jquery and use a lot, for web or any other things, mostly animations, interactions and DOM manipulating. But phonegap jquery animation looks really bad, so first rule for me is never use jquery animation on phonegap, use CSS animations. However that's not the end, use translate instead of using positions:


jQuery click event comes with 300ms Delay, which made the app looks a bit unnatural, one javascript plugin I recommend is fastclick.js

or if you prefer not to use plugin, touchend event should be good enough to prevent this delay.

... to be continue

Use variables instead of calling the DOM itself,

Use touch when you want to overflow something within a box.

you can also style the sidebar using webkit sidebar:
[cc lang='css']
::-webkit-scrollbar {
width: 8px;
::-webkit-scrollbar-track {
background: none;

::-webkit-scrollbar-thumb {
border-radius: 6px;
background: #ccc;

Reduce the DOM elements, One way that I did is to create a Class in javascript, whenever a new Page need, call that function with that would append my Html into the Dom and remove the previous elements.

If you have more to share, please comment below...