TECHNOLOGY | INNOVATION | SOLUTIONS

Yeoman: Workflows for Fun and ProfitTim Doherty

TECHNOLOGY | INNOVATION | SOLUTIONS

The Problem

???

TECHNOLOGY | INNOVATION | SOLUTIONS

The Problem

• Wide selection of front-end tools and libraries• Learning how to use them together is difficult• There are lots of ways to do the same thing• Even if you know how, configuration is tedious• Common tasks must be repeated manually• Lots of boilerplate to bootstrap a new app• Lots of boilerplate to add new features to an app

TECHNOLOGY | INNOVATION | SOLUTIONS

Enter Yeoman

Workflow comprised of 3 Node-based tools: Yo: scaffold applications and files

Bower: manage client-side dependencies

*Grunt: JavaScript task runner

*Gulp is also supported

TECHNOLOGY | INNOVATION | SOLUTIONS

• Command-line tool to scaffold applications/files• Invokes Yeoman Generators to do the heavy lifting

$ yo <generator name>

TECHNOLOGY | INNOVATION | SOLUTIONS

Yeoman Generators

• Node packages invoked by the Yo tool • Blueprints for scaffolding applications/files

• Official Yeoman generators• Community Yeoman generators• Custom Yeoman generators

TECHNOLOGY | INNOVATION | SOLUTIONS

Generators

Once, to generate basic app structure$ yo <generator name> <options> --<flags>

• Creates directory structure• Creates boilerplate application files from templates• Creates Grunt config, Node and Bower manifests• Installs Node and Bower dependencies

TECHNOLOGY | INNOVATION | SOLUTIONS

Sub-Generators

Any time you need a new source file(s)$ yo <generator>:<sub-generator> …

• Creates new file(s) from template(s)• JavaScript source file• Unit test• HTML template• Etc.

• Bonus: sub-generators can manage script tags • Automatically insert/remove tags in index.html

TECHNOLOGY | INNOVATION | SOLUTIONS

Custom Generators

Can’t find the right official/community generator?

• Extend base Yeoman generator• Do stuff exactly the way you want• Up-front cost• Maintenance cost

TECHNOLOGY | INNOVATION | SOLUTIONS

Why use Yeoman Generators?

• Increase productivity / reduce boilerplate• Pre-configure automation tools and tasks• Improve consistency and quality• Impose application structure• Help enforce code style

TECHNOLOGY | INNOVATION | SOLUTIONS

Bower

Client-side package manager from Twitter

• Install/remove scripts & assets from command line• Packages can be installed from:

• Public registry• Private registry• Git / Subversion endpoint• Local folder• Url• Symlink

TECHNOLOGY | INNOVATION | SOLUTIONS

Bower

• $ bower search angular• $ bower install jquery• $ bower uninstall underscore• $ bower install git://my.git.com/myComponent• $ bower install ~/source/myComponent• $ bower link <myComponent>

TECHNOLOGY | INNOVATION | SOLUTIONS

Why Use Bower?

• Simplified script/asset management• Installs transitive dependencies• Versioning of components• Author your own reusable components• Dependency manifest for automated installation• Yeoman generators create manifest for you

TECHNOLOGY | INNOVATION | SOLUTIONS

Grunt

JavaScript task runner on Node

• Command line interface + local Grunt instance• Configuration file + plugins (node packages)• Chain tasks to create new “meta” tasks

TECHNOLOGY | INNOVATION | SOLUTIONS

Grunt Tasks

$ grunt <task name>

• Spawn a development server• Lint source code• Spawn unit & e2e test runners• CSS preprocessing (Sass/Less/Stylus)• Concatenate JavaScript and CSS files• Minify concatenated files…and much more

TECHNOLOGY | INNOVATION | SOLUTIONS

Why Use Grunt?

• Write and configure automation tasks in JavaScript• Grunt ecosystem is huge, with hundreds of plugins• Can’t find the right plugin? Write one yourself• Yeoman generators setup grunt for you

• Install local grunt• Scaffold your Gruntfile• Install plugins

TECHNOLOGY | INNOVATION | SOLUTIONS

Putting it all Together

Yo: Creates your app structure. Configures Bower and Grunt for you. Installs Bower and Grunt (Node) dependencies. Creates new files on-demand.

Bower: Installs / removes scripts and assets via command line. Installs / removes transitive dependencies. Simplifies version management.

Grunt: Runs tasks that comprise your workflow. Tasks can run granularly, i.e., “grunt test” or in batch, i.e., “grunt build”

TECHNOLOGY | INNOVATION | SOLUTIONS

Summary

• Yeoman increases productivity and quality• Modular, extensible architecture • The “Yeoman workflow” is an opinionated track

intended provide a robust starting point for web apps• Similar toolsets include Brunch and Lineman, but

Yeoman has the widest adoption

TECHNOLOGY | INNOVATION | SOLUTIONS

Common Objections

“I don’t need all that cruft”Maybe not, but how are you doing it now? Is it easier?

“Bower downloads a bunch of crap I don’t need”Poor manifest, contact the author. Still, who cares? Bandwidth and storage are cheap in exchange for Bower’s functionality.

“This is way too complicated, I don’t need it for my simple app”Maybe, but chances are your app will grow, and so will your team. Automating your workflow early on will make your life a lot easier.

“I don’t understand what all these Grunt tasks do”Spend some time learning each. Yeoman generators help shorten the learning curve with working, preconfigured examples.

TECHNOLOGY | INNOVATION | SOLUTIONS

Questions?

TECHNOLOGY | INNOVATION | SOLUTIONS

Yeoman FTW!!!