CODEWITHSUNDEEP
javascriptmaven-2dependenciesmojo
Christopher Hunt
Christopher Hunt

Reputation: 2081

Your thoughts on a proposal to manage JavaScript dependencies

I've recently done a great deal of JavaScript programming in the context of developing a Rich Internet Application. My view at the start of development is pretty much what it is now; JS RIA works but the development tools are lacking.

One tool that I missed in particular was for managing dependencies. What I found was that I ended up with lots of HTML pages declaring all of their JS file dependencies and that this became hard to maintain.

What I'd like to know are your thoughts on a project I've embarked upon: Maven JavaScript Import. My intent is to ultimately release the project as open source but at the moment I'm just tinkering around with it (a great deal has been developed already though).

Declaring dependencies

My thoughts based on using Maven to declare JS files as dependencies. This is how I'd declare a project dependency on jQuery in my pom file:

<dependency>
  <groupId>com.jquery</groupId>
  <artifactId>jquery</artifactId>
  <version>1.4.2</version>
  <type>js</type>
</dependency>

A file that then depends on jQuery has two methods of declaring its dependence:

  1. via an @import statement within a comment block; or
  2. simply declaring a global variable that's required.

Imports

Explicit imports take the form:

/**
 * @import com.jquery:jquery
 */

As you can see the format of the import is <groupId>:<artifactId>. The approach holds the advantage that there is no file/version information declared in the js file that has the dependency. These GAV parameters resolve to artifacts declared in the POM file.

Global Vars

Instead of the above @import, if a dependent file declares variables at the global scope then simply declaring any of those global symbols is all that is required. For example if a file requires jQuery:

var $;

... as $ is of course a global defined by jQuery.

Not all dependencies declare global symbols and that's why @import is proposed as well, but declaring the symbol required is, I think, nice and clean (and JSLint conforming!).

In conclusion

Ultimately the HTML file that requires a JS resource simply declares the immediate one it requires, and not all of its dependencies. My Maven plugin will run through all the JS files (source files and dependencies) and build a symbol tree. Any HTML file including a resource will have script elements injected by the plugin to ensure that all dependencies are included. This will all happen in the magical Maven way when a project's phases are executed e.g. prior to a test, or resources phase executes.

So what do you think? Is this something that you might use in your JS RIA project?

Upvotes: 3

Views: 861

Answers (2)

Jarek Krochmalski
Jarek Krochmalski

Reputation: 97

I think that Bower is the fun & proper way to manage .js dependencies.

Upvotes: 0

Programming Guy
Programming Guy

Reputation: 7461

I agree that JavaScript developers are missing proper dependency management for their projects. I'm not following entirely how a HTML file would import just a single file js dependency and then end up with all the dependencies as well. Are you planning on filtering the HTML files and replacing the script import with an import of your concatenated classes?

If you're interested I've traveled the same road and ended up with https://github.com/ProggerPete/JavaScript-Tools. It's working fairly well for me.

Upvotes: 1

Related Questions