While working with Phonegap, You might figure out to what use after your first hello World demo, like listing files, loading, effects, transitions and you might consider using some framework to avoid all those boilerplate of DIY the UI. Problem is some of the framework still needs adjustments and if you don’t understand whole framework you might end up messing around until you find out best solution.
But if your project needs a bunch of implementation and you’re with time to do so, and kind of control what you want and doing it in the right time, here’s my tips and tricks to avoid snagging and became lazy on producing some valuable apps.
1 – Never use JQuery library for your Next Phonegap App. It’s a hell of a job make things work, specially for loading content, the side effect is you’re using chuncks of code for IE, Opera, Safari and a bunch of other __prototype__ you don’t need it at all.
My suggestion is use ZeptoJS. Tiny, fast and ultra lightweight lib, and you just load what you need, targeting webkit child-browser. The syntax is very similar to jQuery and works like a charm, supporting even gestures out of the box.
2 – Never use file:/// to load local files in your Phonegap Apps, instead, use $.ajax(), better transverse XMLHttpRequest then loading files directly into DOM without pitfalls of loading.
And when doing so, disable async, otherwise browser will pimp or flicker specially if you’re in iOS.
Other thing to mention is the access Origin, if you’re just like me, use * for all website to request.
3 – Use as much as possible @media queries, there’s a bunch of tutorials and materials out there who can teach you exactly your needs. This is a very good point for multi-device density. And never forget to use images by screen dpi as well, otherwise your App is floated with dpis not used.
4 – For Android Developers, always clear the content of your App first then delete the App from the device, before you generate another version to your device, PhoneGap always cache the content of loaded files and you will be failing if you’re trying to fix some bugs on meantime.
5 – Use only the device capabilities you need it, Specially if you’re in Android and by default the ./create methods enables everything by default, you might be scary your user if all available capabilities are in use.
6 – Test your code in Chrome, Since uses the lastest webkit approach, you will need it to emulate your content and test media queries.
7 – Continuing with the testing code approach, Forget about Emulators when you’re designing the UI, you don’t need them for creating UI and workflow. You just need to fire up a Emulator when you need to test device capabilities like Camera, Mic. Even if you need GPS you Chrome serves very well those things.
8 – DRY (Don’t Repeat Yourself), Use AngularJS for the databinding, very usefull for Mobile developers. But if you’re a good MVC fan, BackboneJS is there for it.
9 – For Blackberry developers, use their own API for Media, PhoneGap API for Media is slow on BB6 devices, works awesome on BB7, specially playing local files.
10 – For iOS developers, Keep in mind for big density, so do a very well elaborate images for those devices, otherwise the Apple’s team will reject your app if graphics are poor. “Trust me, they will”.
