Painless Node.js Asset Management with Connect-Assets @ Nodevember

connect-assets is a transparent asset management package for node.js: it compiles, concatenates, minifies, and fingerprints your JavaScript, CSS, fonts, images, and the like to ensure that your site always looks its best, even when you deploy updates to cached files.

As the maintainer of the package, I’ll give a bit of history on the module and talk about why you’d want to use connect-assets in your next web application. We’ll go through the basics of properly serving assets, write (live-code?!) an Express application using connect-assets, and make sure you leave with your questions answered.

Transcript

1. connect-assets
   @adunkman
   Painless Asset Management with
   

   View Slide

2. ndrew
   A Dunkman
   

   View Slide

3. ADunkman
   twitter.com /
   github.com /
   

   View Slide

4. ADunkman
   twitter
   github
   Harvest
   

   View Slide

5. ADunkman
   twitter
   github
   Harvest
   Maintainer connect-
   assets
   

   View Slide

6. Agenda
   

   View Slide

7. Agenda
   Background and History
   

   View Slide

8. Agenda
   Background and History
   Demo connect-assets
   

   View Slide

9. Agenda
   Background and History
   Demo connect-assets
   Possible Configuration
   

   View Slide

10. Agenda
    Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

11. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

12. Asset
    

    View Slide

13. Compile
    Combine
    Minify
    Fingerprint
    Serve
    

    View Slide

14. fingerprint
    

    View Slide

15. fingerprint
    Why
    ?
    

    View Slide

16. clear your cache
    

    View Slide

17. “ ”
    clear your cache
    Every time you say
    your process is broken.
    

    View Slide

18. Sprockets
    

    View Slide

19. rails
    asset pipeline
    

    View Slide

20. asset pipeline
    

    View Slide

21. asset pipeline
    August 31, 2011
    

    View Slide

22. asset pipeline
    August 31, 2011
    August 30, 2011
    

    View Slide

23. lets go!
    

    View Slide

24. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

25. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

26. var express = require("express");
    var app = express();
    app.listen(3000);
    

    View Slide

27. var express = require("express");
    var app = express();
    app.listen(3000);
    app.use(require("connect-assets")());
    

    View Slide

28. Demo
    

    View Slide

29. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

30. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

31. Directives
    

    View Slide

32. //= include shared-variables
    Directives
    

    View Slide

33. //= include shared-variables
    //= require jquery
    Directives
    

    View Slide

34. //= include shared-variables
    //= require jquery
    //= require_tree views
    Directives
    

    View Slide

35. //= include shared-variables
    //= require jquery
    //= require_tree views
    //= require_directory templates
    Directives
    

    View Slide

36. //= include shared-variables
    //= require jquery
    //= require_tree views
    //= require_directory templates
    //= require_self
    Directives
    

    View Slide

37. //= require closure-start
    Directives
    //= require closure-end
    var secrets = function () {
    do_super_secret_stuff();
    };
    //= require_self
    

    View Slide

38. Directives
    (function () {
    //= require closure-end
    var secrets = function () {
    do_super_secret_stuff();
    };
    //= require_self
    

    View Slide

39. Directives
    (function () {
    //= require closure-end
    var secrets = function () {
    do_super_secret_stuff();
    };
    //
    

    View Slide

40. Directives
    (function () {
    var secrets = function () {
    do_super_secret_stuff();
    };
    //
    })();
    

    View Slide

41. app.use(require(“connect-assets”)({
    }));
    Configuration
    

    View Slide

42. app.use(require(“connect-assets”)({
    }));
    Configuration
    paths: [“assets/js”, “assets/css”]
    

    View Slide

43. app.use(require(“connect-assets”)({
    }));
    Configuration
    helperContext: global
    paths: [“assets/js”, “assets/css”] ,
    

    View Slide

44. Stylus .css.styl stylus
    LESS .css.less less
    SASS .css.sass node-sass
    Language Extension NPM Package
    

    View Slide

45. CoffeeScript .js.coffee coffee-script
    Coco .js.co coco
    Language Extension NPM Package
    

    View Slide

46. Haml-Coffee .jst.hamlc haml-coffee
    Handlebars .jst.hbs handlebars
    Jade .jst.jade jade
    Language Extension NPM Package
    

    View Slide

47. EJS .*.ejs ejs
    ECO .*.eco eco
    Language Extension NPM Package
    

    View Slide

48. EJS .*.ejs ejs
    ECO .*.eco eco
    Language Extension NPM Package
    Stylus .css.styl stylus
    LESS .css.less less
    SASS .css.sass node-sass
    CoffeeScript .js.coffee coffee-script
    Coco .js.co coco
    Haml-Coffee .jst.hamlc haml-coffee
    Handlebars .jst.hbs handlebars
    Jade .jst.jade jade
    .*.ejs ejs
    eco
    

    View Slide

49. Why should you use connect-assets?
    

    View Slide

50. Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    

    View Slide

51. Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    You shouldn’t need to clear
    browser caches, ever.
    

    View Slide

52. Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    You shouldn’t need to clear
    browser caches, ever.
    Your assets should be
    easy to debug in development.
    

    View Slide

53. Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    You shouldn’t need to clear
    browser caches, ever.
    Your assets should be
    easy to debug in development.
    You should optimize HTTP requests
    and file size in production.
    

    View Slide

54. Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    You shouldn’t need to clear
    browser caches, ever.
    Your assets should be
    easy to debug in development.
    You should optimize HTTP requests
    and file size in production.
    You should be able to use
    the best language for the job.
    (SASS, Less, Stylus, CoffeeScript, etc)
    

    View Slide

55. Choosing a language that compiles to
    CSS or JavaScript shouldn’t introduce
    extra build/development steps.
    Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    You shouldn’t need to clear
    browser caches, ever.
    Your assets should be
    easy to debug in development.
    You should optimize HTTP requests
    and file size in production.
    You should be able to use
    the best language for the job.
    (SASS, Less, Stylus, CoffeeScript, etc)
    

    View Slide

56. Choosing a language that compiles to
    CSS or JavaScript shouldn’t introduce
    extra build/development steps.
    You shouldn’t need to write
    any code to do all of this.
    Why should you use connect-assets?
    Your assets should leverage HTTP
    caching as much as possible.
    You shouldn’t need to clear
    browser caches, ever.
    Your assets should be
    easy to debug in development.
    You should optimize HTTP requests
    and file size in production.
    You should be able to use
    the best language for the job.
    (SASS, Less, Stylus, CoffeeScript, etc)
    

    View Slide

57. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

58. Time for Answers
    Background and History
    Demo connect-assets
    Possible Configuration
    

    View Slide

59. Thank you!
    ADunkman
    twitter.com /
    github.com /
    

    View Slide