Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Workflows & Tooling

Ead076bf445f9b50e3c094300e4690e9?s=47 David Mosher
October 25, 2013

Frontend Workflows & Tooling

The rise of JavaScript application frameworks has led to much confusion around how developers should structure their rich-client application codebases and what tools they should use. Come join David Mosher, Front-End Engineer at Shopify, to learn how to use front-end workflow tools like Grunt and Chrome Developer Tools to create a high-quality workflow pipeline that will promote your rich-client JavaScript applications to first-class citizens.

Ead076bf445f9b50e3c094300e4690e9?s=128

David Mosher

October 25, 2013
Tweet

Transcript

  1. frontend workflows &tooling Frontend Masters @dmosher Friday, October 25, 13

  2. Friday, October 25, 13

  3. Friday, October 25, 13

  4. W O R K F L O W MODERN Friday,

    October 25, 13
  5. W O R K F L O W MODERN ~500

    .coffee ~76 .scss ~450 .html ~80,000 customers Friday, October 25, 13
  6. lesson plan 1. "Modern" Workflow 2. Grunt & Friends 3.

    Dev Tools Friday, October 25, 13
  7. W E B A P P TRADITIONAL HEAVY +120 DOES

    ALL THE THINGS templates css, html, javascript mvc authentication security storage Friday, October 25, 13
  8. W E B A P P MODERN SMART +240 DOES

    THINGS SMARTER templates css, html, javascript mv* authentication security storage xhr json platform modern Friday, October 25, 13
  9. Friday, October 25, 13

  10. W O R K F L O W MODERN Modern

    Webapp Modern Platform Modern Tooling ✓ ✓ Friday, October 25, 13
  11. T O O L I N G TRADITIONAL SECOND CLASS

    +120 DOES ALL THE THINGS compile concatenate minify templates analyze / test modules .net + frontend ruby + frontend java + frontend * + frontend Friday, October 25, 13
  12. T O O L I N G MODERN FIRST CLASS

    +240 SEPARATED CONCERNS integrate optimize test compile analyze modules concatenate minify templates Friday, October 25, 13
  13. T R A I N I N G BASIC Friday,

    October 25, 13
  14. T R A I N I N G BASIC NODE

    require Friday, October 25, 13
  15. T R A I N I N G BASIC Friday,

    October 25, 13
  16. T R A I N I N G BASIC NPM

    npm init Friday, October 25, 13
  17. T R A I N I N G BASIC NPM

    package.json.nodejitsu.com Friday, October 25, 13
  18. T R A I N I N G BASIC NPM

    package.json Friday, October 25, 13
  19. T R A I N I N G BASIC NPM

    npm install Friday, October 25, 13
  20. T R A I N I N G BASIC NPM

    npm install --save --save-dev Friday, October 25, 13
  21. W O R K F L O W MODERN Friday,

    October 25, 13
  22. W O R K F L O W MODERN GRUNT

    grunt-cli npm install -g grunt-cli Friday, October 25, 13
  23. W O R K F L O W MODERN GRUNT

    Gruntfile.js Friday, October 25, 13
  24. W O R K F L O W MODERN GRUNT

    Gruntfile.coffee Friday, October 25, 13
  25. W O R K F L O W MODERN GRUNT

    task config Friday, October 25, 13
  26. W O R K F L O W MODERN GRUNT

    tasks Friday, October 25, 13
  27. W O R K F L O W MODERN GRUNT

    multi tasks Friday, October 25, 13
  28. W O R K F L O W MODERN GRUNT

    multitask targets Friday, October 25, 13
  29. W O R K F L O W MODERN GRUNT

    async tasks Friday, October 25, 13
  30. W O R K F L O W MODERN GRUNT

    workflows Friday, October 25, 13
  31. W O R K F L O W MODERN GRUNT

    loading tasks Friday, October 25, 13
  32. W O R K F L O W MODERN GRUNT

    grunt-init gruntfile gruntplugin Friday, October 25, 13
  33. W O R K F L O W MODERN GRUNT

    gruntjs.com/project-scaffolding Friday, October 25, 13
  34. W O R K F L O W MODERN GRUNT

    git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin Friday, October 25, 13
  35. W O R K F L O W MODERN GRUNT

    tasks, multiTasks .js or .coffee grunt-cli grunt-init workflows ✓ ✓ ✓ ✓ ✓ loading tasks ✓ Friday, October 25, 13
  36. W O R K F L O W MODERN GRUNT

    IT's Demo Time!!! Friday, October 25, 13
  37. W O R K F L O W MODERN Friday,

    October 25, 13
  38. W O R K F L O W MODERN BOWER

    bower.json Friday, October 25, 13
  39. W O R K F L O W MODERN BOWER

    bower install Friday, October 25, 13
  40. W O R K F L O W MODERN BOWER

    .bowerrc Friday, October 25, 13
  41. W O R K F L O W MODERN BOWER

    IT's Demo Time!!! Friday, October 25, 13
  42. W O R K F L O W MODERN Friday,

    October 25, 13
  43. W O R K F L O W MODERN YEOMAN

    npm install -g yo Friday, October 25, 13
  44. W O R K F L O W MODERN YEOMAN

    generators generator- angular generator- backbone Friday, October 25, 13
  45. W O R K F L O W MODERN YEOMAN

    scaffolds yo angular yo backbone Friday, October 25, 13
  46. W O R K F L O W MODERN YEOMAN

    project structure Friday, October 25, 13
  47. W O R K F L O W MODERN YEOMAN

    Gruntfile.js Friday, October 25, 13
  48. W O R K F L O W MODERN YEOMAN

    IT's Demo Time!!! Friday, October 25, 13
  49. W O R K F L O W MODERN Friday,

    October 25, 13
  50. W O R K F L O W MODERN LINEMAN

    npm install -g lineman Friday, October 25, 13
  51. W O R K F L O W MODERN LINEMAN

    lineman new Friday, October 25, 13
  52. W O R K F L O W MODERN LINEMAN

    project structure Friday, October 25, 13
  53. W O R K F L O W MODERN LINEMAN

    task defaults Friday, October 25, 13
  54. W O R K F L O W MODERN LINEMAN

    extend defaults Friday, October 25, 13
  55. W O R K F L O W MODERN LINEMAN

    app.coffee files.coffee Friday, October 25, 13
  56. W O R K F L O W MODERN LINEMAN

    lineman run lineman spec lineman build Friday, October 25, 13
  57. W O R K F L O W MODERN LINEMAN

    IT's Demo Time!!! Friday, October 25, 13
  58. THANKS! @dmosher Friday, October 25, 13