Code Sharing
Sharing code between a web application and a PhoneGap/Cordova application using bower.
This could also be applied more generically.
I wrote this for a school project and thought I'd share it with the world...

When I started Bucket Streams, I quickly learned that a huge amount of code would be shared between the web and mobile applications. I didn’t want to duplicate that code because that would lead to a nightmare for maintainability and I didn’t want to waste time. So I set out to figure out a good way to manage sharing the code.

Because I was using Git-SCM for my source control management, I decided to look into some of the solutions it provides. Git has a concept of sub-projects that can be accomplished in a few ways. Everything online was saying that submodules were a terrible way to go and I should do a subtree instead. Well, I tried both, and they both failed pretty bad. I just had some really difficult problems with it.

Then, I was talking with someone on the #nodejs channel on IRC (Internet Relay Chat) and they mentioned that I could use Bower. I was using Bower already for my dependency management for front-end stuff, but I didn’t realize you could use Bower for private things as well. As long as my SSH keys were set up properly on my machine, then I could point Bower to my git repository and it would download the master branch into bower_components in my repo. It worked like a charm. Now I am sharing over 1,500 lines of code between my mobile and web applications! The one drawback with using bower is that I can’t commit changes upstream. Meaning I can’t be in the web project and commit changes to the shared repo. I have to go to the bs-js-common repo and make changes, then commit those, then update my dependency in both repos, but that’s a small price to pay…

This is what I did:
1. Create a repo called bs-js-common for all my common JavaScript pieces
2. Extract the directives/services/filters/etc. that I can from the bucketstreams repo into bs-js-common.
3. Change the templateUrls for the directives from: “/main/post/post.html” to “templates/post.html” (for example) so my directives are not dependant on directory structure for their templates (although they are dependant that the template is loaded into the template cache).
4. Move all the templates in the web project to a directory on my server.
5. Using Jade, automatically append those templates as an inline script tag on my main page with type="text/ng-template" and an id=”template/post.html” (for example). I do the same for the mobile application.
6. Add the bs-js-common repo as a bower dependency with "bower install {{URL to git repo}} --save"

And then this is how my flow works:
1. Develop in web/mobile repo.
2. Find I need something changed about a shared component (like the User object or the Post directive)
3. Make that change in the bower_components directory of the project I need the change for.
4. Iterate, test, make it do what I need it to do.
5. Delete all the files in my local clone of the bs-js-common repo.
6. Copy all the files from my bower_components/bs-js-common directory into the local clone of the repo.
7. Open up a git visualization tool (like Source Tree) to make sure nothing weird happened (or just run git status)
8. Commit those changes and push them.
9. In both the mobile and web repos, do a: bower update bs-js-common.
10. I have all the changes in both places! Yeah!

It works really well, and it makes my heart warm to know how much time/effort I’m saving myself.

#codesharing #shareingcode #angularjs #bower #blogpost #ionicframework  
Shared publiclyView activity