Javascript, Coffeescript, and CSS Minification and Compilation

[jtickle]

We really need to rein in how many CSS and Javascript files get downloaded per page load. We probably won't be able to get away with only one CSS and one Javascript file overall, but maybe, who knows.

I also mention Coffeescript because there's no reason we shouldn't support it. It's a sort of different syntax for Javascript that, in in this issuer's opinion, makes the code easier to read. But it does NOT run straight in the browser [without help, see below] - it has to be compiled to Javascript, but it does generate relatively clean Javascript code. If you're compiling Javascript anyway, seriously consider using Coffeescript instead.

Compilation and minification is somewhat resource-intensive. Compiling and minifying CSS and Javascript once takes almost no time at all, but if you do it on every page load, a certain systems administrator is going to get punchy. Comp/min should happen at the time someone changes the javascript or the CSS on the server side. It should not even happen at all during development mode, and should happen only on install and on update in production mode, generating static, cacheable files that will be read directly by Apache.

I have done a little research on libraries we can use, which I'll outline here:

CSS Compilation:

• http://leafo.net/lessphp/ - tested against Twitter-Bootstrap, works! Does not minify anything; it turns all of the LESS files into one CSS file.

CSS Minification:

• https://code.google.com/p/cssmin/ - Minifies CSS (should be run on the output of lessphp)

Javascript Compilation and Minification:

• https://code.google.com/p/closure-compiler/ - Cloud service on Google App Engine for compiling and minifying Javascript. Pro is that the end-user does not need any extra libraries at all and nothing extra is running on their server, Con is that it's a cloud service and we have to consider that it may change or go away with no notice, and we have to think about what kinds of data are sent over there.
• https://code.google.com/p/minify/source/browse/min/lib/JSMin.php - JSMin reimplemented in PHP.

Coffeescript Compiler:

• https://github.com/alxlit/coffeescript-php - Coffeescript compiler ported to PHP.
• http://coffeescript.org/#scripts - Okay it's not a compiler, but it lets you load coffeescript and run it directly in the browser. I don't recommend this for production use but it might come in handy during development.

Angular.js:

• The only extra compilation concern for Angular code in particular is that it determines which dependencies to inject based on the function signature, and minifaction completely goobers the function signature and breaks Angular. There is a utility called ngMin that turns "inferred dependency injection" into "inline dependency injection" and solves the problem, but has no PHP implementation. Chances are if the developer is using Angular, they already have a npm/yeoman/grunt setup going on anyway and we don't need to worry about it, or they can just use the Inline Dependency Injection Syntax instead and never have any problems.

Everything Minifier:

• https://code.google.com/p/minify/ - Minify does CSS and Javascript and it's all written in PHP. Looks like an all-in-one solution. I haven't tried it out yet.

Let Someone Else Do It:

• https://github.com/kriswallsmith/assetic - Assetic is an asset management library for PHP that takes care of the management of all assets that aren't PHP code (images and such). One thing I like about it is that you can tell it which compiler and minifier it should use, so we don't have to say "lessphp is your only option"; we can include that by default but the end-user can configure it to use node.js utilities or whatever they prefer.

┆Issue is synchronized with this Asana task

[jlbooker]

:+1: from me.

As we do this, I think we should also consider the "modular" way of writing javascript components, and how those get required/added to the page, and have a way phpws modules can inject/include their own javascript files (having them properly minified/complied at some point in the process).

We need to strike a balance between "download all the javascript!!1 (in one big minified file)" and "make tons of requests for each little javascript". Common files and shared libraries can obviously be minified into one file.

My proposal: each module should get one minified js file to be included when that module has content on the page. The code can be stored in many separate files, be compiled/minified once, and at run-time have the minified file requested by the browser. This keeps us from including every modules javascript all at once, but also keeps the number of HTTP requests for js resources limited to something more reasonable.