Packaging Rich Javascript Apps with Ruby and rake-pipeline

An introduction to rake-pipeline

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 Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View 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 Slide

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

   View Slide

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

   View 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 Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View 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 Slide

19. FileTask example 19
    Saturday, June 23, 12
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

28. 28
    Saturday, June 23, 12
    

    View 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 Slide

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

    View Slide

31. 31
    Saturday, June 23, 12
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. 35
    Pipeline DSL
    Saturday, June 23, 12
    

    View 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 Slide

37. 37
    Helpers
    Saturday, June 23, 12
    

    View Slide

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

    View Slide

39. 39
    Matchers
    Saturday, June 23, 12
    

    View Slide

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

    View 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 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 Slide