Yeoman - Santa Barbara JavaScript Meetup
Click here to load reader
-
Upload
tim-doherty -
Category
Technology
-
view
1.261 -
download
0
Transcript of Yeoman - Santa Barbara JavaScript Meetup
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!!!