Monday, August 19, 2013
Wednesday, August 14, 2013
How jQuery Mobile Eats PhoneGap Performance, See Experiment
As we know, jQuery Mobile renders a lot of HTML for a simple element/widget.
For example, the below picture(from jQM demos) shows the HTML source code (right) of a simple list item(left).
However, to make such a list item, the html can be as simple as just:
<li>Acura</li>(don’t know how? Leave a comment.)
But how will HTML elements affect the performance? Let’s take an experiment to see.
I wrote a simple page to test it.
Open live demo for web browser(PC & Phone)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
</head>
<body>
<p>
<input type="button" value="Render jQM" id="btnRenderjQM"/>
<input type="button" value="Render Custom" id="btnRenderCustom"/>
</p>
<p><b>Time: </b><span id="time">0</span></p>
<ul id="result" style="height: 200px; overflow: auto;"></ul>
<script language="javascript" type="text/javascript">
var time = null;
$(document).ready(function() {
var li1 = '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-c">\
<div class="ui-btn-inner ui-li">\
<div class="ui-btn-text"><a href="#" class="ui-link-inherit">Acura</a></div>\
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div>\
</li>';
var li2 = '<li>Acura</li>';
$("#btnRenderjQM").click(function() {
var $ul = $("#result");
$ul.empty();
var html = '';
for (var i = 0; i < 1000; i++) {
html += li1;
}
time = new Date();
$ul.html(html);
$("#time").html(new Date() - time);
});
$("#btnRenderCustom").click(function() {
var $ul = $("#result");
$ul.empty();
var html = '';
for (var i = 0; i < 1000; i++) {
html += li2;
}
time = new Date();
$ul.html(html);
$("#time").html(new Date() - time);
});
});
</script>
</body>
</html>
There are two buttons on the test page, one appends 1000 jQueryMobile list items to the list,
while the other appends 1000 simple list items.
Let’s see some charts.
Test in firefox:
Test in google chome:
Test on Android Phone:
Test in firefox:
Test in google chome:
Test on Android Phone:
The charts mean: HTML elements eat performance.
If we use simple HTML elements to render a page, it will save about 80% performance than using jQM.
If it’s a small page, that would be OK using jQM, if it’s a complex page,
I recommend you write the HTML elements by yourself.
The above test page can be viewed online here:
live demo for web browser(PC &Phone).
Contact US
Learn Our PhoneGap Development Service
Feel free to make comments or ask questions.
Monday, August 12, 2013
My PhoneGap With jQuery Mobile Development Experience
Recently my PhoneGap team has been working with jQuery Mobile for a few clients.
The overall development experience is really bad.
Project 1: tablet
The first APP I want to say is for tablet. Our team joined the development when the APP was about 90% done.
That APP used jQuery Mobile and also backbone.
When we joined the development, the code looked not very professional.
There are mainly two files for the project, two very big ones. One is the index.html that had over 2000 lines,
and the other is index.js that has over 5000 lines of code.
Our first tasks are very small and were done quickly,
but we still suffered from the too large code.
So we advised the client refactor, and the client accepted.
We then re-designed the code architecture and separated the big index.js
into many small ones based on functions.
The JS code became much clear, but the index.html is still very large(no change).
Later the client said the whole APP performance was not good,
then we tried many methods but finally we have to remove usage of jQuery Mobile.
It is because jQuery Mobile generates too many html elements for a simple element,
such as a button. When the data become a little large,
it costs a lot of time rendering so many html element.
And the html elements each performance during the whole lifetime of the page.
Another example:
For the above item template, we can change it to:
<li>Acura<span></span></li> , even the <span> is not necessary.
<li>Acura<span></span></li> , even the <span> is not necessary.
For some pages with big data, we refactored the html to use as few html as possible.
And the performance become much better.
Project 2: iPhone
We joined the project also from half way.
One of our tasks is to list all contacts and search and choose.
Normally, a phone has more than 200 contacts.
At the beginning, we used jQuery Mobile listview because the project was already using jQuery Mobile.
The list item template is not complex,
but the performance was very bad. It cost about 3 seconds to render 300 contacts.
Then we tried removing using listview, instead, we wrote a very simple UL,
and the performance become much better. We also spent much time on the listview item template,
since it doesn’t work well and not easy to use.
For this project, there are also mainly two big files: index.js and index.html.
The code is hard to read or maintain. We need to press CTRL+F to navigate to the right page all the time.
It’s really a nightmare.
In conclusion
The two projects originally used a lot of jQuery Mobile features,
but finally many of them are removed due to performance issues.
I think jQuery Mobile is only suitable for web applications, not for PhoneGap,
since performance is really a big concern in PhoneGap.
Till this moment, I haven’t seen any good jQuery Mobile project architecture.
A good code architecture should keep the code easy to read, easy to maintain,
and any developer knows where to put the code. Generally,
each file should have less than 300 lines of code, each method should have less than 30 lines of code.
Contact US
Learn Our PhoneGap Development ServiceThursday, August 1, 2013
PhoneGap Development Best Practice(1) - Using Mock
Here I'd like to share with you a phonegap development practice from our phonegap team -- using mock.
Then you don't have to test phonegap API related functions on your mobile devices,
instead you can test the functions in web browser.
You will find it saving you a lot of time.
It's so easy to use
We name the mock file as cordova.mock.js.
You can switch beween mock and real cordova by adding/deleting the ".mock" to/from the script reference line.
Using mock:
<script src="cordova.mock.js" type="text/javascript"></script>
Using real:
<script src="cordova.js" type="text/javascript"></script>
Write the rest of code just like you are using the real cordova.js,
becasue the two files works the same.
How to make the cordova.mock.js?
We have created a github repository for cordova.mock.js.
It's now not 100% complete, but we'll continue to mock more phonegap API to it.
We also welcome you to contribute to this repo.
You can find it on:
https://github.com/leotsai2012/phonegapmock
Part of sample code.
if(window.navigator == undefined) {
window.navigator = { };
}
navigator.contacts = {
find: function(contactFields, contactSuccess, contactError, contactFindOptions) {
var contacts = [
{
displayName: "Mike",
name: {
familyName: 'R',
formatted:'Mike R'
},
phoneNumbers: [
{
type: "string",
value: "0722829323123",
pref: false
}
]
},
{
displayName: "Leo",
phoneNumbers: [
{
type: "string",
value: "03837234343",
pref: false
},
{
type: "string",
value: "005543834",
pref: true
}
]
}
];
contactSuccess(contacts);
}
};
var ContactFindOptions = function() {
this.filter = "";
this.multiple = false;
};
You can also make it by your self according to your project requirements. It's really easy.
How do you like this idea? Please feel free to make any comment.
Contact US
Learn Our PhoneGap Development Service
Subscribe to:
Posts (Atom)