Possibly a stupid question, but ... Can anybody explain to me the use case for Bower/Yeoman?
Whenever I am adding javascript to a website I just use a cdn such as http://cdnjs.com/
Why would I use Bower instead of this? Is it more of a node.js thing? Or is it something to do with hosting your own copies of the libraries instead of a CDN (I thought this was frowned upon)
Dependencies. For example, Backbone depends on Underscore, and simply writing <script src="underscore.js"/><script src="backbone.js"/> encodes nothing about that fact. There's nothing stopping you updating Backbone to say a 2.0 that requires features in Underscore 2.0, but forgetting to update Underscore. On the other hand, bower update backbone will see dependencies: {"underscore": "^2.0"} in bower.js and update Underscore as well.
Is it something like NuGet for .NET packages but for Javascript? Does that mean that an ASP.NET MVC application using NuGet wouldn't really have any "need" for Bower?
We are developing a cross platform mobile application which has to run locally on user's tablets. Reaching out to a CDN to fetch dependencies is out of the question. We are basically using HTML5 in place of Qt5 here.
However, we found several horrible, horrible bugs with Bower randomly failing to install dependencies (such as https://github.com/bower/bower/issues/933), which is now thankfully fixed.
We are also investigating Browserify, so might switch to use NPM also for (some) client side dependencies.
I personally reported https://github.com/bower/bower/issues/1019 - that was an awful bug to deal with, and it caused us at work to put everything in bower_components into source control to guard against it in the future.
To the Bower team's credit though, once they fixed the issue, I have had smooth sailing since.
* Your external libraries have dependencies, and having dependencies managed for you is a good thing.
* The external components you're using include both JS and CSS, and need to be served separately.
* Because you love your users, and want to concatenate your javascript and CSS to single files before serving it out to your users.
* Because you're including components that expose SASS mixins you want to use inside your existing code.
The hosted vs serving your own libraries is a complicated topic, but the basic answer comes down to "the less requests your clients have to make, the faster things will be".
concatting JS libraries into your own JS payload is a debatable practice. If it's a popular library, the user likely has it cached already and so the request to get it takes a few milliseconds. Where as your own JS payload will change with every release, forcing them to always re-download the same library code.
Sure if you need jQuery and maybe another plug in that's fine, you're at 3 files to be loaded then. 2 from cdn, the jquery and plugin, plus one from your server.
For a web application however it's likely to contain many many more resources, backbone, marionette, jquery, handlebars. Those aren't great examples because NPM handles those just fine, and the discussion is concerning bower.
NPM billed itself as javascript primarily and never tried to sell itself to front end developers. Not terribly hard, it was definitely for node development. It was almost literally a branding issue. I think another big problem was the continued separation of concerns employed by most node developers. They tend to keep their front end/client side code in one directory bunched up together such as `/assets` or `/client` and then use the the rest of the project structure for their models directory, controllers, etc.
A real back end system requires this complex set up while there has been a long trend of front end being as light weight as possible while providing as interactive an experience as possible.
With the continued rise of SPA's though the front end is now easily as complex as the back end, and in fact shares a lot of the same logic. With build tools like GulpJS it's possible to fix this structural issue and now keep your code more logically grouped by function, group all of your users files, all of your messages files together and then concatenate and minify your client into a single file for production.
Anyways, so for a SPA you'll end up with a ton more dependencies, both css and js files. Bower billed itself for this purpose. Their branding and singular purpose made thing far easier.
I also prefer bower because it has a significantly better search and sort method in comparison to npm.
Bower has tons of packages that cdnjs doesn't, and includes CSS focused packages and the like.
Yeoman is just a scaffolding tool, with application specific generators e.g. angular, backbone etc.. Generators also typically come with a build task, which creates a deployment ready folder all minified & concatted up for your enjoyment.
> Or is it something to do with hosting your own copies of the libraries instead of a CDN (I thought this was frowned upon)
I rarely use CDN copies of scripts for work projects. When Google first set up their CDN for jQuery, I used it on a client's custom e-commerce system. Client called us up and SCREAMED at our development manager because he was getting a warning that the admin section of his brand new site was insecure.
Google was using an invalid SSL cert for the CDN's domain. It was completely out of our control. But that's the problem -- what gets served up is completely out of your control. It could have a bad/missing SSL cert. The file could go missing. Or it could be replaced with malware. It's not worth the couple milliseconds you're going to save.
Updates, dependencies, offline development, etc. Not really a node.js thing (though bower itself can be installed via npm), it's specifically targeting front-end development.
The debate over CDN vs. local is debated on all levels. Usually CDN is faster due to cached files, but what I consider the "best" approach is to use a CDN for most everything with local fallback (yes, you can use bower packages for the fallback if you please).
One of the reason for me to use bower is to have the dependencies only relying on your server and not an external CDN. Depending on what you do, that is something you'll want.
Another advantage to this approach is you'll be able to also play with the files, e.g group them, minify with the tools you want, debug with the full source available or only use parts of the libraries.
Also for offline development it's a bliss (on a laptop on the go for instance).
You can do all of this by checkout each project individually and manage them yourself, but it's so much easier to just use hower.
Whenever I am adding javascript to a website I just use a cdn such as http://cdnjs.com/
Why would I use Bower instead of this? Is it more of a node.js thing? Or is it something to do with hosting your own copies of the libraries instead of a CDN (I thought this was frowned upon)