WebJars

A few months ago I launched Bower WebJars which provides a way for anyone to deploy Bower packages into Maven Central through WebJars. Since then 539 packages have been deployed! Today I’ve added NPM WebJars which is built on the same foundation as Bower WebJars but for NPM packages.

Give it a try and let me know how it goes. If you are curious about the changes to make this happen, check out the pull request.

WebJars has been my hobby project for almost 3 years and thanks to tons of help from the community the project now has almost 900 JavaScript libraries in Maven Central. In February 2015 there were over 500,000 downloads of WebJars! Up until now all of the WebJars have been manually created, deployed, and maintained. Today I’m happy to launch Bower WebJars, an on-demand service that allows users to deploy new WebJars from Bower packages.

The typical method of adding JavaScript and CSS libraries (e.g. jQuery, Bootstrap, and AngularJS) to Salesforce environments is to locate a library’s download, download it, then upload it to Salesforce, then figure out the structure of the files so that you can use them from Visualforce. Using WebJars as a basis, I’ve created an easy way to add libraries to Salesforce, called Force WebJars.

Here is a quick demo:

Give it a try and let me know how it goes!

This week I will be presenting twice in San Francisco at SF Scala:

• Thursday April 10: Introducing sbt-web - A Node & WebJar Compatible Asset Pipeline for the Typesafe Platform

  sbt-web is a new web asset pipeline for Play Framework and other sbt-based frameworks. It can pull dependencies from both Node and WebJars. The pipeline covers all of the phases of client-side development, including: linting, compiling (CoffeeScript, LESS, etc), minification, concatenation, fingerprinting, and gzipping. This session will give you an introduction to sbt-web and show you how to get started using it.

WebJars were created to work well with Content Deliver Networks (CDNs) and now thanks to jsDelivr there is a great public CDN hosting all of the WebJar assets! jsDelivr is “a free super-fast CDN for developers and webmasters.” What a perfect match for WebJars!

Here is how it works… Just prefix //cdn.jsdelivr.net in front of your WebJar asset URLs. That’s it! For instance, if the URL you setup to jquery.js is /webjars/jquery/2.1.0/jquery.js then to use the jsDelivr CDN the URL would be: //cdn.jsdelivr.net/webjars/jquery/2.1.0/jquery.js

WebJars Locator now has direct support for RequireJS! For a while the WebJars Play helper library has had support for RequireJS which was great but it had a few issues and wasn’t useful outside of Play.

There is now a org.webjars.RequireJS.getSetupJavaScript(String webjarUrlPrefix) method that produces the RequireJS configuration for the WebJars you are using. If you are using only the jQuery WebJar then that JavaScript configuration looks like:

var webjars = {
    versions: { 'requirejs': '2.1.10', 'jquery': '2.1.0' },
    path: function(webjarid, path) {
        return '/webjars/' + webjarid + '/' + webjars.versions[webjarid] + '/' + path;
    }
};

var require = {
    callback: function() {
        // no-op webjars requirejs plugin loader for backwards compatibility
        define('webjars', function () {
            return { load: function (name, req, onload, config) { onload(); } }
        });

        // all of the webjar configs from their webjars-requirejs.js files

        // webjar config for jquery
        requirejs.config({
            paths: { "jquery": webjars.path("jquery", "jquery") },
            shim: { "jquery": { "exports": "$" } }
        });
    }
}

This sets up the paths for RequireJS modules in WebJars and pulls in any other custom configuration from the WebJar’s RequireJS config. To use this setup JavaScript with RequireJS you can add something like the following to your web page:

A little over a year ago I launched WebJars with the goal of bringing some simplicity and sanity to how client-side JavaScript and CSS libraries are used in the JVM ecosystem. Since then WebJars has grown to 237 libraries and around 40,000 downloads per month! Check out the stats from Maven Central:

Note: It seems that some of the download stats for September are counted as October since averaging the two produces a more likely curve.

Check it out: webjars.org

Back in April I started an experiment called “WebJars” to see if it would be useful to package web libraries (JavaScript, CSS, etc) as Jar files. WebJars allow you to declaratively set client-side application dependencies just like we do for the server-side. A nice side effect of this is transitive dependencies. For instance, if you specify Bootstrap 2.2.1 as a dependency, then you automatically also get jQuery 1.8.2 as well. WebJars also make it easy to know what versions of web libraries are being used since not all web libraries use versions in their naming conventions.

Last week I announced the WebJars project that allows you to specify your web libraries (JavaScript, CSS, etc) as dependencies in your Java web applications. With some help from Jeremy Grelle I was able to get a simple WebJars Spring MVC example working.

First you will need to add the WebJars repository to your build. For Maven, just add the following to your “pom.xml” build file:

<repositories>
        <repository>
            <id>webjars</id>
            <url>http://webjars.github.com/m2</url>
        </repository>
    </repositories>

Then add a WebJar dependency, like Twitter Bootstrap:

Update: I’ve created a Spring MVC WebJars example.
Update 2: Ukrainian translation here - http://softdroid.net/vvedennya-webjars by Eclipse Android.
Update 3: WebJars.org has been officially launched! Learn more.

Our web apps are using more and more web libraries like jQuery, Backbone.js and Twitter Bootstrap. The traditional way to use those libraries is to locate & download the JavaScript and CSS source then just copy it into a project. To me this resembles how we used to just copy JAR files into a project’s WEB-INF/lib dir. But why not do with web libraries like we now do with Java libraries and specify them as managed dependencies? This allows us to declaratively set the version, use a consistent version across an application, and easily deal with transitive dependencies. Then we just need web frameworks that can serve static assets from JAR files and we are good to go! Luckily Play 2 and Dropwizard both have out-of-the-box support for this. So I decided to give it a try…