9

I should clarify that I'm not that experienced with front-end tools, so I'm sorry in advance if I'm asking something obvious and stupid.

So far I've been using bower for front-end and npm for server-side, although each of the tools mentioned has its advantages and by that I mean flat dependency management of bower (reduces load from the client) and nested dependency management of npm (helps with versioning), it has become quite cumbersome to use so many tools (webpack, browserify, etc.). I may've been using these tools the wrong way and could've used either of them with some option (not known to me) and have been only scratching the surface, I just took this answer as my rule of thumb and have been doing so ever since I've read it. It would be great if I could reduce at least these two to one.

Lately I've become curious about yarn and with all the hype around it, it seems as if it has been doing a good job and as if it will replace npm completely. As I've read the docs I've discovered the --flat option and that made me wonder if it would be possible to use it as bower replacement as well? If so, does it mean I could have either flat or nested dependency manager (by just having multiple JSON files for back- and front-end)?

I would really appreciate if someone could point me in the right direction!

orustammanapov
  • 1,598
  • 4
  • 24
  • 38
  • 2
    Worth noting that since v3, [npm *tries* to resolve dependencies in a more flat way](https://docs.npmjs.com/how-npm-works/npm3) (also see [What is the difference between npm 3 vs Bower?](http://stackoverflow.com/questions/32087425/what-is-the-difference-between-npm-3-vs-bower)) – Aurora0001 Apr 22 '17 at 18:01
  • @Aurora0001 does it mean bower has no use anymore (or at least be replaced by yarn/npm for the most tasks)? Thanks for the links by the way! – orustammanapov Apr 22 '17 at 19:13
  • 1
    The Bower project has deprecated itself, and now recommend moving to yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/. – jwatkins Apr 20 '18 at 15:13

2 Answers2

9

It depends on your exact use case, but... probably.

Currently, the major trend seems to be towards module bundlers such as Webpack and Browserify (and hence either npm or Yarn) and away from Bower. You can read an excellent overview of the situation at NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack, along with some reasons why you might want Webpack instead of Bower.

At the minute, you're probably using HTTP, where it works out faster to have one JavaScript bundle file rather than lots of source files (as would occur with Bower). That's why Webpack and Browserify are so popular (among other reasons) — they should increase performance and simplify development a lot.

Side note: HTTP/2 will diminish the value of module bundling, because multiple requests will become far less costly. See What is the value of using Webpack with HTTP/2 for a more detailed description of the issues involving HTTP/2.

If you use npm or Yarn, it shouldn't really matter if the dependencies are nested—your frontend dependencies will all be bundled anyway with Webpack/Browserify, so the main cost of using nested packages is that it takes up more space and more download time.

Since npm v3 and Yarn can do flat installs, there shouldn't be any issues with that anyway. In short: you probably can do it, and many other people are doing exactly that.

Community
  • 1
  • 1
Aurora0001
  • 10,827
  • 5
  • 47
  • 50
  • The Bower project has deprecated itself, and now recommend moving to yarn: bower.io/blog/2017/how-to-migrate-away-from-bower. – jwatkins Apr 20 '18 at 15:17
2

In recent days, there is an upward trend in the popularity of Yarn and its mainly due to couple of things different from npm.

One, it’s 100% deterministic i.e if you run yarn from any state, any time, 1000x times, it will still work the same way all the time. npm’s installs are nondeterministic. If you run it from various states, it will install different ways.

Yarn does some better caching too. In fact, it does it so well you’ll see a significant reduction in your install times. You can see 10x reduction in install times for big application.

Yarn also locks down your dependencies by default. It’s possible to do this with an npm shrinkwrap command but if you’ve ever had to maintain one of those, it can be messy.

arvindsc
  • 137
  • 5