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.
The default Ionic project structure is as follows
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.
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.
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 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
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
i18n - Translation
I’ve used angular translate project where i’ve loaded 2 json dynamically when app is initiated.
$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.
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.
Point to note here is , you are storing the objects as strings . On retreiving , you are parsing the strings back to Objects.
ngCordova has the wrapper for almost every cordova plugins.
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