Yeoman is a workflow tool that uses three Node-based tools - Yo, Bower, and Grunt - to increase productivity and reduce boilerplate when developing front-end web applications. Yo scaffolds project structures and files using generators. Bower manages client-side dependencies. Grunt runs tasks for development, testing, and building. Together, they automate common tasks and configure development tools to help enforce consistency.

1. TECHNOLOGY | INNOVATION | SOLUTIONS
Yeoman: Workflows for Fun and Profit
Tim Doherty

2. TECHNOLOGY | INNOVATION | SOLUTIONS
The Problem
???

3. TECHNOLOGY | INNOVATION | SOLUTIONS
The Problem
• Wide selection of front-end tools and libraries
• Learning how to use them together is difficult
• There are lots of ways to do the same thing
• Even if you know how, configuration is tedious
• Common tasks must be repeated manually
• Lots of boilerplate to bootstrap a new app
• Lots of boilerplate to add new features to an app

4. TECHNOLOGY | INNOVATION | SOLUTIONS
Enter Yeoman
Workflow comprised of 3 Node-based tools:
Yo: scaffold applications and files
Bower: manage client-side dependencies
*Grunt: JavaScript task runner
*Gulp is also supported

5. TECHNOLOGY | INNOVATION | SOLUTIONS
• Command-line tool to scaffold applications/files
• Invokes Yeoman Generators to do the heavy lifting
$ yo <generator name>

6. TECHNOLOGY | INNOVATION | SOLUTIONS
Yeoman Generators
• Node packages invoked by the Yo tool
• Blueprints for scaffolding applications/files
• Official Yeoman generators
• Community Yeoman generators
• Custom Yeoman generators

7. TECHNOLOGY | INNOVATION | SOLUTIONS
Generators
Once, to generate basic app structure
$ yo <generator name> <options> --<flags>
• Creates directory structure
• Creates boilerplate application files from templates
• Creates Grunt config, Node and Bower manifests
• Installs Node and Bower dependencies

8. TECHNOLOGY | INNOVATION | SOLUTIONS
Sub-Generators
Any time you need a new source file(s)
$ yo <generator>:<sub-generator> …
• Creates new file(s) from template(s)
• JavaScript source file
• Unit test
• HTML template
• Etc.
• Bonus: sub-generators can manage script tags
• Automatically insert/remove tags in index.html

9. TECHNOLOGY | INNOVATION | SOLUTIONS
Custom Generators
Can’t find the right official/community generator?
• Extend base Yeoman generator
• Do stuff exactly the way you want
• Up-front cost
• Maintenance cost

10. TECHNOLOGY | INNOVATION | SOLUTIONS
Why use Yeoman Generators?
• Increase productivity / reduce boilerplate
• Pre-configure automation tools and tasks
• Improve consistency and quality
• Impose application structure
• Help enforce code style

11. TECHNOLOGY | INNOVATION | SOLUTIONS
Bower
Client-side package manager from Twitter
• Install/remove scripts & assets from command line
• Packages can be installed from:
• Public registry
• Private registry
• Git / Subversion endpoint
• Local folder
• Url
• Symlink

12. TECHNOLOGY | INNOVATION | SOLUTIONS
Bower
• $ bower search angular
• $ bower install jquery
• $ bower uninstall underscore
• $ bower install git://my.git.com/myComponent
• $ bower install ~/source/myComponent
• $ bower link <myComponent>

13. TECHNOLOGY | INNOVATION | SOLUTIONS
Why Use Bower?
• Simplified script/asset management
• Installs transitive dependencies
• Versioning of components
• Author your own reusable components
• Dependency manifest for automated installation
• Yeoman generators create manifest for you

14. TECHNOLOGY | INNOVATION | SOLUTIONS
Grunt
JavaScript task runner on Node
• Command line interface + local Grunt instance
• Configuration file + plugins (node packages)
• Chain tasks to create new “meta” tasks

15. TECHNOLOGY | INNOVATION | SOLUTIONS
Grunt Tasks
$ grunt <task name>
• Spawn a development server
• Lint source code
• Spawn unit & e2e test runners
• CSS preprocessing (Sass/Less/Stylus)
• Concatenate JavaScript and CSS files
• Minify concatenated files
…and much more

16. TECHNOLOGY | INNOVATION | SOLUTIONS
Why Use Grunt?
• Write and configure automation tasks in JavaScript
• Grunt ecosystem is huge, with hundreds of plugins
• Can’t find the right plugin? Write one yourself
• Yeoman generators setup grunt for you
• Install local grunt
• Scaffold your Gruntfile
• Install plugins

17. TECHNOLOGY | INNOVATION | SOLUTIONS
Putting it all Together
Yo: Creates your app structure. Configures Bower and Grunt for you. Installs
Bower and Grunt (Node) dependencies. Creates new files on-demand.
Bower: Installs / removes scripts and assets via command line. Installs /
removes transitive dependencies. Simplifies version management.
Grunt: Runs tasks that comprise your workflow. Tasks can run granularly, i.e.,
“grunt test” or in batch, i.e., “grunt build”

18. TECHNOLOGY | INNOVATION | SOLUTIONS
Summary
• Yeoman increases productivity and quality
• Modular, extensible architecture
• The “Yeoman workflow” is an opinionated track
intended provide a robust starting point for web apps
• Similar toolsets include Brunch and Lineman, but
Yeoman has the widest adoption

19. TECHNOLOGY | INNOVATION | SOLUTIONS
Common Objections
“I don’t need all that cruft”
Maybe not, but how are you doing it now? Is it easier?
“Bower downloads a bunch of crap I don’t need”
Poor manifest, contact the author. Still, who cares? Bandwidth and
storage are cheap in exchange for Bower’s functionality.
“This is way too complicated, I don’t need it for my simple app”
Maybe, but chances are your app will grow, and so will your team.
Automating your workflow early on will make your life a lot easier.
“I don’t understand what all these Grunt tasks do”
Spend some time learning each. Yeoman generators help shorten the
learning curve with working, preconfigured examples.

20. TECHNOLOGY | INNOVATION | SOLUTIONS
Questions?

21. TECHNOLOGY | INNOVATION | SOLUTIONS
Yeoman FTW!!!