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.

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