Slide 1

Slide 1 text

Assets on the Cloud Assets on the Cloud

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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); };

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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/" } }

Slide 12

Slide 12 text

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'] } },

Slide 13

Slide 13 text

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');

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Questions? Thanasis Polychronakis @thanpolas