One of the common examples of the limits of Maven and other “strict” build tools was how difficult is to concatenate CSS files together as part of the build. It’s nice to be able to split CSS files up to categorize things but the extra HTTP requests really slow down page loads, so the build should concatenate them back together. What I’ve come to realise though, is that building a custom concatenation script is just another instance where people are reinventing the wheel in build systems, and getting less power as a result.
Instead of using plain CSS and concatenating, use something like LESS to compile the CSS. You can specify the CSS files to import with the usual @import statement and LESS will do the concatenation for you. This is particularly nice since the order of import is specified right in the CSS files, rather than in the build script and you can build full hierarchies of imports. Plus, you get the full power of LESS, with variables, includes etc etc if and when you want to use it. There are a range of CSS compilers beyond LESS and a range of ways LESS can be integrated into a variety of build tools, however I wound up just doing it dynamically with the LESS Servlet. Then it sets headers appropriately and optimises CSS and JavaScript with YUI compressor while it’s at it.
This of course leaves me wondering if something like Google’s Closure could do the same kind of thing for JavaScript files. The question being not just, can Google’s Closure concatenate JavaScript files for me, but rather can it do that plus give me a bunch of other useful tools for free?
ddoctor says:
I haven’t played with it much, but LESS looks really cool.
The only real drama with on-the-fly mashing with servlets is that it’s specific to servlets, and you have to get the HTTP stuff right so browsers will cache – not big issues and probably simpler and cleaner than concatenation.
I’ve been involved in a few js tools along these lines recently – a concatenate/include syntax for js, a run-time ‘require’ statement for js within Rhino, js testing tools and a functional programming library along the same lines as Functional JS and Closure.
Google Closure seems to be going down the path of run-time includes in the browser, rather than concatenations. You can see this within Closure and with their jsapi that I see people loading things like JQuery from. I think this sort of solution scales better for larger web infrastructures, and helps out with some deployment issues.
A few Ephoxians were looking at Closure the other day, but it seemed a little bulky for the small part we wanted. There’s definitely a lot of stuff in there, for sure, but it wasn’t obvious how to just take the bits we wanted. It’s a challenge in an environment like js, which has poor support for modularity, and a high requirement to be lean.
> The question being not just, can Google’s Closure concatenate JavaScript files for me, but rather can it do that plus give me a bunch of other useful tools for free?
CoffeeScript or ObjectiveJ might hit the mark, here. They both compile to JS, similarly to how LESS compiles to CSS.
Adrian Sutton says:
The LESS servlet already gets all the HTTP stuff right so browers cache it – that’s actually why it’s better than flat files (which normally don’t support caching well). Obviously not an option if you’re not using servlets but it also has rails plugins etc so the on-the-fly option is viable in a lot of situations.
As for JavaScript, I really haven’t looked around though the aim is to be “opt-in” for the new stuff. That lets you start of really light weight but take advantage of whatever extra features you need as you need them without needing to do anything extra. ObjectiveJ and CoffeeScript both seem to be pretty huge eco-systems whereas Google Closure has a separate JavaScript->JavaScript compiler you can easily pull and use. I’m not sure that bit actually has a way to do concatenation and it’s unlikely to do it using inline includes. Closure also has a huge eco-system you can pull in and if that’s required to do the modularisation it’s not worth it.
As for writing a library – that’s a suckers job. Someone has to do it, but you want to avoid being that person or you wind up incurring all the costs that everyone else takes advantage of (and comes to you for support). Not that it doesn’t make an interesting hobby or that it’s not worth doing if there is really nothing out there, but I want to focus on my project, not on the tools to build it. Besides, if you build your own you should just do the normal concatenation in a build script since that’s the simplest possible thing.
Pete Royle says:
Perfect timing AJ, I’m just about to integrate a new l&f for my rails app and I didn’t know about LESS!