How to build a JavaScript project with Maven

Prologue

This year’s buzzword has to be ‘HTML5’. Everywhere I go, people are making a fuss out of building HTML5 ‘applications’ (for the desktop too, now, with Windows 8’s WinRT). However, I see HTML5 more blandly as ‘HTML/JavaScript’, and I make this pairing consciously, because in my opinion, there is no HTML5 without JavaScript and vice versa. Therefore it’s important to know and master the intricacies of JavaScript before boasting your “HTML5”-skills to friends, colleagues and the world at large (using a <header> tag doesn’t count as a skill). Don’t be fooled by JavaScript’s supposed simplicity. It’s just that simplicity (read: lack of OO principles) that makes it difficult to use for building maintainable and enterprise-grade software. Languages like Java, C#, and even ActionScript (JS’ cousin), provide the developer with a degree of standardization and structure that is severely missed in the JavaScript world.

From my point of view, JavaScript has two weaknesses: its loose type system and its prototypal inheritance model. I know many people don’t agree and opine that the points I just made are actually strengths. Point taken. It does have a couple of things going for it: ubiquity and a low barrier to entry.

Tacking a build process onto JavaScript, with Maven

If you’re used to a more object-oriented development language/platform, with classes, interfaces, inheritance, strict typing, unit and integration testing, this all looks very scary. Many enterprise developers seek the assistance of Maven, Ant or other tools of that ilk to manage framework dependencies, build and test processes, and code quality metrics. And there’s no reason why this can’t also be applied to JavaScript development.

Yes, JavaScript can be tamed, you heard it right. With a limited amount of effort, we can let Maven take care of the following:

  • compile and validate your code with JSLint
  • compress and obfuscate your .js files in one fell swoop
  • combine all of your compressed .js source files into a single JavaScript module
  • integrate with the Jasmine BDD test framework for unit/integration testing of your JS code
  • code quality reporting with JSLint
  • generate JSDoc documentation

Prerequisites

Maven is a Java-based tool, so you’ll need to get the latest Java JDK from Oracle. I’m still using JDK 6, but I guess JDK 7 would do as well. Other than that, you’ll need to get the Maven 3 binary and unzip it somewhere. For your convience, you may want to consider adding it to your path (Windows, Mac, Ubuntu Linux). Fire up a text-editor (I like NetBeans for pom.xml and JavaScript editing) and a command-line window. You’re good to go!

The pom.xml config 

Here’s the full pom.xml configuration file. It’s currently still a work in progress, but it implements all of the features I described above. In the subsequent section I’ll provide more information on every section of importance.

In depth 

Same file, with some extra comments.

 

I’m continuously looking for things to add, so any suggestions are welcome. Also, I’m maintaining this project on BitBucket, here

Advertisements

3 thoughts on “How to build a JavaScript project with Maven

  1. @John, I corrected the URL, thanks for pointing that out! I'm aware of the fact that the latest revision on BitBucket may not compile any longer, however, I placed a tag called "pom-aggregation" some while ago (https://bitbucket.org/aceontech/jsrails/src/0b8f3a7b17b0). If you update to this revision it should be okay. Also, it's still very early days, so most of the stuff you'll find in the BitBucket project are still in flux. Thanks a lot for checking things out though! If you have any suggestions, you're always welcome to post them on the BitBucket tracker, or as a comment on this site. Kind regards,aceontech

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