Webjars: Manage your Web Dependencies with Maven

logo java

No more /src/main/webapp/vendor/jquery.min.js, or /styles/bootstrap.css! Just a Maven dependency like the other libraries. WebJars are client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR (Java Archive) files.

Why?

Maven is great on managing jars, but not so good for static web dependencies like CSS or JS files packaged in a zip. With Webjars you can have AngularJS or Bootstrap in your pom.xml, like you did with Bower on a web project.

How?

maven pom.xml (manage web dependencies)

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.damienfremont.blog</groupId>
  <artifactId>20151007-javaee-webjars</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>

  <dependencies>
    
    <!-- WEB DEPENDENCIES -->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>3.3.5</version>
    </dependency>
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>2.1.4</version>
    </dependency>

    <!-- WEB DEPENDENCIES SERVLET -->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-servlet-2.x</artifactId>
      <version>1.1</version>
    </dependency>

  </dependencies>
</project>

webapp web.xml (declare webjars servlet)


index.html (standard example, use webjars paths)

<!DOCTYPE html>
<head>
  <!-- ADD ALL YOUR CSS DEPENDENCIES HERE... -->
  <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.css">
</head>
<body>

  <!-- DO YOUR THING HERE... -->
  Hello world!

  <!-- ADD ALL YOUR JS DEPENDENCIES HERE... -->
  <script src="webjars/jquery/2.1.4/jquery.js"></script>
  <script src="webjars/bootstrap/3.3.5/js/bootstrap.js"></script>
</body>
</html>

Only pom.xml and web.xml are required to manage web depencies. And you’ll see your web dependencies like the others.

ScreenShot004

Demo

Run this project on your webapp server (Tomcat for example), and test on:

http://localhost:8080/20151007-javaee-webjars/

ScreenShot001

ScreenShot002

ScreenShot003

Conclusion

A good tool, and a big maven repository behind it (org.webjars).

Pro:

  • faster: less work adding a web library
  • safe: no copy/paste error on web libs
  • clean: no more binaries in your source repositories!

Con:

  • perf: a servlet is serving the static files (be sure to put a cache server in front of your app)

You will find a lot more libs at mvnrepository or webjars.org !

ScreenShot005

Sources

https://github.com/DamienFremont/blog/tree/master/20151007-javaee-webjars

References

http://www.webjars.org/

https://github.com/webjars/webjars-servlet-2.x

http://mvnrepository.com/artifact/org.webjars

One thought on “Webjars: Manage your Web Dependencies with Maven

  1. Hello, I made a little experience with webjars, using it to versioning javascript sources in some applications.
    It could be very usefull, but I found a lot of times older versions that I can find directly with git hub… or the are different entries that refer to the same js…
    ie (just to explain): find “clipboard” on webjars.org you can find different entries for the same script, these two refer to the same script, in different ways
    “org.webjars” % “clipboard.js” % “1.5.5”
    2 Files
    zeroclipboard

    “org.webjars.bower” % “clipboard” % “1.5.15”
    7 Files

    Do I miss something?
    /*!
    * clipboard.js v1.5.15
    * https://zenorocha.github.io/clipboard.js
    *
    * Licensed MIT © Zeno Rocha
    */

    or look for “swiper” (iDangerous) you can find 3 entries with different versions…

    I’m a bit confused..

    thanks for your attention 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s