A quick run through of Yeoman and how it can increase productivity

1. YEOMAN
‘Modern workflows for modern webapps.’

2. What is Yeoman?
• A collection of tools and best practices working in harmony to make
developing for the web even better.
• Aimed at reducing setup time and mundane tasks in order to
concentrate on the job at hand.
• Chrome Developer relations team and select external contributors
from the community, such as Paul Irish, Addy Osmani and Eric
Bidelman.

3. Yeoman Workflow
‘Yeoman is not just a tool but a workflow’:
• YO (Create a new webapp)
• BOWER ( Handle dependencies )
• GRUNT ( Preview, test build )

4. YO
• Scaffolding (generates templates)
• Opinionated (add / remove tools)
• Generators / Sub generators (npm search yeoman-generator) or
http://yeoman.io/community-generators.html
‘yo webapp’ ,
‘yo gruntfile’,
‘yo angular’ -> ‘yo angular:filter filterName’

5. BOWER
• A package manager for the web. Eg. Bootstrap-sass
Registry: http://sindresorhus.com/bower-components/
• Lock versions, and use it for distribution
• Maintained by Twitter and the open – source community
• No system wide dependencies, no cross project dependencies

6. GRUNT
• Build Tool (CI)
• Automation of repetitive developer configurable tasks
- JSHint
- Concat
- Minify
- USEMin
• Allows developers to test and preview
- Live Reload
- Karma
- Mocha

7. Installation
• Install Yeoman
npm install –g yo
• Search for a generator
npm search yeoman-generator
• Install a generator globally
npm install –g generator-webapp
• Run generator to desired location
yo webapp
• Add additional packages
bower install angular

8. Why Yeoman?
• Create a baseline for ALL devs
• Improve existing solutions
• Sharing best practises
• Implementation with Continuous Integration
- JSHint
- Unit testing (Karma)
- Screen capture comparisons (PhotoBox)
• Saves time

9. What Next?
• Build your own generator?
http://yeoman.io/generators.html#writing-your-first-generator
• Umbraco, Sitecore, Codagenic Reactive generators
- Export assets to appropriate folders based on directory structure
- Integrate Grunt file into MSBuild

10. Resources
• The Landscape Of Front-end Development Automation
http://updates.html5rocks.com/2013/11/The-Landscape-Of-Frontend-Development-Automation-Slides
• Yeoman
http://yeoman.io/
• Why grunt? Why not something else?
http://benalman.com/news/2012/08/why-grunt/