Ionic at scale

Aug 26, 2015


Hello everyone,

It has been a long time i’ve interacted with you. This article is not actually a tutorial, but it will be helpful when you use IonicFramework at scale. I’ve been working with IonicFramework for almost 8 months. I’ve used Ionic in couple of exciting projects. It works well with small and large projects.

Project Structure

The default Ionic project structure is as follows

-- www
  -- lib
  -- css
  -- img
  -- js
    -- app.js
    -- controller.js
    -- directive.js
  -- templates
  -- index.html

I had around 150 views in a single application which made me rethink about the project structure. I started using the similar structure in ngCordova demo application with some changes in it.

-- www
  -- lib
  -- modules
    -- module1        // Angular modules which are injected in app.js
      -- views
        -- view1.html
        -- view2.html
      -- module1.ctrl.js
      -- module1.dir.js
  -- shared           // Shared folder to include common js, css, templates
    -- img
    -- css
    -- views
      -- sidemenu.html
    -- js
      -- app.js
  -- index.html

This type of project structure helped me to create and update modules easily. Here i’ve a couple of views and related functions in a single module. I used a shared folder to keep common js/css/templates files.

App Performance

CrossWalk

When you add more and more modules with heavy HTTP calls , then the normal Ionic build might not work properly in low end phones. Also your Ionic application behaves differently in differently devices according to their browser capabilities. Ionic supports CrossWalk project. So we can use an alternate browser for Android. You can see more details in Ionic Documentation page Click here

Grunt

Grunt is a task runner which can automate you job easily. We need to go through a minification process to reduce the app size and improve performance.

Commonly used grunt plugins are grunt-contrib-concat,grunt-contrib-uglify,grunt-jsbeautifier,grunt-contrib-copy,grunt-cssmin,grunt-watch.

Images

You can do a lossless compression of images online to reduce the size of images used. Cache images if necessary using ImageCacheFactory Link to repo.

Using ImageCacheFactory is simple

angular.module('myApp', ['ionic','ionic.ion.imageCacheFactory'])

$ImageCacheFactory.Cache(imgLinkArr)
    .then(function(){
        console.log("Completed loading Image");
    },function(failed){
        console.log("Image loading failed: "+failed);
    });

i18n - Translation

I’ve used angular translate project where i’ve loaded 2 json dynamically when app is initiated. https://angular-translate.github.io

angular.module('translateApp', ['pascalprecht.translate'])

.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Hello'
  });
  $translateProvider.translations('de', {
    TITLE: 'Hallo'
  });
  $translateProvider.preferredLanguage('en');
});

$translateProvider is handy tool when you are building an application with global reach.

Directives, directives every where

When you see, you are using repeated code in multiple controllers , then you should think of directives.

LocalStorage

Browsers have the capability for storing data in a (key, value) pair called localStorage. Instead of using window.localStorage, we can use the Angular Factory for localStorage from Ionic website.

app.factory('$localstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.localStorage[key] || '{}');
    }
  }
}]);

Point to note here is , you are storing the objects as strings . On retreiving , you are parsing the strings back to Objects.

Plugins

ngCordova has the wrapper for almost every cordova plugins. http://ngcordova.com/docs/plugins/

Debugging

You can debug your hybrid application using Chrome remote debugging. To debug, connect your device via adb and run the app. Go to chrome://inspect/#devices . You’ll find you application with an inspect button.

These are some of the points which i came across when i write this article. I’ll update the article with more tools and services that might be useful when you are working on larger projects. Bye