This document discusses various front-end development tools including Yeoman, Bower, Grunt, and AngularJS. Yeoman is described as providing "modern workflows for modern web apps" and helps generate project scaffolding using generators. Bower is introduced as a package manager for front-end code and libraries. Grunt is a JavaScript task runner that can be used to run tasks like building, testing, and deploying projects. AngularJS is briefly explained as a way to enhance HTML for building web apps.

1. Rapidly ScaffoldYour Front-End
withYeoman
AngularJS,Twitter Bootstrap and Bower
are just some of the Buzzwords these slides contain

2. • is 26 years old
• studied Computer Science at Uni Augsburg
• has an affinity for scripting for 15 years
• passionate PHP & JS developer
• on board the Mayflower since August 2012
Simon Waibl
@seym - github/elseym - f/simon.waibl

3. Yeoman
“Modern workflows for modern web apps”
http://yeoman.io/

4. Yeoman
“Modern workflows for modern web apps”
http://yeoman.io/
1. Installation via npm:
`npm -g install grunt-cli yo`
2. Create a new web app with:
`yo webapp`
3. ? ? ?
4. ...profit.

5. Contents
• Yeoman - Modern workflows for modern web apps
• `yo`, generators, sub-generators, generator-generator
• `bower`, packages, configuration, custom endpoints, contributing
• `grunt`, tasks, dev-server, testing and building
• deployment
• AngularJS - HTML enhanced for web apps!
• angular-ui-bootstrap, routes, filters, directives
• Live! - Kittycarousel with Angular & Bootstrap in 10 Minutes

6. `yo`
“Modern workflows for modern web apps”
• scaffolds out new applications
via generators
(like webapp, angular, and many more)
• writes grunt configs
• invokes grunt tasks
http://yeoman.io/

7. `yo` - The generator
“Modern workflows for modern web apps”
• like a “template for your app”
• type I - the boilerplate copier
copies existing boilerplates to the
application directory
• type II - the application scaffolder
for build systems, sub-generators,
dependency management, etc.
http://yeoman.io/

8. `yo` - The sub-generator
“Modern workflows for modern web apps”
• like a “specific sub-template”
• used for views, models, themes,
etc.
• called manually and/or by the
generator itself
invoke with `yo generator:sub-generator`
http://yeoman.io/

9. `yo` - The generator-generator
“Modern workflows for modern web apps”
• like a “meta-template”
• helps building your own
application-scaffolder
http://yeoman.io/

10. `yo` - Find generators
“Modern workflows for modern web apps”
• generators are installed via npm
`npm search yeoman-generator`
• common generators are
webapp, angular, ember, karma, etc.
http://yeoman.io/

11. Contents
• Yeoman - Modern workflows for modern web apps
• `yo`, generators, sub-generators, generator-generator
• `bower`, packages, configuration, custom endpoints, contributing
• `grunt`, tasks, dev-server, testing and building
• deployment
• AngularJS - HTML enhanced for web apps!
• angular-ui-bootstrap, routes, filters, directives
• Live! - Kittycarousel with Angular & Bootstrap in 10 Minutes

12. `bower`
“A package manager for the web”
• installs front-end assets, libraries
and frameworks
• manages dependencies
• also a package-browser
http://bower.io/

13. `bower` - Usage
“A package manager for the web”
• `bower (un)?install (<pkg>)*`
(un-)installs specified packages
• `bower (search|list|info) (<pkg>)*`
searches available, lists installed or prints
information
http://bower.io/

14. `bower` - Configuration
“A package manager for the web”
• configure via .bowerrc-file
the .bowerrc file resides either
globally in ~ or locally in .
• specify a custom directory,
a custom .json file for dependency
information
and multiple endpoints and their
order
http://bower.io/

15. `bower` - Configuration
“A package manager for the web”
• configure via .bowerrc-file
the .bowerrc file resides either
globally in ~ or locally in .
• specify a custom directory,
a custom .json file for dependency
information
and multiple endpoints and their
order
http://bower.io/
$ cat .bowerrc
{
"directory": "bower_components",
"endpoint": "https://bower.mycompany.com",
"json": "bower.json",
"searchpath": [
"https://bower.herokuapp.com"
],
"shorthand_resolver": "git://example.com/{{{ organization }}}/{{{ package }}}.git"
}

16. `bower` - Custom endpoints
“A package manager for the web”
• endpoints are also known as
registries or repositories
• use as main endpoint
and / or additional endpoints
• have your own endpoint with
bower-server
(https://github.com/twitter/bower-server)
http://bower.io/

17. `bower` - Contributing
“A package manager for the web”
• interactively create a bower.json
by running `bower init`
• provide necessary information
such as: name, version, dependencies, etc.
• register your new package at an
endpoint
`bower register <pkgname> <endpoint>`
• pkgname is reserved on a first
come, first serve basis
http://bower.io/

18. Contents
• Yeoman - Modern workflows for modern web apps
• `yo`, generators, sub-generators, generator-generator
• `bower`, packages, configuration, custom endpoints, contributing
• `grunt`, tasks, dev-server, testing and building
• deployment
• AngularJS - HTML enhanced for web apps!
• angular-ui-bootstrap, routes, filters, directives
• Live! - Kittycarousel with Angular & Bootstrap in 10 Minutes

19. `grunt`
“The Javascript task runner”
• runs predefined workflows
a.k.a tasks for you
• common yeoman tasks are
server, watch, test, build, karma, etc.
• invoked manually or from
within `yo`
http://gruntjs.com/

20. `grunt` - Task: server
“The Javascript task runner”
• `grunt server` starts a dev-server
on localhost:9000
• watches your project directory
and reloads your browser on
changes
• compiles coffee, sass, scss, etc.
http://gruntjs.com/

21. `grunt` - Task: test
“The Javascript task runner”
• starts and connects to karma
server
• runs tests provided in ./test
http://gruntjs.com/

22. `grunt` - Task: build
“The Javascript task runner”
• `grunt build` or simply `grunt`
builds your project
this starts lots of compiling, compressing,
linting, testing, fancyfying and stuffing your
source into the target directory
• target directory defaults to ./dist
http://gruntjs.com/

23. Contents
• Yeoman - Modern workflows for modern web apps
• `yo`, generators, sub-generators, generator-generator
• `bower`, packages, configuration, custom endpoints, contributing
• `grunt`, tasks, dev-server, testing and building
• deployment
• AngularJS - HTML enhanced for web apps!
• angular-ui-bootstrap, routes, filters, directives
• Live! - Kittycarousel with Angular & Bootstrap in 10 Minutes!

24. `yo` - Deployment
“Modern workflows for modern web apps”
• issue `grunt` to run the build-task
• add and commit ./dist to git
• use `git subtree push` to deploy
`git subtree push --prefix dist origin gh-pages`
deploys to GitHub Pages
http://yeoman.io/

25. AngularJS
“HTML enhanced for web apps!”
http://angularjs.org/

26. AngularJS
“HTML enhanced for web apps!”
• Create your own elements
• Make your views dynamic through data binding
• Apply the MVC pattern to your web app
• ...profit. Yet again!
http://angularjs.org/

27. Contents
• Yeoman - Modern workflows for modern web apps
• `yo`, generators, sub-generators, generator-generator
• `bower`, packages, configuration, custom endpoints, contributing
• `grunt`, tasks, dev-server, testing and building
• deployment
• AngularJS - HTML enhanced for web apps!
• angular-ui/bootstrap, routes, filters, directives
• Live! - Kittycarousel with Angular & Bootstrap in 10 Minutes

28. angular.js - Bootstrap
“HTML enhanced for web apps!”
• angular-ui/bootstrap is the Twitter
Bootstrap-JS based on Angular
Tip: use angular-bootstrap via bower
• Bootstrap-components are
accessible as Angular-directives
• CSS & assets have to be installed
separately
Tip: use compass-twitter-bootstrap via bower
http://angularjs.org/

29. angular.js - Routes
“HTML enhanced for web apps!”
• AngularJS supports hash-routing
• creating a new route via yo
`yo angular:route <routename>`
• ...creates a new view, a new
controller and adds <routename>
to the router
• ...creates a test for the controller
http://angularjs.org/

30. angular.js - Filters
“HTML enhanced for web apps!”
• use filters in views to format data
• creating a new filter via yo
`yo angular:filter <filtername>`
• ...creates a new filter
• ...creates a test for the filter
http://angularjs.org/

31. angular.js - Directives
“HTML enhanced for web apps!”
• directives define your own,
mega-powerful elements
• creating a new directive via yo
`yo angular:directive <directivename>`
• ...creates a new directive
• ...creates a test for the directive
http://angularjs.org/

32. Live!
Kittycarousel with Angular & Bootstrap in 10 Minutes

33. Q & A