Yeoman

523 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
523
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yeoman

  1. 1. YEOMAN ‘Modern workflows for modern webapps.’
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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/

×