• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rapidly scaffold your frontend with yeoman
 

Rapidly scaffold your frontend with yeoman

on

  • 5,408 views

 

Statistics

Views

Total Views
5,408
Views on SlideShare
5,368
Embed Views
40

Actions

Likes
5
Downloads
27
Comments
0

3 Embeds 40

http://funsung.blogspot.com 38
http://funsung.blogspot.jp 1
http://funsung.blogspot.com.br 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rapidly scaffold your frontend with yeoman Rapidly scaffold your frontend with yeoman Presentation Transcript

    • Rapidly ScaffoldYour Front-EndwithYeomanAngularJS,Twitter Bootstrap and Bowerare 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 2012Simon 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 taskshttp://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 theapplication 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 thegenerator 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 ownapplication-scaffolderhttp://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, librariesand frameworks• manages dependencies• also a package-browserhttp://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 printsinformationhttp://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 dependencyinformationand multiple endpoints and theirorderhttp://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 dependencyinformationand multiple endpoints and theirorderhttp://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 asregistries or repositories• use as main endpointand / or additional endpoints• have your own endpoint withbower-server(https://github.com/twitter/bower-server)http://bower.io/
    • `bower` - Contributing“A package manager for the web”• interactively create a bower.jsonby running `bower init`• provide necessary informationsuch as: name, version, dependencies, etc.• register your new package at anendpoint`bower register <pkgname> <endpoint>`• pkgname is reserved on a firstcome, first serve basishttp://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-serveron localhost:9000• watches your project directoryand reloads your browser onchanges• compiles coffee, sass, scss, etc.http://gruntjs.com/
    • `grunt` - Task: test“The Javascript task runner”• starts and connects to karmaserver• runs tests provided in ./testhttp://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 yoursource into the target directory• target directory defaults to ./disthttp://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 Pageshttp://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 TwitterBootstrap-JS based on AngularTip: use angular-bootstrap via bower• Bootstrap-components areaccessible as Angular-directives• CSS & assets have to be installedseparatelyTip: use compass-twitter-bootstrap via bowerhttp://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 newcontroller and adds <routename>to the router• ...creates a test for the controllerhttp://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 filterhttp://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 directivehttp://angularjs.org/
    • Live!Kittycarousel with Angular & Bootstrap in 10 Minutes
    • Q & A