Assets on the Cloud

Assets on the Cloud

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

Cbb9cafe03e785d80a9aa973c5e43c44?s=128

Thanasis Polychronakis

May 02, 2015
Tweet

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