1

I am starting to use these tools and am still in the process of understanding their meta-dependencies.

As I see Yeoman, it is a client for npm with some "wizard" capabilities. It already install the dependencies of the generator used. Why, where and how is Bower used and needed here? Why does Yeoman need another package system when it is already using npm?

I know that typically npm is used for server side code and Bower for client side code (but still on the server, browserify is used for client side).

npm and Bower are both package management system. Right? So why does Yeoman use two different package management system instead of sticking to one?

Example: I want to create a set of templates and components for my team to be able to quickly build a website following a common structure, style etc.

  • First I create a little empty website with the basic css, menus. I make a Yeoman generator of it.
  • Then I make a second generator to add an empty page to this website. (I would want a generator for this case so it create the entry in the menu, adds some tests etc).
  • Then I want to offer some custom components, like a special form. I would typically package this in a bower package. But why not as another generator?

In this case a generator would totally fit the bill. It would be a very dumb generator, basically just importing the files in the right folder. It would not change the process for the developer.

George Stocker
  • 57,289
  • 29
  • 176
  • 237
gpe
  • 13
  • 4
  • possible duplicate of [Javascript dependency management : npm vs bower vs volo?](http://stackoverflow.com/questions/15092345/javascript-dependency-management-npm-vs-bower-vs-volo) – Ben Fortune Jul 11 '14 at 12:42
  • That's for their common usages. Bower is actually also server-side but for front-end packages, typically. Browserify is client-side. But npm can very well be used for front-end components on the server side. These are both package management systems. – gpe Jul 11 '14 at 12:44

2 Answers2

1

It's just an opinionated decision, quoting Yeoman's:

Through our official Generators, we promote the "Yeoman workflow". This workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications.

Bower was designed only for front end components management:

It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

Edit: Quoting @jlafay's comment:

...it's dependency structure remains more flat which is better suited for web pages due to a max length for url's. npm dependencies can have child dependencies and they tend to nest those child dependencies in their respective parent's directory.

rvignacio
  • 1,710
  • 1
  • 18
  • 33
  • 1
    Isn't that a surprising decision? to duplicate tools inside a framework? But thanks anyway, that seems to be the answer. – gpe Jul 11 '14 at 13:36
  • Yes and no... npm is great, but having bower only for client dependencies is somewhat cleaner than having npm with two configurations, because I certainly don't like the idea of having jquery-ui or angularjs installed in the node_modules folder. Also, it will be more friendly and easy to understand for newcomers to find two different tools (but that's my opinion). – rvignacio Jul 11 '14 at 14:21
0

Yeoman uses Bower because it's a package manager for the web which allows you to easily manage dependencies for your projects.

Yeoman needs Bower for dependencies such as JavaScript, images or CSS which are not included in npm (which install packages for node, server-side application)

Rémi Delhaye
  • 794
  • 3
  • 16
  • 1
    A npm package can contain anything as far as I know, pictures and css included. https://www.npmjs.org/doc/misc/npm-faq.html#what-is-a-package- . Yeoman's generators are npm packages for example. What is the problem in using npm for front-end code? – gpe Jul 11 '14 at 12:51
  • @gpe You're more likely to find front end web packages and resources in bower than npm. Sure npm can install anything it wants to but bower is more common for js libraries/files and css. I think it's dependency structure remains more flat which is better suited for web pages due to a max length for url's. npm dependencies can have child dependencies and they tend to nest those child dependencies in their respective parent's directory. – Jeff LaFay Jul 11 '14 at 13:44
  • @jlafay Uh that is right! I forgot this point. Which is a very important difference between bower and npm. – gpe Jul 11 '14 at 13:54
  • That would be a very good complementary comment on @rvignacio's answer. – gpe Jul 11 '14 at 13:55
  • @jlafay, I've added your comment as a quote. – rvignacio Jul 11 '14 at 17:20