Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Packaging Rich Javascript Apps with Ruby and rake-pipeline

Packaging Rich Javascript Apps with Ruby and rake-pipeline

An introduction to rake-pipeline

Luke Melia

June 23, 2012
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

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

    View full-size slide

  2. About this Gorucoan
    2
    Saturday, June 23, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 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

    View full-size slide

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

    View full-size slide

  7. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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

    View full-size slide

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

    View full-size slide

  16. “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

    View full-size slide

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

    View full-size slide

  18. 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

    View full-size slide

  19. FileTask example 19
    Saturday, June 23, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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

    View full-size slide

  26. 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

    View full-size slide

  27. 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

    View full-size slide

  28. 28
    Saturday, June 23, 12

    View full-size slide

  29. 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

    View full-size slide

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

    View full-size slide

  31. 31
    Saturday, June 23, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 35
    Pipeline DSL
    Saturday, June 23, 12

    View full-size slide

  36. 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

    View full-size slide

  37. 37
    Helpers
    Saturday, June 23, 12

    View full-size slide

  38. 38
    Pipeline DSL with Helpers
    Saturday, June 23, 12

    View full-size slide

  39. 39
    Matchers
    Saturday, June 23, 12

    View full-size slide

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

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide