CODEWITHSUNDEEP
androidionic-framework
Maximus S
Maximus S

Reputation: 11095

Building hybrid mobile apps

I have been building a mobile app and I just hit a major performance issue when I ported my app to Android. One of the major issues was that the transitions were "not native" enough. I decided to take a different approach to cope with such issue: a webView inside a native wrapper.

Is it a good practice to build an app with Ionic and have a native Android wrapper for the nav bar, transitions, and keyboard? One thing that confuses me is that Ionic comes with Cordova integrations that I don't really need if I have the wrapper.

Upvotes: 2

Views: 108

Answers (1)

Muhsin Keloth
Muhsin Keloth

Reputation: 7954

In ionic framework official documentation,you can see that ionic framework is Performance obsessed.

Speed is important. So important that you only notice when it isn't there. Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery, and hardware accelerated transitions.

hybrid development involves developing apps as Web apps that run in a browser, and then wrapping them in such a way that they run as native apps on mobile operating systems like iOS and Android. Also hybrid development greatly simplifies management of your app's life cycle, the hybridized versions of the Web app can be registered with Apple's App Store and Google's Play Store.

If you want to enhance the performance and the user experience of your hybrid application,you have to follow some best practices.

Here are some performance tips:

1.Crosswalk: That's the main tool for major performance improvement (in Android 4.4 < where it doesn't have the Chromium browser built in). If installing crosswalk using the ionic cli causes errors and bugs (as it almost surely will), download Intel XDK and you can test/debug/build your app from there using Crosswalk very easily.

2.One more thing I have witnessed that causes some major performance issue is background images and gradients, i'm still not sure about opacity performance overall but when I have taken out these two the scrolling and transition went super fast. Use hardware based css (translate3d) to move stuff around the DOM.

3.ionic run android will make an APK, but it is much better to do ionic build android

5.Use ng-if instead of ng-show, see difference

4.Minify JS and CSS, concat, and strip debug in your gulpfile.js.

5.Use ionic's collection-repeat as much as possible otherwise use one time binding in ng-repeat

6.Don't use more filters in view. Instead of that use "$filter" in code. Filters can have a negative impact on performance. Use directives where possible.

7.Reduce DOM as much as possible. It tooks too much CPU load.

8.Use one time binding '::' as much as possible even in directive parameters. eg: A value passed through to a directive. my-directive::parameter1
It means less watchers, which means better performance.

9.Avoid $scope.$apply() as this processes all the things. Use $scope.$digest() instead and it will only be processed from the scope it is called from.

10.Keep your $$watchers to an absolute minimum!

11.Only bundle what you need. Make sure you're including the bare minimum in terms of libraries etc.

12.Avoid JQuery and its plugins.

please check this video that will help you a lot to enhance the performance of your hybrid application.

All the best.

Upvotes: 1

Related Questions