• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Bower vs Browserify

Front End Development · November 3, 2014

For some, confusion stems around package managers for the front-end, all vying for developer love. In the field there are three well-known package managers that stand; Bower, Component and NPM (Node Package Manager).

Bower and Component are package managers strictly for the front-end, although Node modules exist to bring them in and use them as Node modules.

The third, NPM, started out as Node only modules, but through the community started going in all kinds of directions (including front-end tooling)

Two different approaches, but the same end goal (sorta): Bower and Browserify.

Browserify

Essentially what Browserify allows you to do is bring Node modules into the browser. An area where Browserify is a popular choice is game development. Because of the sheer amount of great game libraries for Javascript.

The one major downside is that NPM + Browserify only packages Javascript files, not CSS files or anything else. This means that its uses are quite limited if say for example you want to import Foundation, jQuery UI or any other library that has a mixture of JS, CSS, images or other assets.

The great thing about Browserify is it allows you to write more modular Javascript. You can break out your Angular directives, controllers or whatever and include them using a require(). Browserify will then bundle it up and make it usable on the client-side.

When it comes to a Browserify package, it needs to be written in CommonJS format and then added to NPM. While the list is high, not all libraries are written in this format which means if you want to bring a dependency in, you need to rewrite it.

If you are however using Browserify to manage your own project Javascript, you don’t need to worry about adding it into NPM, simply install Browserify and then write your modules using CommonJS format and you are good to go.

Bower

Strictly a front-end only package manager. Extremely flexible in that it allows you to install Github repositories as package sources if they are not listed on the official Bower repository.

It handles modules regardless of what they contain. Whether that be; CSS, HTML, images or Javascript files. You also get the benefit of separating dependencies on the back-end from the front-end as well.

If the purpose of the framework or library you are wanting to include is mostly for front-end purposes like jQuery or Bootstrap, then sticking with Bower or equivalent is a good idea.

The upside of picking Bower, is that it works really well with task runners like Gulp and Grunt. You are able to achieve the same things as Browserify can (only for client-side libraries) through a few simple tasks you can find in various repositories and gists.

Conclusion

The rule of thumb for picking one or the other is assessing your needs. Are you working on a project that would benefit or needs to work closely with the back-end? The shared code approach Browserify gives you might be best.

If you need more than client-side libraries or like the way Node package work, it is also another added advantage.

If you just need to add a few libraries or a framework to make your front-end all snazzy and move a few elements around the page, style the scrollbars or whatever it is you are doing that requires heavy DOM manipulation and interaction, choose Bower. Using Browserify + NPM for client-side libraries feels dirty and wrong in my opinion.

It is also worth noting that it is acceptable to use both Bower and Browserify in the same project. Using Bower for components with a mixture of CSS and other static assets, then using Browserify for the heavier JS focused code.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ethan
Ethan
8 years ago

I don’t think Bower and Browserify are comparable tools. Bower should be compared to npm + package.json.
Browserify help you to resolve js library dependency and package all js files into one big js file. Can you do that with Bower?

0
Dan Dascalescu
Dan Dascalescu
7 years ago

Actually, npm can handle HTML and CSS just fine. From an npmjs blog post:

2. “npm is only for server-side JavaScript!”

Also not true. Your package can contain anything, whether it’s ES6, client-side JS, or even HTML and CSS. These are things that naturally turn up alongside JavaScript, so put them in there.

0
Thomas
Thomas
7 years ago

have a look at webpack for bundling CSS, fonts and images

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz