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)
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.
* 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.
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.
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.
> 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).
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.
What are reasons to use bower over NPM? I know that bower mainly focusses on front-end libraries (such as jQuery or Bootstrap). But does it offer functionality NPM doesn't have?
Bower installs dependencies in a flat folder structure, whereas NPM nests them. This makes it much easier to use Bower with a client-side module loader.
Bower is also (easily) configurable where bower_components will be, whereas I don't think NPM is as easily.
In a fair world, the time and energy that went into Bower would have been spent making npm just a little bit better for front-end stuff. `npm dedupe` is halfway there. Now I have to deal with two arbitrary sources of dependencies.
The problem I have with apt, yum, etc... is that the packages for development are so old that you're going to be compiling from source and managing your own updates, which is exactly the problem a good package manager should solve.
The big difference is that packages that land in the official apt repositories have been heavily tested by the apt repository maintainers. Anyone can push a package to PyPI for example. There is a clear trade off between using packages from apt/yum and your toolchain's package managers.
In practice, I do find it much easier to pin dependencies and install from my toolchain's package manager (pip/PyPI).
For the small number of dependencies any of the projects I work on have, I find it easier to download the dependencies in a browser, and just copy them to the projects I'm using. I understand this is heresy.
Have you used Bower? I haven't but I watched a video of some guy speaking of Bower who pretty much said the same thing you did but changed his mind after trying it out.
I haven't tried Bower yet but kept that anecdote in mind and plan to try it to see what all the fuss is about.
From my understanding, a single command will take away all those intermediary steps between deciding to use a library and actually using it. No need to navigate to the project's page, looking for download link, downloading it, extracting and copying to the project directory.
Sounds good in theory to me; just haven't the chance to try it yet myself. Mostly because npm happens to have everything I would have used Bower for.
"Small number of dependencies" being the operative phrase.
Try managing a complex single page app with deep dependency graphs and each node in that graph versioning up independently. Not sure how your approach would scale there.
48 comments
[ 3.6 ms ] story [ 94.4 ms ] threade.g. I forgot to install a package with --save and I want to update bower.json. With pip I just do pip freeze > requirements.txt
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)
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.
* 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".
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.
To the Bower team's credit though, once they fixed the issue, I have had smooth sailing since.
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.
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.
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).
Check the below linked poll out... http://css-tricks.com/poll-results-cdn-or-local/
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.
I remember thinking it was very odd that the old version of the site said that bower had no dependencies.
no, it doesn't. bower has nothing to do with module loading.
Bower is also (easily) configurable where bower_components will be, whereas I don't think NPM is as easily.
In practice, I do find it much easier to pin dependencies and install from my toolchain's package manager (pip/PyPI).
Have you used Bower? I haven't but I watched a video of some guy speaking of Bower who pretty much said the same thing you did but changed his mind after trying it out.
I haven't tried Bower yet but kept that anecdote in mind and plan to try it to see what all the fuss is about.
From my understanding, a single command will take away all those intermediary steps between deciding to use a library and actually using it. No need to navigate to the project's page, looking for download link, downloading it, extracting and copying to the project directory.
Sounds good in theory to me; just haven't the chance to try it yet myself. Mostly because npm happens to have everything I would have used Bower for.
Try managing a complex single page app with deep dependency graphs and each node in that graph versioning up independently. Not sure how your approach would scale there.