Modern Workflow for Modern Webapps

@passy

@passy


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

grunt

The JavaScript Task Runner

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

bower

A package manager for the web

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

yo

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

http://yeoman.io/community-generators.html

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
    generator-generator


Extending your app is easy





Packaging rocks!

Bower

$ bower search package

$ bower install [--save]
  package

$ bower uninstall package

$ bower update package

That's all you need to know.



Demo Time!

goo.gl


curl -X POST https://www.googleapis.com/urlshortener/v1/url --header "Content-Type: application/json" --data '{"longUrl": "http://weluse.de/"}'

{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/rskrN0",
 "longUrl": "http://weluse.de/"
} 



Thanks for listening.

Cheerio!

Photo Credit


https://secure.flickr.com/photos/florianric/
https://secure.flickr.com/photos/dipster1/
http://500px.com/johanl
https://secure.flickr.com/photos/jurvetson/

Thanks


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