Sthlm.js 2013: Yeoman workflow

1,855 views

Published on

An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know.

Presentation given on Sthlm.js on the 3rd September 2013.

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,855
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
60
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Sthlm.js 2013: Yeoman workflow

  1. 1. YEOMAN WORKFLOW INTRODUCTION TO
  2. 2. AGENDA Introduction Overview Yeoman •  Yo •  Bower •  Grunt Demo
  3. 3. WHO AND WHAT INTRO
  4. 4. JOHN-PHILIP “JP” JOHANSSON UX Developer @ Avanade Twitter: @seriemajp GitHub: https://github.com/seriema Grunt crusade: •  Twitter Bootstrap •  Raphaël •  Holder.js •  FooTable Upcoming: http://npmalerts.com
  5. 5. WHAT JavaScript projects are getting bigger Better tools are needed Tools enable workflows Yeoman is a workflow
  6. 6. WHAT IS YEOMAN OVERVIEW
  7. 7. YEOMAN WORKFLOW Create a new webapp Handle dependencies Preview, test, build $ yo webapp $ bower search jquery $ bower install jquery $ grunt server $ grunt test $ grunt
  8. 8. STRUCTURE App Env OS
  9. 9. STRUCTURE App Env OS package.json
  10. 10. PACKAGE.JSON
  11. 11. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json
  12. 12. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json Don’t commit these folders
  13. 13. PROJECT STRUCTURE bower_components/ node_modules/ bower.json Gruntfile.js package.json Commit these files
  14. 14. THE BIG THREE YEOMAN
  15. 15. YO - WHAT Scaffolding Opinionated Generators (over 180 available) Sub-generators
  16. 16. YO - WHY Automate tedious configuration Quickly set up a project structure Start with boilerplate code Perfect if you like starting projects
  17. 17. YO - HOW $ npm install -g yo # will install Bower and Grunt too! $ npm search yeoman-generator $ npm install -g generator-angular ~/myproj $ yo angular
  18. 18. BOWER - WHAT npm for front-end libraries Dependency-management bower.json (`bower init`) .bowerrc
  19. 19. BOWER - WHY It’s a package manager! Freedom from google+copy+paste Lock version Distribution
  20. 20. BOWER - HOW $ npm install -g bower ~/myproj $ bower init ~/myproj $ bower install jquery --save # save-flag updates bower.json
  21. 21. BOWER - HOW $ npm install -g bower ~/myproj $ bower init Yo ~/myproj $ bower install jquery --save # save-flag updates bower.json
  22. 22. BOWER.JSON
  23. 23. .BOWERRC
  24. 24. GRUNT - WHAT JavaScript task runner Tasks (over 1000 available) Gruntfile.js package.json (‘npm init’)
  25. 25. GRUNT - WHY CLI No more custom Makefiles Over a thousand existing tasks Unified workflow Automation
  26. 26. GRUNT - HOW $ npm install -g grunt-cli ~myproj $ npm init ~myproj $ npm install grunt --save-dev # save flag updates package.json ~myproj $ npm install grunt-contrib-qunit --save-dev ~myproj $ grunt
  27. 27. GRUNT - HOW $ sudo npm install -g grunt-cli ~myproj $ npm init Yo ~myproj $ npm install grunt --save-dev # requires package.json available ~myproj $ npm install grunt-contrib-qunit --save-dev ~myproj $ grunt
  28. 28. GRUNTFILE.JSON
  29. 29. DEMO If we had more time… …we would work backwards.
  30. 30. YO $ yo $ yo angular # Check output log # Check out structure $ yo angular:directive myDirective
  31. 31. GRUNT $ grunt test $ grunt server $ grunt build
  32. 32. BOWER $ bower list $ bower install underscore –save $ bower list
  33. 33. QUESTIONS?

×