An easier way to keep your JavaScript libraries up to date

There really needs to be an easier way to manage JavaScript dependencies for small project than using Bower.

When I first heard of Bower, I really, really wanted to love it. In theory Bower sounds like the real deal:

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

Bower is optimized for the front-end. Bower uses a flat dependency tree, requiring only one version for each package, reducing page load to a minimum.

Unfortunately – it’s not how it works in practice. Sure, bower finds packages for me, but that’s about it. After I’ve downloaded the packages, I have no idea where the files might end up in, what are they going to be called, how to include them, so after the package is downloaded – you’re on your own, bower just calls in quits. Even tools like gulp-bower or grunt-bower don’t help all that much. No standardized way to get an unminified version or a file. Sometimes you can guess, other times you can’t.

But the worst part, for me – bower doesn’t update the scripts properly. At first, I was very confused about how updating works in Bower, and it looks like I’m not the only one. Looks like nowadays you can update the scripts, but major version updates are still a pain in Bower, and the argument for it, in my opinion is very weak.

I’m not going to go into how the updating in bower actually works, and to be perfectly honest, I don’t care about that all that much anymore. What I’m looking for is speed and ease of use.

Workflow incompatibility

I know, there is an ocean of people who love bower. But I never managed to fit Bower in my workflow. I don’t really need to think about dependency tree in a standard way. Wordpress dictates the version of jQuery and underscore.js that I’m supposed to use.

All of JavaScript libraries that I’ve used in my life, with a few exceptions ( I’m looking at you desandro ), have every little thing built right in. In many cases, even a jQuery shim.

Sure – that’s a lot of overhead, and it’s not ideal.
An ideal tool would be like Bower that people would trust, and everyone could depend on each others snippets, shims, plugins etc., but at the moment, it looks like a very, very distant utopia. Everyone has their own workflow, standards, preferences.  We’re still debating on spaces vs tabs after all.


A simple solution for simple folks

I’m a simple man, looking for a plain simple solution.
I don’t need “built-in” security that prevents automatic major version upgrades. If a problem comes up because of a library update – I want to address it ASAP. I just want the latest version of the libraries I’m using.

So I came up with a simple workaround with Gulp.js.

Gulp.js to the rescue

gulp = require 'gulp'
download = require "gulp-download"
rename = require 'gulp-rename'

gulp.task "getlibs", ->
    ### External Libraries & Their URLs ###
    external_libs =
        photoswipe: ""
        photoswipe_ui: ""

    for key, url of external_libs
        console.log "Downloading #{key} from URL: #{url}"

        download( url )
            .pipe( rename( basename: key ) )
            .pipe( gulp.dest( 'libs/' ) )

In external_libs add your libraries and the URL to pull them down from and that’s it! If you prefer – you can keep it in a .json file, but this works perfectly fine for me.

Run gulp getlibs in your terminal and get the latest version of all your libs! Add version management ( like Git ) to your project, and you’ll always be aware of all changes in the libraries you use. Dead simple.