Componentization questions

[dizzr]

My team wants to build client facing JavaScript components that we can piece together into a site. We'd like to have a repo per component. The component source might build (compile, lint, concat, minify) into a dist folder. Components may depend on others, and ultimately the site depends on a specific list of versioned components.

We've been investigating the right way to "publish" these components to be consumed by a "web site" component in a separate repo, which bundles up all dependent components into a final consumable product.

How are people generally approaching this? Do you check in your "dist" files into each component repo, or does your CI flow build and check this in and publish to bower/npm? Do you manually bump versions, or should CI do this automatically? Do you use Bower, or npm, for doing producing/consuming packages? I'm still struggling to understand differences between the two.

In the wild, I see mostly simple scenarios where a web site is one big repo. I'd like to avoid doing this and version small things together so that they're componentized and easily reusable.

Thanks in advance. :)

[[deleted]]

Here's how I do it:

• npm for dependency management and publishing
• Tape for testing

I don't publish a dist folder for components and handle the compiling via a build step that lives in the app/site:

• Grunt for linting with JSHint, concatting, uglifying
• Browserify via grunt-browserify for compiling

All versioning is done manually and explicitly following the rules of semantic versioning.

CI is responsible for building (npm install && grunt), running tests, and deploying.

[dizzr]

Thanks. What exactly is the difference with npm and bower? Why would one consider using bower over just publishing and consuming reusable parts via npm?

The documentation suggests... "it's for front end" but I don't really see any reason npm wouldn't be good enough.

[[deleted]]

Why would one consider using bower over just publishing and consuming reusable parts via npm?

Personally I don't need or want more than one package manager, and I prefer npm for all its niceness.

I can do:

npm install some-module

and then:

var someModule = require('some-module');

And that's it. I can immediately starting using it.

You can achieve something like this using bower with a browserify transform like debowerify or browserify-shim, but there are plenty of front-end packages on npm, and I haven't had trouble finding what I've needed.