Assets on the Cloud

A workflow to upload and fetch all your assets from the cloud

Transcript

1. Assets on the Cloud Assets on the Cloud
2. Static Assets Static Assets Images Javascript files CSS files Fonts Sprites Icons
3. Meet AssetFlow Meet AssetFlow /verbling/assetfow /verbling/assetfow
4. General Overview General Overview Copy & Rename all static assets Create Manifest File Upload to S3 AssetFlow is a set of Grunt Tasks
5. 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
6. 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
7. In your template In your template The Node.js Library Initialize var assets = require('assetflow')(); assets.config({ manifest: __dirname + '/../../manifest.json' });
8. 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
9. 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); };
10. The Rendering The Rendering The Node.js Library So the template will render as such link(rel="stylesheet", href="#{ asset('/styles/main.css') }") <link rel="stylesheet" href="https://s3.amazonaws.com/.../styles/main-709e4.css"> <link rel="stylesheet" href="/styles/main.css"> On Production On Development Set Infinite Timeout on S3 CACHE BUSTING
11. 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/" } }
12. 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'] } },
13. 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');
14. The SASS Build Flow The SASS Build Flow Run Assets Replace Task Run SASS preprocessor Minify the produced CSS
15. 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
16. Cons Cons Complex Setup ​But one time Larger build times (5"-30" depending on case) No libraries for all languages; yet
17. Thank you (here is where you applaud) Thanasis Polychronakis @thanpolas
18. Questions? Thanasis Polychronakis @thanpolas