We Keep Coding

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 ;)

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 :)

Sencha Touch 2 - Android Performance

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

Is there an equivilent of jQTouch that covers iPhone, Android, WebOS and Blackberry OS?

I am about to start writing a web app for the latest smartphones using HTML5, CSS3 and JavaScript. I don’t need a framework so much as a library like jQuery.
I looked at jQTouch which is great for iPhone and apparently has support coming for Android too but I am looking to cover Blackberry device Software v4.6 upwards and WebOS 5 as well.
Does anyone have any ideas of alternatives to jQTouch or experience using jQTouch with Android's native browser, Blackberry's browser or WebOS native browser?

Well you probably have to use jQuery. In the beginning of October, the jQuery community will release a jQuery Mobile Version, where you can use all the advantages of jQuery within almost every mobile browser.
Check their site out: http://jquerymobile.com/

Sencha Touch is a possible alternative, but I have no idea how well it works on BB and WebOS. I'm afraid that you won't find something that works well with BB, since they have switched to a Webkit based browser only recently.

I did a project for Android and iPhone using jQTouch. There were times when I had to fiddle with the code to get it working correctly but as a whole I found that almost everything worked on iPhone and Android. Where I started having problems was that the Android browser doesn't have nearly as much support for CSS3/HTML5 (especially with animations) and the app ran much slower on android as the browser doesn't have hardware accelerated graphics. This was a while ago so hopefully it has matured a bit now.

PhoneGap seems to be a reasonable cross-platform framework that supports encapsulating web app type development into an iPhone/iOS app, as well seeming to support some of the other platforms you asked about (but I have tried it on those).
http://www.phonegap.com/

iphone web page transitions

I am developing a web page for iPhones and iPod Touch's. I am using the Universal iPhone UI framework. I need to have silding page transitions, but can't seem to get it working. Is there a good javascript framework I could use that would make this easier? I've done a lot of normal web dev with jquery, but it doesn't seem to like the iPhone.

Try http://code.google.com/p/iui/
It's a nice little JS framework, among other things, that will help you with the transition aspect. Have a flick through the documentation too, as it'll give you quite a few additional options as well.

Regardless of what framework you're using, the WebKit CSS trasitions are extensions of CSS and were developed with the iPhone and iPhone web-based apps in mind. You can do some very clever, complex animations with no JavaScript and only a few lines of CSS.
Here's what Google finds on the subject.

Try the following frameworks.
Jo
Sencha Touch
jQuery Mobile
These are for serving Web based mobile sites, they can then in turn be made into Apps for Android or iOS using PhoneGap
Of the 3, Sencha is the more mature project and has the most things out of the box. Jo looks very promising and would probably directly compete with Sencha. jQuery mobile is very interesting but just far to early to do any production code with it, too rough around the edges. jQuery mobile takes a different approach to the others as it is html based and it interperates the attributes on tags to turn things into tableviews or menus.
jQuery mobile is quicker to hack together and get your head around, where the other two take a little bit more thinking. But once you figure them out its easy enough.
If you don't want to serve the site via a url at all and want to just build an app then Appcelerator is the way to go. You write code in JS and it makes native Android or iOS apps for you. You will get access to pretty much the full Android/iOS api.
I have coded with appcelerator, however I am no longer going to use it and use one of the above frameworks, probably Sencha for just now. I can get access to the device native apis via PhoneGap and for simpler apps give a great experience cross device via a url.
Reference

Apple's Dashcode IDE has an extensive set of page transition templates for the iPhone. You should be able to fire up a quick project, get the look you want, then export the resulting HTML/CSS/Javascript into your favorite IDE.
The only catch is that it's OSX only.

I've been deep into an iPhone web app project lately. We evaluated iUI, but decided against it for various reasons. Consequently, I've developed most of the same functionality from scratch. While I can't share the code from the actual product (as I'm under NDA), I have been documenting many of the techniques I've used to do certain things. Check out the links below:
http://segdeha.com/e/css-transitions/
http://segdeha.com/blog/2009/07/19/stupid-webkit-tricks