Barcamp Hamburg 2013 - Yeoman

Transcript

1. Rapid WebApp Development with Yeoman, Grunt and Bower
2. typical workflow download external libraries and frameworks setup dev and test environment write code and refresh browser all the time manually test on various screen resolutions solve common problems (i. e. responsive images & sprites) make code production ready (minify and concatenate) writing boilerplates
3. let’s be efficient and automate workflows for modern WebApps with Yeoman
4. Yo Scaffolds a boilerplate for various projects (AngularJS, Mobile-First, Twitter Bootstrap, NodeJS) Grunt Build-processes for your project (minify, concatenate, resize images, compiling and testing) Bower Dependency management for packages and libraries
5. Example: the AngularJS generator • Predefined WebApp structure for models, views, controllers, assets and tests • Command Line Generators available for AngularJS components (controllers, directives, routes …) • running testing environment with Mocha, Jasmine and PhantomJS
6. Example: the AngularJS generator All together it feels like you create WebApps with rails • Predefined WebApp structure for models, views, controllers, assets and tests • Command Line Generators available for AngularJS components (controllers, directives, routes …) • running testing environment with Mocha, Jasmine and PhantomJS
7. Let’s try it out and generate a new AngularJS WebApp
8. Let’s try it out and generate a new AngularJS WebApp
9. Let’s try it out and generate a new AngularJS WebApp
13. conventions over configuration
14. • have a consistent WebApp structure • improve your skills with generators (best practice) • It’s easier to follow the spirit of AngularJS and TestdrivenDevelopment benefits?
15. Designers loves Yeoman too
16. Designers loves Yeoman too
18. grunt-autoshot Generates screenshots of your site in different viewport resolutions