Assets on the Cloud Assets on the Cloud

Static Assets Static Assets Images Javascript files CSS files Fonts Sprites Icons

Meet AssetFlow Meet AssetFlow /verbling/assetfow /verbling/assetfow

General Overview General Overview Copy & Rename all static assets Create Manifest File Upload to S3 AssetFlow is a set of Grunt Tasks

The Copy & Rename Task The Copy & Rename Task The "assets" task will: Scan all the defined assets. Generate MD5 hashes for each asset. Create the manifest.json file. If a manifest file exists, it will compare the hashes. Copy all new or updated assets and rename them with their MD5 hash to a temporary location. /front/static/app.js /tmp/front/static/app-h5rt2.js

The Upload to S3 Task The Upload to S3 Task The "assetsS3" task will: Read the manifest.json file Perform HEAD MD5 comparisons Upload all new or updated assets to S3

In your template In your template The Node.js Library Initialize var assets = require('assetflow')(); assets.config({ manifest: __dirname + '/../../manifest.json' });

Node.js Setup and Use Node.js Setup and Use The Node.js Library Setup app.locals.asset = asset; link(rel="stylesheet", href="#{ asset('/styles/main.css') }") express.js header.jade

Use local files on Devel Use local files on Devel The Node.js Library Development Environment /** * Wrapper for "assets.asset", will serve same string if on devel. * * @param {string} path The path of the asset. * @return {string} Proper path to fetch asset. */ assetflow.asset = function(path) { if (globals.isDev) { return path; } return assets.asset(path); };

The Rendering The Rendering The Node.js Library So the template will render as such link(rel="stylesheet", href="#{ asset('/styles/main.css') }") On Production On Development Set Infinite Timeout on S3 CACHE BUSTING

Going Low Level Going Low Level The x-lang Library Just parse the manifest.json { "/styles/main.css": { "mtime": "2015-04-27T17:08:03.000Z", "absPath": "temp/.../main-a7b60.css", "relPath": "/styles/main-a7b60.css", "hash": "a7b60a4d0d5ff1870ba35c5c19344706", "gzipHash": "7d49ad74d42774fb1394633611decb31" }, "__conf__": { "cdnurl": "https://s3.amazonaws.com/.../s2/" } }

The Replace Task The Replace Task Suppose you use SASS and want to require a font @font-face { font-family: 'FontAwesome'; src: url('__ASSET(/fonts/fontawesome.eot)'); } The 'assetsReplace' task sass: { options: { key: '__ASSET(%)' }, files: { 'temp/sass/': ['front/styles/**/*.scss'] } },

Rendering Rendering Original src: url('__ASSET(/fonts/fontawesome.eot)'); To Production: src: url('https://s3.amazonaws.com/... /fonts/fontawesome-709e4.eot'); To Development: src: url('/fonts/fontawesome.eot');

The SASS Build Flow The SASS Build Flow Run Assets Replace Task Run SASS preprocessor Minify the produced CSS

Pros Pros Single hit on your webserver All static assets are loaded from S3 Can easily plug a CDN on top of that Infinite Cache timeout per asset Low level cache busting even for a single file

Cons Cons Complex Setup ​But one time Larger build times (5"-30" depending on case) No libraries for all languages; yet

Thank you (here is where you applaud) Thanasis Polychronakis @thanpolas

Questions? Thanasis Polychronakis @thanpolas