The WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS – Yeoman's workflow is composed of three core tools – Demo

View Github Repository Open presentation in a new window

mjsmith1028

See all presentation from mjsmith1028

The WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS – Yeoman's workflow is composed of three core tools – Demo

0 0

presentations

On Github mjsmith1028 / presentations

The WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

Yeoman.io

Presentation created with: Reveal.js

Typical problems developing new Web applications

  • Where do I Start?
  • Setting up the environment
  • Downloading dependencies
  • Wasted time on boilerplate code

Yeoman to the rescue

Don't worry, Yeoman will take care of it.

Why Yeoman?

Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.

  • Less time worrying about workflow
  • Focus on developing Apps
  • Streamline builds

Yeoman's workflow is composed of three core tools

Yo

http://yeoman.io/

Yo is a scaffolding tool developed by Yeoman. Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build. Scaffolding, in the Yeoman sense of the word, means generating files for your web app based on your specific configuration requests.

Bower

http://bower.io/

Bower is a package manager for the web which allows you to easily manage dependencies for your projects. This includes assets such as JavaScript, images and CSS. It is maintained by Twitter and the open-source community.

Grunt

http://gruntjs.com/

Grunt is a task-based command-line tool for JavaScript projects. It can be used to build projects, but also exposes several commands which you will want to use in your workflow. Many of these commands utilize Grunt tasks under the hood which are maintained by the Yeoman team.

Generators

http://yeoman.io/generators/

Demo

Show examples of Yeoman in action

Just in case, YouTube demo: Yeoman WebApp Demo

Prereqs

Steps

Install a generator via NPM or Yo Run generator via Yo Select configuration options Install packages via Bower
  • References to newly added dependencies are automatically added
Code Grunt, run grunt tasks to test, build, and deploy the App
  • Live reload of webpage, save a file and it is automatically refreshed in the browser
  • BUG! You may need to modify Gruntfile.js, remove lines 165-167. (see Unset wiredep's cwd)

Resources

THE END