How to speed up jquery for mobile and phoneGap

Pre-req: You guys can use Setup Blog post for setup. First of all create a android project and add  PhoneGap stuff into it. Then inside asset/www/css & asset/www/js
copy the jquery mobile js and css file.

In this tutorial i am giving tips to speed up you native app



1) Put you script code at the end of </body> tag.

2) Integrate the jquery function with phoneGap function for example in my code app is consuming JSON from a PHP server. I used

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
        $.getJSON("http://aamirkhan9876.byethost7.com/mobMoviesServer/services/m/get_banners.php",function(jData){//code});
}

onDeviceReady(); is provided by phoneGap.

3) PhoneGap application takes time on startup. A black screen appears for few seconds. To avoide that use a splash screen.



  On DroidGap Activity. use

        super.setIntegerProperty("splashscreen", R.drawable.images);
        super.loadUrl("file:///android_asset/www/index.html", 10000);  

 It will show the splash screen instead of black screen for 10000 ms.
 For activity loads before this time use blow code in index.html

 function onDeviceReady() {
      cordova.exec(null, null, "SplashScreen", "hide", []);
}

 4) Avoid jquery mobile nvigation transition. If you can.

     $.mobile.defaultPageTransition="none"

5) Compress your js & css files. Use any Compressor. i.e I found yui compressor awesome.

Source code is available.

Facebook Connect & Jquery For mobile, Phonegap android app

If you want to create an android native app rather the a web app then you need Facebook android sdk for connect purpose. If you want to use html 5, jquery and other stuff and want to create a native app from these
scripting languages. Then one of the good solution is phone gap. Below example demonstrate how to create a phone gap project.

For setup download few things:

1) PhoneGap sdk
2) Facebook android sdk, For your help here is a jar file with all class files sdk have.
3) Phonegap plugin facebook connect



Step A:
          i) Extract facebook android sdk and copy \facebook-android-sdk-3.0.2.b\facebook to your destination folder.
ii) Open eclipse and go to File -> Import -> Existing Project into work space.
iii) Then go to your dest. work space and select the facebook project.
iv) Modify AndroidManifest according to your requirements and add permission for internet access.
v) facebook is name of my project.

Step B:

i) Extract PhoneGap sdk. Go to folder phonegap-2.3.0\lib\android.
ii) Copy folder xml and past it into facebook/res. 
Add below lines in xml

<plugin name="org.apache.cordova.facebook.Connect" value="org.apache.cordova.facebook.ConnectPlugin" />




iii) Copy cordova-2.3.0.jar into folder facebook/libs. Right click the jar and select Build Path -> Add to Build Path.
iv) Copy cordova-2.3.0.js into  \facebook\assets\www. IF you dont find these folders the create.
vii) Create a droid activity as we do in PhoneGap. Let say MainActivity.java

Step C:
By Project here I mean facebook the destination project.

i) Extract Phone facebook connect plugin.
ii) Copy www/cdv-plugin-fb-connect.js into project assets\www.
iii) Copy lib/facebook_js_sdk into project assets\www.

iv) Copy org\apache\cordova\facebook\ConnectPlugin.java to project src folder.

v) Copy contents fron folder phonegap-plugin-facebook-connect-master\example\HackBook  to project assets\www.

vi) Edit index.html and put your facebook app id there. Click for Tutorial 

Note: Right Click project Go to Properties -> Android and un check Is Library option. 

You can use Jquery for mobile in this project , put jquery for mobiles css and js files into www/css,

www/js folders.

You index.html will look like this. 

Now you can run project on device.

For Source code click.

Click here for Referece.