Asset Pipelines in Node

With your friend Jacob Gable

Look! Boxes!
▼

About Me

Jacob Gable is a software developer focused mainly on web technologies located in Chicago, IL.

• 

  github.com/jgable

  npmjs.org/~jgable

  

Obligatory Sponsor Slide

Platinum

Gold

Quick Survey

• Who works on a product or service site where page performance is important?
• Who uses some kind of module loader like RequireJS?

Agenda

• What makes a good asset pipeline?
• What’s out there right now?
• Connect-Assets Walkthrough
• Asset Rack Walkthrough
• Yeoman/Grunt Walkthrough

Good Asset Pipelines

• Make Websites Fast
• Make Development Easier
• Encourage Good Development Practices

Making Websites Fast

Reduce Request Quantity and Size

• Compile preprocessed files
• Concatenate files
• Minify files
• Set Appropriate Cache Headers
• Load from CDN

Making Development Easier

Fast Debugging with Fast Performance

• Use technologies that make us more productive
  • CoffeeScript
  • TypeScript
  • LESS
  • SASS
• Use tools that make it easier to figure out problems
  • Source Maps
  • LiveReload
  • Logging Verbosity

Encourage Good Development Practices

Make it easy to write good code, fast

• Quality checks with JSHint
• Unit Testing
• Easily add new files without much code
• Support module loaders like RequireJS or AlmondJS

connect-assets

Pros

• Easy to get setup
• Supports Coffee, Typescript, LESS, Stylus
• Hashes and Caches (™) built assets in productions mode

Cons

• No Image Minification
• Hard to work with script loaders like RequireJS
• Development in flux

Asset Rack

Pros

• Easy to integrate to existing site
• Supports same types as connect-assets and custom ones
• Can upload to CDN for you

Cons

• No Image Minification
• Still tricky to work with RequireJS
• More configuration than convention

Yeoman / Grunt

Pros

• Good solid foundation for a site
• LiveReload support
• Build based instead of having to start the server

Cons

• Completely different strategy
• Most Generators default to a setup using RequireJS
• Hard to convert an existing site

Wrapping Up

• Yahoo! Best Practices for Speed - developer.yahoo.com/performance/rules.html
• Connect-assets - github.com/adunkman/connect-assets
• Asset Rack - github.com/techpines/asset-rack
• Yeoman/Grunt - yeoman.io

The End