Zohar Arad. © 2014
I only do the front-end. I'll use some automation for pre-processing and possibly building and optimising. Once finished, I hand off the project to the client.
But... what about deployment, cache-busting, GZipping, CND?
For the sake of development speed and separation of concerns, the backend is only an API server. It doesn't do any FEDdy stuff. That's the FED's job (or the browser's).
So... even though your backend supports templating, pre-processing and dependency management, the FED should just write their own asset-management code?
RequireJS is awesome! Awesome I tell you. It lets me defined dependencies, packages and helps me ensure my code is self-contained! It even has a build system with a very catchy name.
Right. But you still have to manually pre-process, cache-bust and GZip your build.
Our project has very specific requirements that aren't fully addressed by community tools, so I wrote a complete asset manager in Clojure since it's the fastest language on earth. Only I know how it works, but rest assured it works flawlessly (and very quickly, in parallel threads, on our CI server).
Right. So you wasted all that time on a proprietary solution to a problem everyone shares.
I still haven't gotten around to convincing my boss we should add some asset-management capabilities to our code, so meanwhile I just include my CSS and JS as they are and we serve them from Apache.
| Automatic Solution - Use existing tools | |
|---|---|
| Ruby | Sprokets, Jammit |
| Node.js | connect-assets, connect-mincer |
| PHP | Sprockets-PHP, Bonfire Assets (no cache busting) |
| Python | webassets |
| Manual Solution - Gulp example | |
|---|---|
| Pre-processors | gulp-sass, gulp-less, gulp-coffee |
| Templates | gulp-jaded, gulp-handlebars, gulp-assetpaths |
| Optimisation | gulp-minify-css, gulp-uglify, gulp-concat, gulp-tar, gulp-gzip |
| Cache-busting | gulp-rev, gulp-rev-collector, gulp-rev-all |
| CDN | gulp-awspublish, gulp-cloudfront, deploy-azure-cdn |
Our deployment system needs to painlessly support:
| Ruby | Capistrano, Mina |
|---|---|
| Python | Fabric |
| Node | Deploy, Flightplan |
| Bash | Roll your own, Git (Just Kidding) |
| PHP | Long rope and a noose |
You should always prefer to use existing tools. Moreover, you should always prefer to combine backend framework support (like connect-assets/mincer) with a solid deployment tool (like Fabric).
But... in case you can't here's a detox plan.
Pre-compile / Pre-process → Concatenate & Minify → Save →
MD5 file content → Add MD5 value to file-name →
Create Cache Manifest →
Update templates with new file-names →
GZip → Upload to CDN
If you're a real hero, run MD5 to CDN steps on images too (use MD5 of Base64 value for content diffing)