Are you an ionic developer? Are you facing setbacks despite apparently doing everything right? Do you want to learn from the mistakes made by your peers? Or do you, as a computer geek, wish to gobble up anything and everything on the subject? If you fall in any of the above categories, then you should be aware of the mobile app framework, Ionic. For the rest of us, the lesser mortals, we will first understand what Ionic is and then we will look into the 9 most common errors than Ionic developers make.
So, what is Ionic?
Ionic is an open-source source-development-kit used for developing mobile apps. It was released in 2013 and has become a global platform in just 3 years. It is extremely popular and has been instrumental in the development of more than a million apps. There have been significantly updated releases after the initial launch and web technology has since then evolved significantly.
Why this list?
This list is to place emphasis on the common mistakes which act as ready reckoners for developers which one can refer to and avoid the fundamental problems that hinder the building of a robust and scalable framework.
Common Mistake#1: Forgetting to enable Native scrolling
Native scrolling enabled the use of infinite rolling and pull to refresh features without JavaScript scrolling. It also allows the framework to listen to scrolling events on supported web-views. It made a remarkable difference in the performance and user experience of the application.
Native Scrolling is enabled by default on Android since Ionic 1.2. Unfortunately, in the absence of events on iOS the “native scrolling” is not functional for the previous versions of the platform yet.
If you are using a version prior to 1.2, do not forget to enable Native Scrolling for Android using the Ionic Config Provider:
<pre><code class=”language-js hljs”><span class=”hljs-comment”>// Enable Native Scrolling on Android</span>
$ionicConfigProvider. platform.android.scrolling .jsScrolling(<span class=”hljs-literal”>false</span>);</code></pre>
If you wish to enable/disable native scrolling on one particular page, just use the following directive
in ion-content:
<pre><code class=”language-html hljs”><span class=”hljs-comment”><!– Disable Native Scrolling on this page only –></span>
<span class=”hljs-tag”><<span class=”hljs-title”>ion-content</span> <span class=”hljs-attribute”>overflow-scroll</span>=<span class=”hljs-value”>”false”</span>></span></code></pre>
Common Mistake #2: Missing out on the Ionic CLI
Iconic CLI has great features like, platform and plugin preference, which it adds to Cordova CLI. The problem with Cordova CLI is that the features are machine specific and while sharing the same environment, platforms, and plugins, it is difficult to keep the project in sync between the systems. Iconic CLI helps to resolve these issues by helping the machines to remain synchronised.
Platforms and plugins are stored in Cordova platforms and cordova Plugins properties like this:
<pre><code class=”language-json hljs”><span class=”hljs-string”>”cordovaPlugins”</span>: [
<span class=”hljs-string”>”cordova-plugin-whitelist@1.0.0″</span>,
<span class=”hljs-string”>”cordova-plugin-inappbrowser@1.0.1″</span>,
<span class=”hljs-string”>”cordova-plugin-splashscreen@2.1.0″</span>
],
<span class=”hljs-string”>”cordovaPlatforms”</span>: [
<span class=”hljs-string”>”android”</span>,
<span class=”hljs-string”>”ios”</span>
]
</code>
Common Mistake #3: Thinking Performance can be an issue
Ionic is based on AngularJS, and performance is always a doubt. However, we think that is a myth and very good performance can be achieved through Ionic.
Several successful Apps have been developed through Ionic, some of which has a 9M+ user base, 7M+ downloads and an average of 4.5 stars on Google Play.
One can use $Watch and Track By to get better performance.
Common Mistake #4: Confusions with ‘View Cache’ logic
Does your app create cache? It is a very difficult question to answer for the novice developers. With Ionic, 10 pages are cached by default. This helpful feature can be of trouble to us if we are unable to understand the dynamic of cache pages.
The problem is that when the user returns to a cached page, the controller is not re-instantiated again, and everything is like the same as when you left that page. You can update the cache by using these particular lines of code, which can be both for global as well as per platform basis:
<pre><code>// Globally
$ionicConfigProvider. views.maxCache(5);
// Per platforms
$ionicConfigProvider. platform.android.views. maxCache(5);
$ionicConfigProvider. platform.ios.views. maxCache(5);</code></pre>
Common Mistake #5: Not knowing the capabilities of Crosswalk
Every Android version runs a different WebView. The performance of the OS varies from one device to another. In order to resolve the issue and deliver a similar performance on any of these versions, you can install Crosswalk. It works to create a sync between the working of your application and the latest Chromium browser. The crosswalk can be installed simply using Ionic CLI or Cordova CLI.
You can install Crosswalk simply using Ionic CLI or Cordova CLI:
<pre><code class=”language-bash hljs”>ionic plugin add cordova-plugin-crosswalk-webview</code></pre>
Common Mistake #6: Running Cordova plugins inside the browser
Most of the developers out there create Apps to run on iOS or Android. However, they make the elementary mistake of testing the same on the web browser. Well, you could, but only after you install the proper browser platform. It is not compatible with all plugins. One can debug very easily in Android remotely.
Common Mistake #7: Mismatching the Architecture and Application scale
Most people make the critical mistake of using a basic architecture in developing advanced applications. People face scalability issues which are not easily modifiable.
Common Mistake #8: Binding Events ton scroll, and Forgetting About requestAnimationFrame
One should be very careful while selecting or writing codes, the codes usually make or break an App. One should take care that anything that triggers a digest loop should be deferred and not triggered together with heavy painting, which also is the effect of scrolling.
Many things that can be achieved by binding to scroll events, can also be developed using a different method. Behold requestAnimationFrame
Common Mistake #9: Using Ionic Applications frameworks mechanically
There are several options available to developers like, Ionic Creator, which has a very helpful drag and drop feature, which can help reduce development time greatly. We should be using them rather than doing everything manually.
Conclusion
Ionic has changed the way mobile app development was done. It has brought about revolutionary changes and is still evolving. While adapting to different platforms will always be a challenge, the ability to function across environments is slowly becoming a prerequisite. However, this journey can be much less daunting if one accesses the plethora of resources available online. We hope that this post has removed some of the obstacles you are facing while working on Ionic.