Sencha Touch 2 - Android Performance - javascript

We are developing a Sencha Touch 2 application which makes use of Phonegap to be able to install it as an application and access the storage of a device. This works really well on the iPad 2 and the iPad 3. However when we tried to run the application on an android device, the performance was very slow. The main elements which slowed down the system were lists and carousels. When we tried to test the same application through the chrome browser, the performance was on-par with that of the iPad.
Do you have any suggestions on what we can do to improve the performance on android, maybe even ditching Phonegap for something which works better. Or if we can force phonegap to run as a chrome browser.
Thank you for your time & help.

The problem you have here is that the Android browser does not use graphics hardware acceleration. This means that the standard tricks that Sencha (and other HTML5 libraries such as jQueryMobile, iScroll etc...) use to provide good scrolling performance, such as CSS 3D transforms to cause a your list to be rendered in a separate layer, which can then be translated in hardware, will not work on Android. Instead, list scroll will be performed entirely in software, which is going to be slow!
The Chrome browser, does however provide GPU acceleration. The Android device is more than capable of delivering a good HTML5 experience, it is simply that the standard browser does not take advantage of GPU hardware yet.
Unless you can force your end users to use Chrome (which I doubt), the only option is to degrade user experience, and deliver a slightly simpler UI for Android users.
For further details, see "IMPROVING THE PERFORMANCE OF YOUR HTML5 APP"

Try setting this flag in your AndroidManifest.xml :
android:hardwareAccelerated="true"

Update: Having now worked with ST2 more longer now the performance challenges on Android are just something you have to accept. There are many things you can do to avoid performance issues such as reduce listeners and events, keep your DOM light (below 2000 nodes) and generally avoid any CSS3 transformations and effects (these in particular don't perform well on Android)
Another thing to consider is rather than using the built in WebView you could use the CrossWalk browser and embed this in APK.
https://crosswalk-project.org
It adds a little size to your APK (15-20MB), but it performs better than the built in WebView and brings stability and consistency to a very fragmented platform. Consider the reality that every WebView on Android depending on device, vendor and OS version may be different in small ways. CrossWalk will allow you to have the exact same version across all Android 4.0+ devices and remove any device or vendor specific issues.
There is no silver bullet for performance on Android. Graphics acceleration won't improve the perform of pure javascript execution or DOM manipulation. If you want to understand why, then start here:
What's the difference between reflow and repaint?
Older Answer (may still be valid):
For ICS and above the following setting on the webview will significantly improve rendering performance for Sencha Touch on Android:
mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null);
However in my experience this will introduce artifacts into CSS rendering depending on the device and platform variation. I haven't specifically found a reason for this and I don't expect Google will resolve it as the webview component will be getting replaced with a newer and better version in Android 4.4.
https://developers.google.com/chrome/mobile/docs/webview/overview

Related

Ionic.js or Appgyver Steroids for Angular MPA

I'm working on a somewhat large Angular.js CRM mobile app that uses Ionic JS Framework for the UI elements. I've been debugging using Ripple Phonegap Emulator. I've had literally no performance issues anywhere. The transitions are fast and fluid.
However, once I deployed using Phonegap Build and loaded the APK on an Android device, the performance was terrible. Ionic.js has known problems with Master/Detail transitions which can be worked around, but even apart from these screens (when I am not loading any external content), the app was very slow.
My question is, should I try to adopt Appgyver's Steroids Framework for my UI elements and transitions? Will Steroids offer faster performance and would it be worth the transition?
I'm targeting Android and iOS.
If you were to develop you app iOS first, I would definitely recommend the AppGyver platform. However, currently the Android runtime is going through a complete rework, with the new (currently called "Fresh") Android runtime not yet having any native UI features implemented, which would provide a noticeable boost in your app's performance.
That said, the first native UI features are being implemented in the next few releases, so depending on your deadlines, it could be worth the wait.
In the current state of Steroids, your iOS ionic app will be sped up dramatically. The more processes and complexity you add to any single page app, the slower and more cluttered it gets. DOM gets overpopulated, and things just chug. With Steroids for iOS, MPAs really solve that problem because each page is a separate OS process. All transitions are performed natively. That means they don't just look native, they actually are.
As for Android, the latest version of the Steroids Android client (Fresh Android) runs a Chromium 35 based WebView... that will beat the pants off builds you get get from anywhere else currently. Without the Chromium build, you're building for the platform standard browsers, which for a common phone like Samsung S3, you'r building Chrome 9 - yikes! No amount of javascript magic will help you there. In the coming 4 - 6 weeks, AppGyver is releasing MPA for Android. This will totally change the performance Android Hybrids ;)

is crosswalk faster than cocoonjs

I just recently discovered cooconjs and i was excited to learn in a week or two. However i also have discovered crosswalk from intel.
Both look very promising And i have no idea which one is better for making games run faster on cellphone.
In article here: https://www.scirra.com/blog/133/introducing-crosswalk-the-new-way-to-publish-to-android it says that it is really fast and asmjs code can actually can get close to native mobile apps. If chrome now can run amsjs compatiable code faster than it should be true..doesn't cooconjs run the chrome version too but without all dom.
First of all, I have developed a game in cocoonjs and it's impressively fast.
I would recommend downloading the cocoon launcher from the app/play store.
In this app you can open DEMO apps where you can actually see what you can do with cocoonjs and how fast it is.
Secondly what cocoonjs actually did is that they built an complete own accelerated browser from scratch which has 100% focus on speed for the canvas element. This browser is not able to handle any other DOM elements its only for canvas. Nevertheless you can open an transparent webView as a overlay on the accelerated browser which can communicate in both ways. So you are actually able to build a GUI in a normal web browser communicating with the accelerated browser(probably your game) underlying. In addition you can access system functions through their javascript api and there are a lot extension ready to use like facebook/in-app purchase/ads etc all via javascript.
For more information visit http://docs.cocoon.io/

webview for user interface in android

I was searching for how to use swf file in android and most of the answer suggested me to use webview and an simple html file.
Now i think We can easily put css and javascript files in asset folder and then we can use them in an html5 code.
Looking at the power of HTML5, This will make app development for a web designer very easy job !
I just want to know that is it good to use this approach to build a good user interface in android ? Are there any technical pros/cons behind it ? will i miss some features provided by android ?
There are a lot of frameworks that allow you to write native android applications using HTML/CSS/JavaScript only. Here some of them :
PhoneGap
Cordova
Titanium
I've never used any of them, so I can't say if it's good or bad idea to write android apps this way, but here you can find a good session about it HTML5 versus Android.
There are pros & cons of using cross platforms. As per my point of view you shouldn't go for loading of everything in WebView.
I still recommend you native app approach because of following points :
WebView is one of the UI control in Android SDK. So, it will have
limitation of memory size and working with CPU utilization. So, you
might face performance issues in some devices.
As you know in older era we were used to work with desktop apps and after that everything is shifted to web-application.
It was
possible only because our browser(s) gets more features for e.g. more
memory area, CPU access, threading, individual Processing (like
google chrome) etc...
in-short, web browsers gets more smart and get treated as separate application. Now a days web-application can have mostly similar
performance as desktop apps. So, everything is now shifted to
web-application development.
This era will come in to Mobile development in later stage. but currently we are in middle stage of Mobile development and Cross platform development. So until and unless Web-View control of any platform (iOS / Android) gets more powerful, we can not totally relay on that.
I Hope I explain it properly :)

JavaScript: How to determine performance of the runtime (aka browser)?

I have a JavaScript application, which works fine, but certainly needs some memory / CPU performance (it is based on top of Google maps).
So basically it runs fine on a Desktop / Laptop PC, iPad works OK. But with all these different devices nowadays, smaller devices are definitely overloaded.
So basically I want to determine the available runtime and decide whether I start my JavaScript application, or display a message instead.
OK, I could check the browser, but this is a never ending story
I could check on the OS information, but again this is very tedious. Also some OS run on high performance devices as well as low end hardware.
I could check on the screen size and rule out mobile phones, but then it gets difficult
So is there a way to determine the performance of the client? Just to make it clear, I do not care whether it is a tablet for instance, but if it is a low performance tablet with little CPU performance / memory (so Detect phone/tablet/web client using javascript does not help).
In javascript You could check list of features and based on that do conclusion if device is low memory.
For example:
Check core count with window.navigator.hardwareConcurrency
(For better coverage add Core Estimator polyfill)
Check WebGL support (I like user2070775 suggestion): Proper way to detect WebGL support?
Check if its desktop or mobile. Most likely desktop will not have any problems with memory.
Check resolution of screen - most likely small resolution will be on low memory devices.

Are there performance guides for iOS and Android browsers?

As a web developer I also have to take the Android and iOS web browsers into account. The rendering engines of these browsers and the lack of power and memory brings a lot of complications.
So I was wondering, is there a comprehensive guide on performance tuning (HTML/CSS/Javascript) for these browsers?
I haven't found an actual guide focusing on mobile development yet. However, my coding practice is to do everything you'd do for a desktop browser and try to put extra effort in:
maximize use of cache, by using CDN, ETags, proper expiry dates etc.
minimize reflows/repaints, they are CPU intensive
optimize images aggressively to minimize download size.
minimze amount of server round-trips and included JS/CSS, since most mobiles are used on 3G/4G and other wireless networks. They tend to have higher latencies than wired broadband (cable/dsl).
do not use animated gif, 3d transforms, etc.
Here is some reading material: https://developers.google.com/speed/docs/best-practices/rules_intro

Categories