Sharing common libraries and own modules between multiple angularJS projects

I have multiple projects that I’ll develop using AngularJS, but targeting to web and phonegap at a time. The problem is that I have shared/common UI components (services, controllers, filters …) between these projects for reducing maintenance effort. All the projects will have their own modules with specific functionality. But technically we have to bring the common modules into each project (without copy-pasting them, obviously).

This scenario is to assume that your project could be large, and many small teams could work together at a time. Sharing common things that could prevent the code missing from updates, but it produces less DRY code and does not violate KISS principle. As I do mention about sharing common codes that this part should be far away from recent requirement changes … If the changes alway happen among the teams, sharing common things could be a nightmare.

My inspiration comes from developing application with Sencha ExtJS. This framework is awesome in separating the application into multiple targeting such as web, phone, tablet. It’s about the structure source code, and build process that collects appropriate codes that matching target devices.  With AngularJS projects, we can share the common libraries with bower, using module to split application into several profiles (phone, web …) or you know that you can have multiple ng-app in one prject. Grunt is the best tool for developing your own build process.

From beginning, I cloned the angular-seed project, start to modify it with multiple profile. It’s easy that you just create new folder ‘profiles/phone’ and ‘profile/web’ and copy the ‘view1’, ‘views2’ modules for both. Don’t forget app.js, app.css …  At this point, you have 2 application that share bower_components,  components as well. You can start the server and see them working separate parts of a single large web application. It should be worry that we could public all the things to user, but we don’t do that because the source should be minified and deployed for separated target.

To create the build for phonegap, I have the idea that is to collect the code from bower_components, commons, components folder, and profiles/phone . All the JavaScript code, css and html resource will be minified and copied into www folder in phonegapp package. So the most important here is grunt task, no more specific technical stuff. The same idea for web targeting, and grunt task would deploy this part to appropriate location.

I posted my solution to github, with detail instruction in readme file. All they’re kept to be update, since I am getting several feedback by my technical team. This simple solution have challenged many developers for a while, because of not deeply understanding on Front-end architecture. So, just a K.I.S.S🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s