$30 off During Our Annual Pro Sale. View Details »

The "Rails of JavaScript" won't be a framework

The "Rails of JavaScript" won't be a framework

As presented at RailsConf 2014. Video to follow.

Say [email protected]!

Justin Searls

April 25, 2014
Tweet

More Decks by Justin Searls

Other Decks in Programming

Transcript

  1. the of
    won't be
    a framework

    View Slide

  2. the of
    will be more than
    a framework

    View Slide

  3. My name is Justin Searls
    Please tweet me @searls &
    Say [email protected]

    View Slide

  4. 1

    View Slide

  5. 2
    1

    View Slide

  6. 2
    1 3

    View Slide

  7. You own a bakery.

    View Slide

  8. A customer walks in.

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Honest mistake.

    View Slide

  13. You own a software studio.

    View Slide

  14. A customer walks in.

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. Honest mistake.

    View Slide

  20. Rails is too convenient.

    View Slide

  21. server-side tools

    View Slide

  22. client-side tools

    View Slide

  23. Just kidding.

    View Slide

  24. client-side tools

    View Slide

  25. View Slide

  26. ˑ Provocation ˑ

    View Slide

  27. Non-rubyists
    write better
    JavaScript
    ˑ Provocation ˑ

    View Slide

  28. View Slide

  29. Before Rails
    was easy

    View Slide

  30. Before Rails
    was easy
    JavaScript
    wasn't hard

    View Slide

  31. Is JavaScript a
    terrible language?

    View Slide

  32. YES
    DEFINITELY

    View Slide

  33. Is that why writing
    JavaScript is terrible?

    View Slide

  34. ASK
    AGAIN
    LATER

    View Slide

  35. View Slide

  36. The community
    changed the world.

    View Slide

  37. Great new tools for
    the web, over time:

    View Slide

  38. 2005

    View Slide

  39. 2005

    View Slide

  40. 2006

    View Slide

  41. 2007

    View Slide

  42. 2008

    View Slide

  43. 2009

    View Slide

  44. 2010

    View Slide

  45. 2011

    View Slide

  46. 2012

    View Slide

  47. 2013

    View Slide

  48. 2014

    View Slide

  49. 2014

    View Slide

  50. Where are the best tools?

    View Slide

  51. Ruby's tool ecosystem is mature, crowded
    Where are the best tools?

    View Slide

  52. Ruby's tool ecosystem is mature, crowded
    Node's ecosystem is immature, innovative
    Where are the best tools?

    View Slide

  53. Ruby's tool ecosystem is mature, crowded
    Node's ecosystem is immature, innovative
    Tool authors aren't immune to trends
    Where are the best tools?

    View Slide

  54. Ruby's tool ecosystem is mature, crowded
    Node's ecosystem is immature, innovative
    Tool authors aren't immune to trends
    Tools address the problems of their day
    Where are the best tools?

    View Slide

  55. Ruby's tool ecosystem is mature, crowded
    Node's ecosystem is immature, innovative
    Tool authors aren't immune to trends
    Tools address the problems of their day
    Where are the best tools?

    View Slide

  56. Ruby's tool ecosystem is mature, crowded
    Node's ecosystem is immature, innovative
    Tool authors aren't immune to trends
    Tools address the problems of their day
    Web tools in Node better
    solve today's problems
    Where are the best tools?

    View Slide

  57. Maddening for those who
    insist on using only Rails

    View Slide

  58. Hey, speaking of Rails

    View Slide

  59. View Slide

  60. Rails won the war.

    View Slide

  61. Rails won the war?
    which

    View Slide

  62. Good frameworks
    are extractions,
    not inventions.
    - DHH

    View Slide

  63. Basecamp

    View Slide

  64. Basecamp

    View Slide

  65. View Slide

  66. Routing

    View Slide

  67. Routing
    Models

    View Slide

  68. Routing
    Models
    Persistence

    View Slide

  69. Routing
    Models
    Persistence
    Sessions

    View Slide

  70. Routing
    Models
    Persistence
    Sessions
    Mailers

    View Slide

  71. Routing
    Models
    Persistence
    Sessions
    Mailers
    JavaScript
    Alternatives

    View Slide

  72. AJAX ERB
    Tags Routing
    Models
    Sessions
    Mailers
    Persistence

    View Slide

  73. RJS
    Routing
    Models
    Sessions
    Mailers
    Persistence

    View Slide

  74. AJAX ERB
    Tags
    Unobtrusive
    Routing
    Models
    Sessions
    Mailers
    Persistence

    View Slide

  75. Turbolinks
    Routing
    Models
    Sessions
    Mailers
    Persistence

    View Slide

  76. Basecamp

    View Slide

  77. Basecamp

    View Slide

  78. Basecamp

    View Slide

  79. There are Rails apps
    and there are apps
    that use Rails.
    -Sandi Metz

    View Slide

  80. HTML UI

    View Slide

  81. HTML UI
    !
    Item 1

    View Slide

  82. HTML UI
    !
    Item 1
    !



    View Slide

  83. JavaScript UI

    View Slide

  84. JavaScript UI
    !
    new ItemView('#items').render()

    View Slide

  85. JavaScript UI
    !
    new ItemView('#items').render()
    !
    $('button').click(function(e){
    $('.alert').text('Thanks!').show()
    });

    View Slide

  86. HTML UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    └── views
    └── items
    └── index.html.erb

    View Slide

  87. HTML UI + JS
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    ├── views
    │ └── items
    │ └── index.html.erb
    └── assets
    └── javascripts
    └── application.js

    View Slide

  88. HTML UI + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    ├── views
    │ └── items
    │ └── index.html.erb
    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  89. HTML UI + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    ├── views
    │ └── items
    │ └── index.html.erb
    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  90. HTML UI + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    ├── views
    │ └── items
    │ └── index.html.erb
    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  91. HTML UI + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    ├── views
    │ └── items
    │ └── index.html.erb
    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  92. HTML UI + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb
    ├── views
    │ └── items
    │ └── index.html.erb
    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  93. JSON API + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb



    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  94. JSON API + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb



    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  95. JSON API + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb



    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs
    vestigial
    appendage

    View Slide

  96. what's wrong with
    that vestigial
    appendage?

    View Slide

  97. app/

    View Slide

  98. app/

    View Slide

  99. app/

    View Slide

  100. app/

    View Slide

  101. ap

    View Slide

  102. ap

    View Slide

  103. ap
    p/

    View Slide

  104. app1/
    !
    app2/

    View Slide

  105. app1/
    !
    app2/

    View Slide

  106. app1/
    !
    app2/

    View Slide

  107. app1/
    !
    app2/

    View Slide

  108. app1

    View Slide

  109. app1

    View Slide

  110. app1
    app2

    View Slide

  111. late extraction
    costs more than
    early abstraction

    View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. late extraction
    costs more than
    early abstraction

    View Slide

  120. JSON API + JS UI
    !
    app
    ├── controllers
    │ └── items_controller.rb
    ├── models
    │ └── item.rb



    └── assets
    └── javascripts
    └── more_app
    ├── controllers
    │ └── items_controller.js
    ├── models
    │ └── item.js
    └── views
    └── items
    └── index.jst.ejs

    View Slide

  121. If you see this:

    View Slide

  122. If you see this:
    !
    <br/>

    View Slide

  123. If you see this:
    !
    <br/>user = <%= user.to_json %><br/>

    View Slide

  124. If you see this:
    !
    <br/>user = <%= user.to_json %><br/>time = <%= Time.now.to_i %><br/>

    View Slide

  125. If you see this:
    !
    <br/>user = <%= user.to_json %><br/>time = <%= Time.now.to_i %><br/>items = <%= items.to_json %><br/>

    View Slide

  126. If you see this:
    !
    <br/>user = <%= user.to_json %><br/>time = <%= Time.now.to_i %><br/>items = <%= items.to_json %><br/>token = "<%= @token %>"<br/>

    View Slide

  127. !
    <br/>user = <%= user.to_json %><br/>time = <%= Time.now.to_i %><br/>items = <%= items.to_json %><br/>token = "<%= @token %>"<br/>
    Your yarn is tangled

    View Slide

  128. !
    <br/>user = <%= user.to_json %><br/>time = <%= Time.now.to_i %><br/>items = <%= items.to_json %><br/>token = "<%= @token %>"<br/>
    Your API is a lie

    View Slide

  129. But it's hard
    not to cheat!

    View Slide

  130. JavaScript apps made easy.

    View Slide

  131. App Framework
    Convention & Config
    Build Automation

    View Slide

  132. Rails
    App Framework
    Convention & Config
    Build Automation

    View Slide

  133. Rails
    Rails
    App Framework
    Convention & Config
    Build Automation

    View Slide

  134. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation

    View Slide

  135. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    B-

    View Slide

  136. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    B-
    A+

    View Slide

  137. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    B+
    B-
    A+

    View Slide

  138. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    B+
    B-
    A+

    View Slide

  139. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation

    View Slide

  140. Rails
    App Framework
    Convention & Config
    Build Automation

    View Slide

  141. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation

    View Slide

  142. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    Backbone

    View Slide

  143. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    Backbone
    Angular

    View Slide

  144. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    Backbone
    Angular
    Ember

    View Slide

  145. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation
    Backbone
    Angular
    Ember
    ᵇ(´-ʆ)ᵃ


    View Slide

  146. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation Node.js
    Backbone
    Angular
    Ember
    ᵇ(´-ʆ)ᵃ


    View Slide

  147. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation Node.js
    ???
    Backbone
    Angular
    Ember
    ᵇ(´-ʆ)ᵃ


    View Slide

  148. Rails
    Rails
    Railsy Rake
    App Framework
    Convention & Config
    Build Automation Node.js
    Lineman
    Backbone
    Ember
    Angular
    ᵇ(´-ʆ)ᵃ


    View Slide

  149. @linemanjs
    linemanjs.com

    View Slide

  150. !
    $ npm install -g lineman
    Install

    View Slide

  151. !
    $ npm install -g lineman
    Install
    !
    $ lineman new my-app
    Create

    View Slide

  152. View Slide

  153. View Slide

  154. hi()
    code

    View Slide

  155. hi()
    code
    !
    save

    View Slide

  156. hi()
    code
    !
    save
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/
    tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    compile

    View Slide

  157. hi()
    code
    !
    save
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/
    tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    compile
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    concat

    View Slide

  158. hi()
    code
    !
    save
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/
    tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    compile
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    concat
    hello
    world!
    play

    View Slide

  159. < 100ms
    hi()
    code
    !
    save
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/
    tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    compile
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    concat
    hello
    world!
    play

    View Slide

  160. View Slide

  161. < 100ms
    hi()
    code
    !
    save
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/
    tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    compile
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    concat
    hello
    world!
    play

    View Slide

  162. test
    < 100ms
    hi()
    code
    !
    save
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/
    tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    compile
    loadTask task for task in npmTasks
    grunt.renameTask "copy", "images"
    loadTask "grunt-contrib-copy" # load again so webfonts can use
    it
    grunt.renameTask "copy", "webfonts"
    loadTask "grunt-contrib-copy" # load again to make available
    in userland
    loadTask = (module) ->
    if fs.existsSync("#{process.cwd()}/node_modules/#{module}")
    grunt.loadNpmTasks(module)
    else
    grunt.loadTasks("#{__dirname}/../node_modules/#{module}/tasks")
    npmTasks = grunt.util._(linemanNpmTasks).chain().
    union("grunt-contrib-sass" if config.enableSass).
    union(config.loadNpmTasks).
    compact().value()
    concat

    View Slide

  163. View Slide

  164. Can your server
    host static files?

    View Slide

  165. !
    $ lineman build
    !

    View Slide

  166. !
    $ lineman build
    !
    $ tree dist

    View Slide

  167. !
    $ lineman build
    !
    $ tree dist
    !
    dist
    ├── css
    │ └── app.css
    ├── index.html
    └── js
    └── app.js

    View Slide

  168. !
    $ lineman build
    !
    $ tree dist
    !
    dist
    ├── assets.json
    ├── css
    │ └── app-6193b1...54592.css
    ├── index.html
    └── js
    └── app-8b750b...57f62.js

    View Slide

  169. !
    $ heroku config:set BUILDPACK_URL=http://github.com/
    testdouble/heroku-buildpack-lineman.git
    !
    $ git push
    Heroku

    View Slide

  170. !
    $ heroku config:set BUILDPACK_URL=http://github.com/
    testdouble/heroku-buildpack-lineman.git
    !
    $ git push
    Heroku
    Builds with Node.js

    View Slide

  171. !
    $ heroku config:set BUILDPACK_URL=http://github.com/
    testdouble/heroku-buildpack-lineman.git
    !
    $ git push
    Heroku
    Builds with Node.js
    Runs without Node.js

    View Slide

  172. Starter Projects

    View Slide

  173. angular
    Starter Projects

    View Slide

  174. backbone
    angular
    Starter Projects

    View Slide

  175. ember
    backbone
    angular
    Starter Projects

    View Slide

  176. ember
    backbone
    angular
    web libs
    Starter Projects

    View Slide

  177. ember
    backbone
    angular
    web libs blogs
    Starter Projects

    View Slide

  178. View Slide

  179. Grunt

    View Slide

  180. }
    Make
    Cmake
    Rake
    Ant / NAnt
    MSBuild
    Maven
    Grunt

    View Slide

  181. View Slide

  182. grunt-contrib-clean
    grunt-contrib-coffee
    grunt-contrib-concat
    grunt-contrib-copy
    grunt-contrib-handlebars
    grunt-contrib-jshint
    grunt-contrib-jst
    grunt-contrib-less
    grunt-contrib-sass
    grunt-contrib-cssmin
    grunt-contrib-uglify
    grunt-watch-nospawn
    grunt-contrib-imagemin
    grunt-jasmine-bundle
    grunt-contrib-compass

    View Slide

  183. grunt-contrib-clean
    grunt-contrib-coffee
    grunt-contrib-concat
    grunt-contrib-copy
    grunt-contrib-handlebars
    grunt-contrib-jshint
    grunt-contrib-jst
    grunt-contrib-less
    grunt-contrib-sass
    grunt-contrib-cssmin
    grunt-contrib-uglify
    grunt-watch-nospawn
    grunt-contrib-imagemin
    grunt-jasmine-bundle
    grunt-contrib-compass
    grunt-*

    View Slide

  184. Comically extensible.

    View Slide

  185. Text goes here.
    !
    $ npm install --save-dev lineman-bower
    !
    zero-config plugins

    View Slide

  186. Text goes here.
    !
    $ npm install --save-dev lineman-bower
    !
    $ lineman run
    !
    zero-config plugins

    View Slide

  187. Text goes here.
    !
    $ npm install --save-dev lineman-bower
    !
    $ lineman run
    !
    ...
    Running "bower:install" (bower) task
    >> Installed bower packages
    ...
    zero-config plugins

    View Slide

  188. bower

    View Slide

  189. bower
    grunt-bower-task

    View Slide

  190. bower
    grunt-bower-task
    lineman-bower

    View Slide

  191. bower
    grunt-bower-task
    lineman-bower
    does
    the thing

    View Slide

  192. bower
    grunt-bower-task
    lineman-bower
    automates
    the thing

    View Slide

  193. bower
    grunt-bower-task
    lineman-bower
    configures
    the thing

    View Slide

  194. bower
    grunt-bower-task
    lineman-bower

    View Slide

  195. bower
    grunt-bower-task
    lineman-bower
    handlebars
    grunt-ember-templates
    lineman-ember

    View Slide

  196. bower
    grunt-bower-task
    lineman-bower
    handlebars
    grunt-ember-templates
    lineman-ember
    lineman-{{name}}

    View Slide

  197. bower
    grunt-bower-task
    lineman-bower
    bundles plugins
    handlebars
    grunt-ember-templates
    lineman-ember
    lineman-{{name}}

    View Slide

  198. bower
    grunt-bower-task
    lineman-bower
    handlebars
    grunt-ember-templates
    lineman-ember
    lineman-{{name}}
    overrides configuration

    View Slide

  199. View Slide

  200. View Slide

  201. Client Server

    View Slide

  202. Client Server
    ?

    View Slide

  203. Client Server

    View Slide

  204. Client Server

    View Slide

  205. Client Server

    View Slide

  206. Lineman Sinatra

    View Slide

  207. Lineman Sinatra

    View Slide

  208. Lineman Sinatra

    View Slide

  209. Lineman Sinatra

    View Slide

  210. Lineman Sinatra

    View Slide

  211. Lineman Sinatra

    View Slide

  212. View Slide

  213. Client Server

    View Slide

  214. Client Server

    View Slide

  215. Client Server

    View Slide

  216. Client Server

    View Slide

  217. Lineman Sinatra

    View Slide

  218. Lineman Sinatra

    View Slide

  219. Lineman Sinatra

    View Slide

  220. Lineman Sinatra

    View Slide

  221. View Slide

  222. 30 minute test build

    View Slide

  223. View Slide

  224. 4 minutes

    View Slide

  225. 4 minutes 4 minutes
    +

    View Slide

  226. 4 minutes 4 minutes
    +
    + 2 minutes

    View Slide

  227. 4 minutes 4 minutes
    +
    + 2 minutes
    10 minute test build

    View Slide

  228. It's habit forming

    View Slide

  229. It's habit forming

    View Slide

  230. It's habit forming

    View Slide

  231. View Slide

  232. linemanjs.com/rails.html

    View Slide

  233. screencast @ blog.testdouble.com

    View Slide

  234. View Slide

  235. We'd love to help your team!
    Say [email protected]

    View Slide

  236. Like everyone, we're hiring!
    Just [email protected]

    View Slide

  237. Join us at 1:30 in Superior AB for
    our JavaScript Testing workshop!

    View Slide

  238. My name is Justin Searls
    Please tweet me @searls &
    Say [email protected]

    View Slide

  239. noun project attribution
    Yarn designed by Marie Coons from The
    Noun Project!
    !
    Scale designed by Ritika Khasgiwale
    from The Noun Project

    View Slide