Rapidly scaffold your frontend with yeoman

Rapidly Scaffold Your Front-End with YeomanAngularJS, Twitter Bootstrap and Bower

are just some of the Buzzwords these slides contain

• 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

Yeoman“Modern workflows for modern web apps”

http://yeoman.io/

http://angularjs.org/


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.



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

`yo`“Modern workflows for modern web apps”

• scaffolds out new applicationsvia generators(like webapp, angular, and many more)

• writes grunt configs

• invokes grunt tasks

http://yeoman.io/



`yo` - The generator“Modern workflows for modern web apps”

• like a “template for your app”

• type I - the boilerplate copiercopies existing boilerplates to the application directory

• type II - the application scaffolderfor build systems, sub-generators, dependency management, etc.

http://yeoman.io/



`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 itselfinvoke with `yo generator:sub-generator`

http://yeoman.io/



`yo` - The generator-generator“Modern workflows for modern web apps”

• like a “meta-template”

• helps building your own application-scaffolder

http://yeoman.io/



`yo` - Find generators“Modern workflows for modern web apps”

• generators are installed via npm`npm search yeoman-generator`

• common generators arewebapp, angular, ember, karma, etc.

http://yeoman.io/



Contents





• deployment




`bower`“A package manager for the web”

• installs front-end assets, libraries and frameworks

• manages dependencies

• also a package-browser

http://bower.io/



`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/



`bower` - Configuration“A package manager for the web”

• configure via .bowerrc-filethe .bowerrc file resides eitherglobally in ~ or locally in .

• specify a custom directory,a custom .json file for dependency informationand multiple endpoints and their order

http://bower.io/



`bower` - Configuration“A package manager for the web”

• configure via .bowerrc-filethe .bowerrc file resides eitherglobally in ~ or locally in .

• specify a custom directory,a custom .json file for dependency informationand 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"

}



https://bower.mycompany.com

https://bower.mycompany.com

https://bower.herokuapp.com

https://bower.herokuapp.com

`bower` - Custom endpoints“A package manager for the web”

• endpoints are also known as registries or repositories

• use as main endpointand / or additional endpoints

• have your own endpoint with bower-server(https://github.com/twitter/bower-server)

http://bower.io/

https://github.com/twitter/bower-server

https://github.com/twitter/bower-server



`bower` - Contributing“A package manager for the web”

• interactively create a bower.json by running `bower init`

• provide necessary informationsuch 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/



Contents





• deployment




`grunt`“The Javascript task runner”

• runs predefined workflowsa.k.a tasks for you

• common yeoman tasks areserver, watch, test, build, karma, etc.

• invoked manually or fromwithin `yo`

http://gruntjs.com/



`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/



`grunt` - Task: test“The Javascript task runner”

• starts and connects to karma server

• runs tests provided in ./test

http://gruntjs.com/



`grunt` - Task: build“The Javascript task runner”

• `grunt build` or simply `grunt` builds your projectthis starts lots of compiling, compressing, linting, testing, fancyfying and stuffing your source into the target directory

• target directory defaults to ./dist

http://gruntjs.com/



Contents





• deployment



• Live! - Kittycarousel with Angular & Bootstrap in 10 Minutes!

`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/



AngularJS“HTML enhanced for web apps!”




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!




Contents





• deployment


• angular-ui/bootstrap, routes, filters, directives


angular.js - Bootstrap“HTML enhanced for web apps!”

• angular-ui/bootstrap is the Twitter Bootstrap-JS based on AngularTip: use angular-bootstrap via bower

• Bootstrap-components are accessible as Angular-directives

• CSS & assets have to be installed separatelyTip: use compass-twitter-bootstrap via bower




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




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




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




Live!Kittycarousel with Angular & Bootstrap in 10 Minutes

Q & A

Rapidly scaffold your frontend with yeoman

Technology

modern web apps generators

web endpoints

modern web appshttp

web congure

yo generator

bower register

gruntcli yo

grunt server