51

Single Page Javascript Application

I have built a sophisticated ajax-driven single page webapp that uses a RESTful backend web service serving JSON. The javascript is split into many different files, each file representing some sort of feature or component.

While the service has been in alpha testing, I've just be serving all these files separately without minification. But now that I'd like to launch a beta version, I really need to combine files, minify them, and version them. I want to add this to my build process, using Maven.

Javascript File Types

I'm using the following "types" of javascript files, of which #3 and #4 are my concerns:

  1. External files, such a jquery and jquery-ui served from the Google CDN. Rarely change these versions, can be handled manually.
  2. Jquery plugins that I'm hosting myself, such as fullcalendar or ui-layout. Again, I rarely update these to new versions and can handle it manually.
  3. Application-wide javascript code. Custom javascript that is spread across many files and can change occasionally. All of these files need to be loaded for the app to work.
  4. Feature-specific javascript code. Custom javascript that is loaded on demand when a specific feature is requested. This code can change quite frequently and is not loaded at startup.

Build Objectives

I'd like to do the following during my build process:

  • Concatenate all type 3 javascript files together, minify them, and save as a single file with a version number. For instance: app-2.0.6.min.js, where 2.0.6 is the maven project version.
  • All type 4 files should be individually minified and saved as separate files with version numbers in the name. For instance: feature-abc-56ab32de29.min.js, where 56ab32de29 is the version number of that specific file.
  • Update HTML files with <script> tags to point to javascript files with the correct version numbers.
  • Update Javscript files that load type 4 feature javascript files to point to the right versions.

Questions

  • Is there a maven plugin that will assist with the concatenation?

  • Is there a maven plugin that will assist with the minification? Ideally, I'd like to use Google Closure Compiler, but would work with others if simpler.

  • Is there a maven plugin that will assist with the versioning?

  • Is there a way to have the type 4 javascript files have independent version numbers? Ideally, if a file doesn't change between version 2.0.5 and 2.0.6, there is no need for users to download a new version and their cached version would work fine. I'm using GIT for source control, so would there be a way to use a file's GIT hashcode for versioning?

  • Is there a solution that will compress the javascript that is inline in regular HTML files without killing the HTML?

  • Is there a solution that will compress and version my CSS files as well?

Improve this question
4
  • 3
    Have you given the accepted answer a try? How did this all turn out for you? I'm working on a project that is identical to yours in high level architecture (I guess this is a common sense paradigm nowadays). Commented Nov 28, 2010 at 7:28
  • @Ates: actually, no. I haven't tried either answer yet. Got busy with other aspects of the project. Hope to get to this sometime soon. If you try them, out, could you post your experiences? Commented Nov 28, 2010 at 8:10
  • I found a Rails specific tool that looks to do much of what I want. Of course, it isn't a maven tool, and I'm not using Rails, but it could be worth checking out: github.com/documentcloud/jammit Commented Dec 4, 2010 at 4:10
  • 1
    @Ates: I have tried yuicompressor-maven-plugin and it works sweetly. It also has a jslint goal which you can use to validate your js files. Commented Apr 1, 2011 at 13:04

3 Answers 3

Reset to default
22

Take a look at the yuicompressor-maven-plugin. It can aggregate various js (as well as css) files as well as minify and obfuscate them.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the pointer. Any thoughts on versioning the files?
Use the suffix parameter of the yuicompressor-maven-plugin. For example <suffix>-${version}.</suffix>.
Hi Tauren, for versioning you could take a look at stackoverflow.com/questions/27856091/…
11

Here's a brand-new Maven plugin that targets this task: http://mojo.codehaus.org/webminifier-maven-plugin/

Improve this answer

1 Comment

Your link is broken. Is there any newer alternative ?
3

I've successfully incorporated RequireJS optimization (uses Google Closure compiler + does concatenation) in a Maven environment (for single page JS app). See my question and the follow up answer for details: RequireJS Compilation in Maven project with external JS dependencies

You could probably expand on that to version and archive the minified JS artifacts.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.