Bower to download packages - Best practice or bloat?


Hello, when I started with ionic, I followed examples and noticed that a lot of people used bower to download 3rd party packages. The advantage is it is easy to download and update.

However, I’ve noticed that bower downloads a lot of non-essential stuff like documents, examples, tutorials, minified and non minified version etc. And when you package for ios/android, all that stuff gets copied into the build directory.

For example, I recently integrated a library called ‘vis’ for timeline charting which has a gob full of examples, docs and other stuff which are many times more the size of the library and I noticed all of it gets sucked in.

So my question is - what do you do? Just use bower and don’t care about the other stuff? Or do you move just the .min.css/.min/js to some other directory and script include from there and leave out the full directory?



Why do you care?

Your packaged app will contain only what it requires not the examples nor docs.

Non minified version is useful when debugging.

Bower not only installs one lib, it also installs the other libs that are required by this lib to work.


I don’t think you are correct @gmarziou. When you do a ionic build it seems to recursively copy all the files and libraries inside www, so why do you think packaged files will not have docs and libs if they are inside the library? There is no way that I can see for the packaging process to know what is a non-essential file to leave out. For example, if I build for iOS, and go to Xcode , and take a look at staging -> it includes everything that the root www has.


You’re right, it does copy all that stuff even if you don’t use it.

If you don’t want that then you should use an optimized gulp.js file to make your production builds.
See for instance the one that I’ve created recently here.


Lovely, @leob. So much to learn for an angular/ionic newbie! I’m going to have more questions as I read through your gulp file, look forward to your advice as I learn more about this gulp thing.


To be honest the gulp file is a bit complicated as it’s completely optimized for my use case and app structure.

But the basic idea is quite simple: there is a ‘copy’ task which copies a set of “lib” javascript files to the destination folder.
The set of libs is kind of hardcoded (which is not really nice but anyway) at the top of the gulp file.

Note however that I use a kind of non-standard setup where my sources are under “src” and then for a production build I write all the production stuff to “www”. That way I keep the source and the target files cleanly separated.

But it’s a bit more complicated to set up.

Maybe this is an easier approach for your case:

What this guy does is he also has a ‘gulp’ file but then for the final produciton build he’s using “Cordova hooks”.
It’s these Cordova hooks then which are deleting the library stuff that you don’t want/need from the production build.

In the end I like my approach better but the advantage of his approach is that his gulp file is much simpler and he can stick with the “www” structure instead of a separate “src” and “www” structure (which is what I do).


As @leob said it’s because you use ionic simple gulp setup, I use the one from Generator-M-Ionic which takes care of it, the one from Leob is also fine.

Building a serious Ionic app is the same as building a serious angular webapp, it requires good build process.

Unfortunately Ionic with its starter apps promotes very basic practices for build process and even coding conventions. Ionic attracts many newbies that lack angularJS culture and it takes time for them to know what are the best practices in the angular community like the angular guidelines from John Papa


Totally agree, they suggest building an app is a piece of cake and for a simple/trivial one it is indeed. But building a serious, non-trivial app is still a lot of work …