Organizing and Packaging Rich Javascript Apps with Ruby and rake-pipeline Luke Melia Gotham Ruby Conference June 23rd, 2012 Saturday, June 23, 12

About this Gorucoan 2 Saturday, June 23, 12

Javascript Apps Are Getting Bigger 3 Saturday, June 23, 12

Our Old Practices Are Not Good Enough 4 Saturday, June 23, 12

Build System 5 OO Design Principles Build System et cetera... Testing Logical File Organization Build System -style app/ controllers/ models/ et cetera... Saturday, June 23, 12

Why a Build System? ★ Development convenience ★ Deployment optimizations 6 Saturday, June 23, 12

What Do Javascript Build Systems Do in the Real World? ■ Concatenation ■ Minification ■ Authoring in another language ■ Stripping asserts ■ Deferring parsing ■ Template compilation 7 Saturday, June 23, 12

Common Tools in Javascript Build Systems ■ YUI Compressor ■ Closure Compiler ■ uglify-js ■ JSmin ■ Coffeescript ■ Handlebars 8 Saturday, June 23, 12

The Metaphor: Pipes & Filters, a.k.a. Pipeline 9 Input Output Filter Filter Filter Saturday, June 23, 12

The Metaphor: Pipes & Filters, a.k.a. Pipeline 10 Input Output Filter Filter Filter A bunch of JS files Wrap each file in a closure Minify each file Concatenate into a single file dist/application.js For example: Saturday, June 23, 12

Rails-focused Solutions ■ Asset Pipeline (Sprockets) ■ Jammit ■ smart_asset ■ lots more... 11 Saturday, June 23, 12

Outside the Ruby Community ■ Ant ■ Make ■ Jake (multiple projects named this!) ■ Grunt ■ Brunch ■ lots more... 12 Saturday, June 23, 12

With all these options, why rake-pipeline? Because it is an example of what I love about Ruby. 13 Saturday, June 23, 12

History of rake-pipeline ■October, 2011 ■LivingSocial needs a solution to build an Ember.js project ■Yehuda Katz creates rake-pipeline ■Open-sourced soon after 14 Saturday, June 23, 12

“The idea behind rake-pipeline is to create an asset pipeline based on the principles of a build process...” 15 Saturday, June 23, 12

“By modeling the problem as a build process, it’s easier to add new features and compose steps than by hardcoding different types of processors and hoping they all fit together.” Yehuda Katz 16 Saturday, June 23, 12

Rake 17 ■“Ruby Make” ■Part of the standard library ■by Jim Weirich Saturday, June 23, 12

18 FIleTask is a Rake task designed to create a file. If a target file is newer than all its dependencies, the task action is not run. Saturday, June 23, 12

FileTask example 19 Saturday, June 23, 12

Translates Filters to FileTasks 20 Input Output Filter Filter Filter FileT ask FileT ask FileT ask Saturday, June 23, 12

21 Anatomy of a Rake-Pipeline Filter Saturday, June 23, 12

Easy to write, easy to share. 22 Saturday, June 23, 12

wycats/rake-pipeline-web-filters ■ CacheBuster ■ CoffeeScript ■ Handlebars ■ Less ■ Markdown ■ Minispade ■ Sass ■ Tilt ■ Uglify ■ YuiCss ■ YuiJavascript 23 Saturday, June 23, 12

Roman2K / rake-pipeline-requirejs ■ Context ■ Define 24 Saturday, June 23, 12

25 Pipeline DSL Input Output Filter Filter Filter A bunch of JS files Wrap each file in a closure Minify each file Concatenate into a single file dist/application.js Saturday, June 23, 12

26 Pipeline DSL Input Output Filter Filter Filter A bunch of JS files Wrap each file in a closure Minify each file Concatenate into a single file dist/application.js Saturday, June 23, 12

27 Pipeline DSL Output Filter Filter Filter Wrap each file in a closure Minify each file Concatenate into a single file dist/application.js Saturday, June 23, 12

28 Saturday, June 23, 12

29 Pipeline DSL Filter Filter Wrap each file in a closure Minify each file Filter Concatenate into a single file Output dist/application.js Saturday, June 23, 12

30 Pipeline DSL Filter Minify each file Filter Concatenate into a single file Output dist/application.js Saturday, June 23, 12

31 Saturday, June 23, 12

32 Pipeline DSL Filter Filter Minify each file Concatenate into a single file Output dist/application.js Saturday, June 23, 12

33 Pipeline DSL Filter Concatenate into a single file Output dist/application.js Saturday, June 23, 12

34 Pipeline DSL Output dist/application.js Saturday, June 23, 12

35 Pipeline DSL Saturday, June 23, 12

36 Assetfile Define a file named “Assetfile” in the root of your project Unabbreviated version at https://gist.github.com/2958072 Saturday, June 23, 12

37 Helpers Saturday, June 23, 12

38 Pipeline DSL with Helpers Saturday, June 23, 12

39 Matchers Saturday, June 23, 12

40 Running rakep > rakep > rakep build > rakep clean > rakep server Saturday, June 23, 12

Integrating in Development Rake::Pipeline::Middleware ■ configure with an Assetfile Rake::Pipeline::Railtie ■ inserts Middleware in the right spot for Rails 41 Saturday, June 23, 12

Thanks! “Programmers often feel joy when they can concentrate on the creative side of programming, so Ruby is designed to make programmers happy.” -Matz Follow me @lukemelia Some examples appear courtesy of my company, Yapp (which happens to be hiring, by the way). Creative Commons photo credits: flickr.com/photos/yuan2003/3872588071, flickr.com/photos/banjaxx/7121971091, flickr.com/photos/guy_on_the_streets/ 3034517059, flickr.com/photos/fbmore/1148889628, flickr.com/photos/serenitbee/7118733565, flickr.com/photos/stuckincustoms/524185543, flickr.com/photos/ nasa_jsc_photo/6993385964, flickr.com/photos/lukeredmond/2101713113, flickr.com/photos/numbphoto/7052838173, flickr.com/photos/thomasleuthard/ 5805008144, flickr.com/photos/tomvu/5081689621, flickr.com/photos/8453967@N08/7401066082 42 Saturday, June 23, 12