I have installed an Ionic app (beta 14) on my Android (Lollipop) device using:
ionic platform add android
ionic run android
I have also manually built the app and installed it with adb.
The app uses ion-side-menus, and the animations for the transitions between simple views (list -> detail -> detail) are incredibly laggy on a capable phone. The animation when the side menu slides out is very smooth in contrast.
To further investigate the situation, I served the www directory from my dev machine and opened that page in Chrome on the phone and it was as smooth as one would expect. The app also runs smoothly on iOS devices.
Does anyone have any clues as to why it is so slow when the app is in Ionic, but performs as expected when it is just being rendered in the browser?
I faced with the same issue. It's worse in cases that you need to load a lot of information. In those occasion, I disable the transition effect by setting:
nav-transition=none
if you need to disable the transition from your controller, do the following:
app.controller('ctrl', function($scope,$state, $ionicViewSwitcher){ $scope.goBack = function(){
$ionicViewSwitcher.nextTransition('none');
$state.go('back');
});
I found some solutions by which I face problem in ionic app transitiosn..
After State Change I use this code..
//OnState Change..
$scope.$on('$stateChangeSuccess', function() {
$ionicLoading.show();
MyTeamListing();
})
which hit serve every time when i change state.. which is slow down the app.
i just Remove first line and my code is working fine...
I don't know it is a good or bad way but its working for me fine..
Transaction is become slow if too much data is load on transaction
so that I use ionic events which load data after transaction done.
$scope.$on('$ionicView.afterEnter', function(){
console.log("afterEnter");
$ionicLoading.show();
loadRemoteData();
$ionicLoading.hide();
});
Well, the perks of developing hybrid application is its code re-usability and faster development however, what advantage we get on development results in slow hybrid apps. We can make the application relatively faster if we follow following points:
absolutely remove the comments and unnecessary functions
minimize the white-space, make your functions as small as possible
use minified css and js
optimize the images, the fewer the images the faster the application
if possible, preload the images check here
keep the nonessential js file to the bottom of the page just before the end of body tag
remove the unnecessary pages, unnecessary scrolling and large pages.
limit the usage of input boxes; make use of radio buttons,checkboxes and comboboxes if possible.
don't use jquery library unless of utmost necessity, use javascript
Related
recently I have observed thath my android app uses too much of RAM.
When i open it it takes ~~120mb and after few changes of pages it goes to 400mb.
What can I do?
To change page I use popover with:
this.navCtrl.setRoot(StatisticsPage);
Some data from profiler:
link to data
Whenever you need to go into the child component then instead of using this.navCtrl.setRoot(StatisticsPage); you can use this.navCtrl.push(StatisticsPage);
this could be one point of improvement.
I have an app running on AngularJS and Ionic and I have a problem with state transition with Android devices but not on iPhone/iOS.
One page is quite large and when I navigate from the home screen to this page the header gets loaded first and after 2-3 seconds the actual view changes.
I tried adding ng-cloak to the ion-view but this doesn't solve the problem.
What do you mean by that your view is getting changed? Also in which versions of Android are you facing this problem?
Unfortunately it seems a problem very device oriented. You could try to change some elements to enhance perfomance like changing your ng-repeat for collection-repeat.
The best way you could try to improve your performance in Android comes to the cost of weight in your App. You could try using Crosswalk Webview Plugin. This not only provides you the great webview capabilities where your native webview lacks the performance but also it is providing feature constancy across Android 4.0+ Platforms.
See this:
http://blog.ionic.io/crosswalk-comes-to-ionic/
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
Currently I'm developing an apps in Ionic.
However, as the hybrid curse says, I have this big delay when navigating between pages, which only happened after the apps deployed to android device.
After I took a while to investigate about it. Now I know that it is caused by the heavy rendering which Ionic does when we navigate to the other page.
I found that this rendering only happened once at the time we visit that page. The second time we visit, it's already cached so it is faster.
The question is. Anyone knows how to force render all pages in Ionic?
Thank you!
You can set cahce: false in your ui-router, to states you want never to be cached.
.state('foo.bar', {
cache: false;
url : '/foo/bar'
....
})
If you want dont want to cache any state ( which will allow you to rerender each state )
You can set $ionicConfigProvider.views.maxCache(0);
For more references see here
I want to know if it's possible to design my android app UI with HTML5 and CSS3.
If it's possible, is there any performance issue?
Android has WebView which can render HTML content, but it doesn't provide the same user experience as native apps so its use is generally discouraged.
Yes it possible. As rhoadster91 stated, you can use a normal Android WebView which loads your "index.html". All your HTML files should be in the "assets/www" directory. But you'll find plenty tutorials out there which explain everything step by step. Have a look at Googles developer site.
A second possibility would be Phonegap. It is a little tool which helps you to deploy your app for various devices (Android, iOS, WP,...) while coding your app only once in HTML.
I experimented with jquery mobile, native application and phonegap. Building a web application at first seemed very attractive at first as the coding is a lot easier compared to native applications. Here is my opinion based on my research:
Using phonegap slows your application responses, it loads slowly and together with jquery mobile the response and load time increases. So I didnot use it.
Using jquery alone was no different in Gingerbread mobile and on emulator you can clearly see the lag in switching between one div to another div. I didnot use it either.
What I did was use android Webview. I wrote my own javascript and css and placed them on the head section of my page. Used div for changing pages on button click. This approach worked really good giving nearly native performance.
Suppose I want to write an app for Android OS that is not going to be a real-time game; that is, it will be a turn based game (requiring internet access) that is based on forms and pages.
I'd like to use HTML5 to do this, and simply have a WebView on the native app with some bindings to the website's javascript, etc. for more functionality (if needed). Of course, since this is not a realtime game, performance doesn't seem like it would be an issue.
The only real reason I can think of to not use HTML5, is because there would be loading times in between forms e.g. every time a user clicks on a button to perform an action that transitions them to a new form, which is actually a new web page, that web page must be loaded. If I did this natively using the Android SDK, the loading of the forms would be seamless and instantaneous (even though the web up/down will take a small amount of time, but that is expected).
Is this a real issue? Are there ways around it that don't involve using the Android SDK instead of HTML5?
A couple of ideas:
1) Bundle your HTML with the app in the folder called assets and load it from there with an URL like file:///android_asset/your_path.html. This will reduce the time required to load because the content will be on the device.
However, beware of the following webview bug in Android 3.0+ that causes any URL with # or ? to fail to load from the assets folder:
http://code.google.com/p/android/issues/detail?id=17535
2) You can also choose to use AJAX to reduce the page load time. You load the heavy libraries once in the beginning and then use AJAX for subsequent page loads to avoid loading a lot of JS stuff. But beware of the bug above, since AJAX page loads use # in the URL.