I've developed a mobile application with rhomobile + jQuery Mobile.
When I deploy it on a mobile phone "for android", it is very slow.
Could you help me to find the reason?
You can deactivate transition in your Rhodes app very easily to give it a try.
In the layout.erb file inside the app folder of your Rhodes application, you can find:
// Uncomment these options in case of performance problem in pages transition
//$.mobile.defaultPageTransition = 'none';
//$.mobile.defaultDialogTransition = 'none';
//$.mobile.ajaxEnabled = false;
//$.mobile.pushStateEnabled = false;
//$.mobile.loadingMessageDelay = 50; // in ms
Just uncomment it and give it a try.
No matter what wrapper is used (Rhomobile/Phonegap) jQuery mobile will have extremely bad performances on android devices (mainly 2.X, but sam thing relates to 4+ versions).
On the devices that have this problem (mostly Android) there isn't anything you can do. It is a browser limitation. Android mobile browsers are notorious for poor transitions.
On iOS, you have to be aware of a couple of issues. First of all, Webviews are hampered by slower Javascript than Mobile Safari, because they lack the Just-in-time compile feature. It's not Rhodes-specific. The same Javascript will run slower in a Webview than it will in Mobile Safari itself, and there is no getting around it.
Secondly, iOS does not automatically use hardware acceleration for transitions. You can "hint" the browser to use hardware acceleration by using a null 3D transform, like translateZ(0). Search for more information on this. There is a bit of an art to picking the right elements to do this on, since it can be costly to apply this to a large number of elements, and it usually isn't necessary to apply it to the entire element heirarchy.
My best advice, though, is to not use transitions, because they aren't handled well yet on a wide variety of mobile devices. IMO, no transition is a vastly superior user experience anyway. Transitions are used mainly to distract the user from slow software, ironically introducing more delay in the process.
Related
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I am using Cordova and Sencha Touch 2.3.1 to create both Android and Ios apps. The performance of the IOS app is quite good however the android app performance is very sluggish.
The home page comes is quite good shape but as soon as I open any other page the entire font as well as screen color etc becomes dull and screen response time becomes very high.
Any solutions or pointers will be highly appreciated.
I am using:-
Sencha Touch 2.3.1
Corodva 3.3.1-0.3.1
adt-bundle-windows-x86_64-20131030
Sencha Cmd v4.0.2.67
Part of the issue may be that iOS has a dedicated GPU and compiles mobile Safari with GPU acceleration, whereas most Android devices don't.
There's going to be a lot of potential answers to your question, it's likely that in some or a few ways that your application isn't following best practices which may be causing it to run slowly. The DOM might be too large, you could be instantiating things when you don't need them and forgetting to destroy them and a whole bunch of other stuff. There's a great video about Sencha Touch best practices I wrote a blog post about here: http://www.joshmorony.com/top-10-tips-sencha-touch-best-practices-review/
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
I am developing an Android app using web technologies and the CSS transitions (quite essential to the functionality of the app, since they're responsible for scrolling and swiping pages) are quite sluggish.
According to information found on the internet, CSS transitions are not hardware accelerated unless transformed 3-dimensionally. I found many articles saying that I should put "-webkit-transform: translateZ(0);" to my animated elements.
However, the Webkit in older Android versions (below 3.0) doesn't support 3D transformations.
Can I embed a newer version of WebKit with my app?
Can I embed a newer version of WebKit with my app?
In theory, perhaps.
You would have to completely rewrite WebKit to use something that the NDK supports for output (e.g., OpenGL) and embed it in your app. I estimate that this will take >100 developer-months, so if you have a large team and matching budget, you are welcome to try this. By the time you complete the work, the "older Android versions" will be obsolete, and you will not need the code.
Hence, from a practical standpoint, either redesign the apps such that CSS transitions are no longer "essential to the functionality of the app", or limit your app to Android 3.0+ and wait for the Android user base to catch up.
How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.