1072664 - replace commonplace module dependency system with bower

Status: RESOLVED FIXED

(Marketplace Graveyard :: Code Quality, defect)

Description

[Kevin Ngo [:ngoke]]

Commonplace's module management is monolithic. In the process of updating a Commonplace project, all of Commonplace files are simply overwritten into the project. This is fine for the core JS files that compose the framework, but it deters us adding files that we might not want to be shared across all projects. Such as with files that are specific to only Fireplace and Transonic, if we place them into Commonplace, they will get copied to non-related Commonplace projects. Another bad thing is that if we want to add a file to Commonplace, it has to be hardcoded in the update process for it to be distributed.

Bower/Gulp can rework how our Commonplace modules are distributed (and in doing so, get rid of a lot of old Node code that I've been maintaining).

Here's my current plan. I'm going to create a new folder in Commonplace called "dist" containing all of our reusable files. It might look like:

- core: core JS to the framework (e.g., builder.js, views.js)
- contrib: useful and reusable JS (e.g., feed.js, image-deferrer.js)
- core-css: base CSS components based off of style guides from UX/Phil (e.g., buttons.styl, colors.styl, typography.styl, nav.styl)
- contrib-css: reusable CSS files (e.g., feed.styl)
- templates: reusable templates (e.g., 404.html)
- img: common images (e.g., region flags, sprites)

Upon "bower install commonplace", this folder of delicious components will be downloaded into "bower_components". We can have Gulp copy these files into our projects. We can have a Gulp task that reads a config to whitelist which files to copy and where to them. Since the whitelisted files can vary from project to project, we can have this config be locally extendable.

Comment 1

[Kevin Ngo [:ngoke]]

https://github.com/mozilla/commonplace/blob/master/bower.json
https://github.com/mozilla/commonplace-template/blob/master/gulpfile.js#L25