1st class web development with lineman

Transcript

1. 1st class web
   development
   with lineman
   

   View Slide

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

   View Slide

3. @linemanjs
   linemanjs.com
   

   View Slide

4. 1
   

   View Slide

5. 1 2
   

   View Slide

6. 1 3
   2
   

   View Slide

7. View Slide

8. Java Developers
   

   View Slide

9. Java Developers
   

   View Slide

10. Ruby Developers
    

    View Slide

11. Ruby Developers
    

    View Slide

12. .NET Developers
    

    View Slide

13. .NET Developers
    

    View Slide

14. JavaScript Developers
    

    View Slide

15. JavaScript Developers
    

    View Slide

16. JavaScript Developers
    

    View Slide

17. JavaScript Developers
    

    View Slide

18. JavaScript Developers
    

    View Slide

19. not soluble
    

    View Slide

20. Inefficiency
    

    View Slide

21. View Slide

22. Browser capability
    

    View Slide

23. Browser capability
    Opportunity cost
    

    View Slide

24. Browser capability
    Opportunity cost
    

    View Slide

25. View Slide

26. Rails won the war.
    

    View Slide

27. Rails won the war?
    which
    

    View Slide

28. "Good frameworks
    are extractions,
    not inventions."
    - DHH
    

    View Slide

29. View Slide

30. Routing
    

    View Slide

31. Routing
    Models
    

    View Slide

32. Routing
    Models
    Persistence
    

    View Slide

33. Routing
    Models
    Persistence
    Sessions
    

    View Slide

34. Routing
    Models
    Persistence
    Sessions
    Mailers
    

    View Slide

35. Routing
    Models
    Persistence
    Sessions
    Mailers
    JS-free
    Dynamism
    

    View Slide

36. HTML UI
    

    View Slide

37. HTML UI
    !
    Item 1
    

    View Slide

38. HTML UI
    !
    Item 1
    !
    
    
    
    

    View Slide

39. JavaScript UI
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

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

50. what's wrong
    with vestigial
    appendages?
    

    View Slide

51. app/
    

    View Slide

52. app/
    

    View Slide

53. app/
    

    View Slide

54. app/
    

    View Slide

55. ap
    

    View Slide

56. ap
    

    View Slide

57. ap
    p/
    

    View Slide

58. app1/
    !
    app2/
    

    View Slide

59. app1/
    !
    app2/
    

    View Slide

60. app1/
    !
    app2/
    

    View Slide

61. app1/
    !
    app2/
    

    View Slide

62. app1
    

    View Slide

63. app1
    

    View Slide

64. app1
    app2
    

    View Slide

65. late extraction
    costs more than
    early abstraction
    

    View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. late extraction
    costs more than
    early abstraction
    

    View Slide

74. When you see this:
    

    View Slide

75. When you see this:
    !
    <br/>
    

    View Slide

76. When you see this:
    !
    <br/>user = <%= user.to_json %><br/>
    

    View Slide

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

    View Slide

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

    View Slide

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

80. When you see this:
    !
    <br/>user = <%= user.to_json %><br/>time = <%= Time.now.to_i %><br/>items = <%= items.to_json %><br/>token = "<%= @token %>"<br/>
    your API is broken
    

    View Slide

81. View Slide

82. We think we're
    

    View Slide

83. View Slide

84. But sometimes we're
    

    View Slide

85. View Slide

86. mature ≈ convenient
    

    View Slide

87. Before Rails
    was easy
    

    View Slide

88. Before Rails
    was easy
    JavaScript
    wasn't hard
    

    View Slide

89. Convenience
    

    View Slide

90. Server-side
    

    View Slide

91. Client-side
    

    View Slide

92. Just kidding.
    

    View Slide

93. Client-side
    

    View Slide

94. View Slide

95. Do the Simplest Thing
    

    View Slide

96. Do the Simplest Thing
    1. Show data in a table
    

    View Slide

97. Do the Simplest Thing
    1. Show data in a table
    2. Now render it as a graph
    

    View Slide

98. Do the Simplest Thing
    1. Show data in a table
    2. Now render it as a graph
    3. (ͮŇ㷩㷩Ň)ͮ
    

    View Slide

99. Do the Simplest Thing
    1. Show data in a table
    2. Now render it as a graph
    3. (ͮŇ㷩㷩Ň)ͮ
    4. Now add filters, sliders, &
    zoom to the graph!
    

    View Slide

100. Do the Simplest Thing
     1. Show data in a table
     2. Now render it as a graph
     3. (ͮŇ㷩㷩Ň)ͮ
     4. Now add filters, sliders, &
     zoom to the graph!
     5. (ಠ_ಠ)
     

     View Slide

101. the simple cliff
     

     View Slide

102. the simple cliff
     

     View Slide

103. the simple cliff
     

     View Slide

104. the simple cliff
     

     View Slide

105. the simple cliff
     

     View Slide

106. the simple cliff
     (›°□°ʣ›ớ
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. Compete on easy.
     

     View Slide

111. App Framework
     Convention & Config
     Build Automation
     

     View Slide

112. Rails
     App Framework
     Convention & Config
     Build Automation
     

     View Slide

113. Rails
     Rails
     App Framework
     Convention & Config
     Build Automation
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     

     View Slide

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

     

     View Slide

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

     

     View Slide

121. !
     $ npm install -g lineman
     Install
     

     View Slide

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

     View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. View Slide

137. View Slide

138. ;?
     

     View Slide

139. ;?❤️!
     

     View Slide

140. ;?❤️! # @ ;
     

     View Slide

141. ;?❤️! # @ ;
     ☕-script!
     

     View Slide

142. View Slide

143. Grunt
     

     View Slide

144. }
     make
     Cmake
     Rake
     Ant / NAnt
     MSBuild
     Maven
     Grunt
     

     View Slide

145. Easy peasy
     !
     $ cat tasks/hello.js
     !
     

     View Slide

146. Easy peasy
     !
     $ cat tasks/hello.js
     !
     module.exports = function(grunt) {
     };
     

     View Slide

147. Easy peasy
     !
     $ cat tasks/hello.js
     !
     module.exports = function(grunt) {
     grunt.registerTask("hello",function(){
     });
     };
     

     View Slide

148. Easy peasy
     !
     $ cat tasks/hello.js
     !
     module.exports = function(grunt) {
     grunt.registerTask("hello",function(){
     grunt.log.writeln("Hello!");
     });
     };
     

     View Slide

149. Easy peasy
     !
     $ grunt hello
     !
     

     View Slide

150. Easy peasy
     !
     $ grunt hello
     !
     Running "hello" task
     Hello!
     !
     Done, without errors.
     

     View Slide

151. View Slide

152. tasks
     

     View Slide

153. config
     tasks
     

     View Slide

154. View Slide

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

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

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

158. View Slide

159. View Slide

160. Client Server
     

     View Slide

161. Client Server
     ?
     

     View Slide

162. Client Server
     

     View Slide

163. Client Server
     

     View Slide

164. Lineman Sinatra
     

     View Slide

165. Lineman Sinatra
     

     View Slide

166. Lineman Sinatra
     

     View Slide

167. Lineman Sinatra
     

     View Slide

168. Lineman Sinatra
     

     View Slide

169. View Slide

170. Client Server
     

     View Slide

171. Client Server
     

     View Slide

172. Client Server
     

     View Slide

173. Client Server
     

     View Slide

174. Lineman Sinatra
     

     View Slide

175. Lineman Sinatra
     

     View Slide

176. Lineman Sinatra
     

     View Slide

177. Lineman Sinatra
     

     View Slide

178. View Slide

179. 30 minute test build
     

     View Slide

180. View Slide

181. 4 minutes
     

     View Slide

182. 4 minutes 4 minutes
     +
     

     View Slide

183. 4 minutes 4 minutes
     +
     + 2 minutes
     

     View Slide

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

     View Slide

185. It's habit forming.
     

     View Slide

186. It's habit forming.
     

     View Slide

187. A good start
     

     View Slide

188. View Slide

189. hi()
     code
     

     View Slide

190. hi()
     code
     %
     save
     

     View Slide

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

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

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

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

195. View Slide

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

197. 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 test
     < 100ms
     

     View Slide

198. View Slide

199. Can your server
     host static files?
     

     View Slide

200. !
     $ lineman build
     !
     

     View Slide

201. !
     $ lineman build
     !
     $ tree dist
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

205. !
     $ 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

206. Other Starter Projects
     

     View Slide

207. angular
     Other Starter Projects
     

     View Slide

208. backbone
     angular
     Other Starter Projects
     

     View Slide

209. ember
     backbone
     angular
     Other Starter Projects
     

     View Slide

210. ember
     backbone
     angular
     web libs
     Other Starter Projects
     

     View Slide

211. ember
     backbone
     angular
     web libs markdown
     blogs
     Other Starter Projects
     

     View Slide

212. Eminently extensible
     

     View Slide

213. Add a dependency
     !
     $ npm install --save-dev grunt-typescript
     !
     

     View Slide

214. Add a dependency
     !
     $ npm install --save-dev grunt-typescript
     !
     $ cat package.json
     

     View Slide

215. Add a dependency
     !
     $ npm install --save-dev grunt-typescript
     !
     $ cat package.json
     ...
     "devDependencies": {
     ...
     "grunt-typescript": "0.1.6"
     }
     

     View Slide

216. !
     loadNpmTasks: ['grunt-typescript'],
     config/application.js
     

     View Slide

217. !
     loadNpmTasks: ['grunt-typescript'],
     !
     prependTasks: {
     common: ['typescript']
     },
     config/application.js
     

     View Slide

218. !
     loadNpmTasks: ['grunt-typescript'],
     !
     prependTasks: {
     common: ['typescript']
     },
     !
     typescript: {
     compile: {
     src: 'app/js/**/*.ts',
     dest: 'generated/js/app.ts.js'
     }
     }
     config/application.js
     

     View Slide

219. !
     $ lineman run
     !
     ...
     Running "typescript:compile" (typescript) task
     js: 0 files, map: 0 files, declaration: 0 files
     ...
     !
     Run the task
     

     View Slide

220. JavaScript made easy.
     

     View Slide

221. View Slide

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

     View Slide

223. noun project attribution
     Yarn designed by Marie Coons from
     The Noun Project!
     !
     Scale designed by Ritika Khasgiwale
     from The Noun Project!
     !
     Business Man designed by Piotrek
     Chuchla from The Noun Project!
     !
     Business Man designed by Toke Thieden
     from The Noun Project!
     !
     Airplane designed by Sven Gabriel from
     The Noun Project!
     !
     Brick Wall designed by Juan Pablo Bravo
     from The Noun Project
     

     View Slide