Rapidly scaffold your frontend with yeoman
-
Upload
simon-waibl -
Category
Technology
-
view
8.083 -
download
0
Transcript of 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/
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
• 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
`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"
}
`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/
`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
• 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
`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
• 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` - 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!”
http://angularjs.org/
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/
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
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
http://angularjs.org/
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/
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/
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/
Live!Kittycarousel with Angular & Bootstrap in 10 Minutes
Q & A