My restructure of the Ionic apps

tutorials
1

When we started to work with ionic, we quickly realized that the ./www folder quickly started to contain files that had no business being in the packaged app. We also wanted to add some additional features to the build process that are not present today. Namely eliminating unnecessary changes to the git repo.

These changes have lead to our ./www folder going from 55.6MB down to 3.8MB, and the packaged app gone from 12.49MB to 2,77MB!

Before we begin, you can get the code here

  1. We moved the ./www/lib to ./vendor, thus removing all the bower vendor files from the packaged app, like uncompiled ionic scss files etc.

  2. I also prefer a per feature structure of my app, so all the different features of the angular app are contained in their own directory inside ./src.

  3. All files are concatenated and minified via uglify. Source maps are saved for easier debugging.

  • App files are annotated with ngAnnotate before minification. At the moment ionic js throws errors if run threw ngAnnotate, so they are skipped, (Probably already annotated)
  • All HTML files used for templates are suffixed with .tpl.html and those then get compiled into angular template cache at build time, for faster performance.
  1. All gulp tasks include a in-memory cache for faster parsing when files gets updated.

The ./www directory now contain the following:

  • Static index.html that won’t change every time a js file is added or removed.
  • New files get automatically added to the app without having to manually link/InjectJS them into index.html

New file and folder structure:

|- src
|    |- <feature folder>
|    |    |- featureCtrl.js
|    |    |- feature.tpl.html
|    |- app.js
|- vendor
|    |- <Bower packages>
|-www
    |- assets
    |    |- fonts
    |         |- <font files>
    |- css
    |    |- ionic.app.css
    |- js
    |    |- all.min.js
    |    |- templates.min.js
    |    |- vendor.min.js
    |- maps
    |    |- <Sourcemap files>
    |- index.html

Still todo:

  • Add unit tests
  • improve font copy task to be more ubiquitous.

Comments and ideas on improvements are most welcome

5 Likes
2
  • ähhm i only saying the buzzwords: grunt or gulp
    -> create a task to copy all really used files in a build dir and then you can trigger also the build process via grunt exec oder grunt shell extensions or minify all js files before… and so on :wink:

So everything is done automatically

3

All these tasks gets processed when you run ionic build
I also run cordova-deploy to easily deploy my apps to Hockeyapp, and the tasks get’s run then as well. So there is no need to add grunt as a secondary task manager.

4

Ah okay, nice did not know that.

We build our apps via phonegap build and that is why we did not use ionic/phonegap/cordova-cli.

We have a git repo for each project:
therefore you can use bower, node modules and so on.

after dev our grunt tasks are making the copy/minify magic and we are are commiting this changes to build branch -> and phonegap builds us new build.

we have a second phonegap app to build our “dev-apps” (not minified and so on)