Modern Workflow for Modern Webapps



Pascal Hartig
CTO @ weluse
Open Source Addict

The front-end tooling landscape is constantly evolving.

The Build Toolbox

Linting. Dependency Resolution. JS/CSS Concatenation. Template Compilation. CSS Flattening. PNG/GIF/JPEG/SVG compression. JS Minification. HTML Cleanup. Asset Revving. CSS Preprocessing. CSS Prefixing. Live Reloading. Test Running. 

Tools should help automate repetitive tasks and free up time to focus on building and improving your app.

Enter Yeoman

A tooling workflow for the modern
web application developer

Goal 1: From idea to prototype in < 10 mins

Goal 2: Reduce the setup time for your tools

Goal 3: Automate repetitive tasks

Goal 4: Reduce time writing boilerplate

Yo, Grunt, Bower


The JavaScript Task Runner

  • Think Rake/Cake/Make/Jake in JavaScript
    + Guard
  • Huge ecosystem
  • 1230+ plugins on npm


A package manager for the web

  • Unopinionated
  • Runs over Git
  • Flat dependency tree
  • 3800+ packages


what glues it together

  • Customizable project setup
    through generators
  • Initial project scaffolding
  • Component scaffolding
    (models, directives, tests, ...)
  • 160+ generators on npm

The old-fashioned Workflow

  • Find an HTML Boilerplate
  • Download it, add it to project
  • Find a UI Boilerplate
  • Download it, add it to project
  • Download project libs, add 'em
  • Copy boilerplate for models,
    views, setup
  • Setup test runner
  • Setup build process
  • Write Real Code!

Can we do better?

$ yo webapp

  • HTML5 Boilerplate
  • Twitter Bootstrap
  • Project Structure
  • Mocha Tests
  • RequireJS (optional)
  • Modernizr (optional)
  • Build process
  • ...

Can we do even better?

$ yo angular

  • HTML5 Boilerplate
  • Twitter Bootstrap
  • AngularJS
  • Karma Testrunner
  • Scaffolding for Models, Directives, Routes, Views, Values, Constants, Services, Factories, ...
  • DI-aware JavaScript minification
  • CoffeeScript support

Can we do even better?

$ yo chromeapp

  • HTML5 Boilerplate
  • Twitter Bootstrap
  • Permission wizard
  • Chrome app manifest
  • Default icon
  • Build process

What else?

  • Flight
  • Backbone (Boilerplate)
  • Ember
  • Bookmarklets
  • CommonJS modules
  • Wordpress
  • jQuery Plugins
  • Grunt Plugins
  • Slideshows

Writing your own is easy

  • Can be written for any
     framework or workflow
  • Can integrate with your backend
  • Fork an existing one or start from scratch with

Extending your app is easy

Packaging rocks!


$ bower search package

$ bower install [--save]

$ bower uninstall package

$ bower update package

That's all you need to know.

Demo Time!

curl -X POST --header "Content-Type: application/json" --data '{"longUrl": ""}'

 "kind": "urlshortener#url",
 "id": "",
 "longUrl": ""

Thanks for listening.


Photo Credit


Slides heavily inspired by a
presentation by the magnificent Addy Osmani <3