• Save
Yeoman
Upcoming SlideShare
Loading in...5
×
 

Yeoman

on

  • 4,079 views

Introduction to Yeoman, includes demo of all three tools to build a single page Backbone.js app

Introduction to Yeoman, includes demo of all three tools to build a single page Backbone.js app

Statistics

Views

Total Views
4,079
Views on SlideShare
4,054
Embed Views
25

Actions

Likes
3
Downloads
0
Comments
0

3 Embeds 25

https://twitter.com 22
http://www.linkedin.com 2
http://r5x64o11-pv080.pd.local 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Yeoman Yeoman Presentation Transcript

  • Yeoman Introducing the 3 wise men of web development
  • Intro • Web Developer • Mobile Developer • @jrcryer
  • three wise men?
  • Yeoman • Modern Workflows for Modern Apps • Version 1.0 RC1 • Three key components • Yo • Bower • Grunt
  • Yo • Scaffolding tool • Similar Rails Generators • Scaffolds project structure, defaults and Gruntfile • Existing generators for: • AngularJS, Chrome App, Flask, Silex, Sinatra, Firefox OS...
  • Yo: Generators • Node Modules • Available via NPM • Rolling your own npm search yeoman-generator http://yeoman.io/generators.html#writing-your-first-generator
  • Bower • Package Manager for the web • Created at Twitter • Runs over Git • No system wide dependencies • No cross project dependencies • Flattens dependency tree
  • Bower: Dependencies • Dependencies are documented in bower.json • Bower CLI tool allows: • Searching for dependencies • Installing dependencies • Registering packages • Packages available for: • jQuery, D3, three.js, Backbone, Modernizr,AngularJS...
  • Grunt • JavaScript Build tool • Automation of repetitive developer tasks • Allows developers to test, preview and build projects • Plugins used to mix and match per project • Configurable tasks
  • Grunt: Plugins • Node Module • JavaScript / CoffeeScript • Creating a plugin: • Plugins available for: • HTMLmin, Mocha, PHPUnit, RECESS, SCSS / LESS http://gruntjs.com/creating-plugins
  • Grunt DevTools
  • Demo Time!
  • Getting Started! • InstallingYo, Grunt and Bower: • Installing a Generator npm install -g yo grunt-cli bower npm install -g generator-backbone generator-mocha
  • Creating a project • Create a new empty project folder • Scaffolding the project mkdir -p ~/projects/backbone && cd ~/projects/backbone yo backbone
  • building App • Create a Model • Create a Collection • Create aView • Create a Router yo backbone:model url yo backbone:collection url yo backbone:view url yo backbone:router url
  • The Router var UrlRouter = Backbone.Router.extend({ routes: { "" : "onAppLoad" }, onAppLoad: function() { var url = new UrlCollection(); var view = new UrlView({ el: '#urls', collection: url }); } });
  • TheView ... events: { "submit form": "create", }, create: function(e) { e.preventDefault(); var input = this.$el.find('input'); var value = input.val(); if (value) { this.collection.create({longUrl: value}); input.val(""); input.focus(); } } ...
  • The Model var UrlModel = Backbone.Model.extend({ defaults: {}, url: "https://www.googleapis.com/urlshortener/v1/url" });
  • Updating theView initialize: function() { this.collection.on('change', this.render, this); }, render: function() { var list = this.$el.find('.items'); list.html(''); _.each(this.collection.models, function(model) { list.append(this.template({model: model.toJSON()})); }, this); return this; },
  • Adding a URL Template <div class="url"> <span class="long"> <a href="<%= model.longUrl %>"><%= model.longUrl %></a> </span> <span class="short"> <a href="<%= model.id %>"><%= model.id %></a> </span> </div>
  • Adding a Dependency • Finding a dependency: • Installing a dependency: bower search backbone.localStorage bower install backbone.localStorage
  • The Collection var UrlCollection = Backbone.Collection.extend({ cache: new Backbone.LocalStorage("urls"), model: UrlModel, initialize: function() { this.on('change', this.cacheUrl, this); this.add(this.cache.findAll()); }, cacheUrl: function(model) { this.cache.create(model); } });
  • Testing • Mocha + Expect describe('Give a URL', function () { it('should have a URL for Google Shortener API', function () { var model = new UrlModel(); expect(model.url).to.eql("https://www.googleapis.com/urlshortener/v1/url"); }); }); • Running the tests: grunt test
  • Preview + Building • Previewing: • Building: grunt server grunt build
  • Fin!