Rapidly scaffold your frontend with yeoman

9,106 views
8,808 views

Published on

Published in: Technology, Business

Rapidly scaffold your frontend with yeoman

  1. 1. Rapidly ScaffoldYour Front-EndwithYeomanAngularJS,Twitter Bootstrap and Bowerare just some of the Buzzwords these slides contain
  2. 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 2012Simon Waibl@seym - github/elseym - f/simon.waibl
  3. 3. Yeoman“Modern workflows for modern web apps”http://yeoman.io/
  4. 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. 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. 6. `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/
  7. 7. `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/
  8. 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 thegenerator itselfinvoke with `yo generator:sub-generator`http://yeoman.io/
  9. 9. `yo` - The generator-generator“Modern workflows for modern web apps”• like a “meta-template”• helps building your ownapplication-scaffolderhttp://yeoman.io/
  10. 10. `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/
  11. 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. 12. `bower`“A package manager for the web”• installs front-end assets, librariesand frameworks• manages dependencies• also a package-browserhttp://bower.io/
  13. 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 printsinformationhttp://bower.io/
  14. 14. `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/
  15. 15. `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"}
  16. 16. `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/
  17. 17. `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/
  18. 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. 19. `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/
  20. 20. `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/
  21. 21. `grunt` - Task: test“The Javascript task runner”• starts and connects to karmaserver• runs tests provided in ./testhttp://gruntjs.com/
  22. 22. `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/
  23. 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. 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 Pageshttp://yeoman.io/
  25. 25. AngularJS“HTML enhanced for web apps!”http://angularjs.org/
  26. 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. 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. 28. 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/
  29. 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 newcontroller and adds <routename>to the router• ...creates a test for the controllerhttp://angularjs.org/
  30. 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 filterhttp://angularjs.org/
  31. 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 directivehttp://angularjs.org/
  32. 32. Live!Kittycarousel with Angular & Bootstrap in 10 Minutes
  33. 33. Q & A

×