Using WebJars for Assets Management in JavaScript Projects

Using automatic build tools for dependency management is best practice in Java world and usage of tools such as Maven has been proven by the years.

But can we utilize existing Maven knowledge of Java dependencies management for JavaScript projects. Luckily, some Java and JVM frameworks (like Grails or Play2) provided their own way of dealing with static resources.

But in most common situations, you don’t have lots of options for deploying your application:

  • keep framework artifacts inside war (minified or not). Not very convenient option if you have lot of small assets in like in Ext JS.
  • use library from CDN (common purposes, like Google or Yandex, or vendor-provided, like Sencha’s Ext JS CDN). Also not very convenient b/s you need to have persistent internet connection during development process.
  • use webJars

Wait, but what is webJars? A couple weeks ago James Ward announced a webJars project to help manage JavaScript dependencies into Java projects. He created maven repository and included few popular libraries (jQuery, Backbone.js, Twitter Bootstrap).

Also he created sample spring mvc application to demonstrate how to use this webjars in real project.

If you can’t find library what you using in repository you can submit new webjar request via Github Issue Tracker.

Today I submitted request for adding Ext JS webjar. Also I provided use case and POC based on James’s spring app demo. You can find that Ext JS webJar usage with spring web app in extjs branch of repository.

The idea behind the scenes if pretty obvious – Spring MVC maps the requests from a given URL to files in the classpath (inside jar). Simple, isn’t it?

Besides, some IDE’s (like Intellij IDEA) can recognize js libraries even inside jar file. But again, for development purposes you can still have copy of framework inside of your project workspace. At this point, you must exclude from ready for deployment artifacts somehow, e.g. using build script. Also, one of benefits of webJars approach – you can maintain different sets of artifacts – debug, release, minified and etc – using maven dependency scope.

Please go to the mentioned github projects, fork it, play around, and share your thought in comments below, and let me know what you think about it!.

If you’re looking for a JavaScript and Ext JS training, please visit our Web site for up-to-date information about the scheduled classes. By the way, two days Ext JS workshop is coming up

Viktor Gamov