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

1st class web development with lineman

Justin Searls
November 08, 2013

1st class web development with lineman

As was presented at Øredev 2013. This talk is more fun in video form: http://blog.testdouble.com/posts/2013-11-12-1st-class-web-development-with-lineman.html

Check out Lineman at http://linemanjs.com

Justin Searls

November 08, 2013
Tweet

More Decks by Justin Searls

Other Decks in Programming

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