An introduction to Yeoman, Yo, Bower, and Grunt. Tools every JavaScript developer should know. Presentation given on Sthlm.js on the 3rd September 2013.

1. YEOMAN
WORKFLOW
INTRODUCTION TO

2. AGENDA
Introduction
Overview
Yeoman
• Yo
• Bower
• Grunt
Demo

3. INTRO
WHO AND WHAT

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. WHAT
JavaScript projects are getting bigger
Better tools are needed
Tools enable workflows
Yeoman is a workflow

6. OVERVIEW
WHAT IS YEOMAN

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. STRUCTURE
OS
Env
App

9. STRUCTURE
OS
Env
App
package.json

10. PACKAGE.JSON

11. PROJECT STRUCTURE
bower_components/
node_modules/
bower.json
Gruntfile.js
package.json

12. PROJECT STRUCTURE
bower_components/ Don’t commit these folders
node_modules/
bower.json
Gruntfile.js
package.json

13. PROJECT STRUCTURE
bower_components/
node_modules/
bower.json Commit these files
Gruntfile.js
package.json

14. YEOMAN
THE BIG THREE

15. YO - WHAT
Scaffolding
Opinionated
Generators (over 180 available)
Sub-generators

16. YO - WHY
Automate tedious configuration
Quickly set up a project structure
Start with boilerplate code
Perfect if you like starting projects

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. BOWER - WHAT
npm for front-end libraries
Dependency-management
bower.json (`bower init`)
.bowerrc

19. BOWER - WHY
It’s a package manager!
Freedom from google+copy+paste
Lock version
Distribution

20. BOWER - HOW
$ npm install -g bower
~/myproj $ bower init
~/myproj $ bower install jquery --save
# save-flag updates bower.json

21. BOWER - HOW
$ npm install -g bower
~/myproj $ bower init
~/myproj $ bower install jquery --save
# save-flag updates bower.json
Yo

22. BOWER.JSON

23. .BOWERRC

24. GRUNT - WHAT
JavaScript task runner
Tasks (over 1000 available)
Gruntfile.js
package.json (‘npm init’)

25. GRUNT - WHY
CLI
No more custom Makefiles
Over a thousand existing tasks
Unified workflow
Automation

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. GRUNT - HOW
$ sudo npm install -g grunt-cli
~myproj $ npm init
~myproj $ npm install grunt --save-dev
# requires package.json available
~myproj $ npm install grunt-contrib-qunit --save-dev
~myproj $ grunt
Yo

28. GRUNTFILE.JSON

29. DEMO
If we had more time…
…we would work backwards.

30. YO
$ yo
$ yo angular
# Check output log
# Check out structure
$ yo angular:directive myDirective

31. GRUNT
$ grunt test
$ grunt server
$ grunt build

32. BOWER
$ bower list
$ bower install underscore –save
$ bower list

33. QUESTIONS?