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

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