Your SlideShare is downloading. ×
Yeoman
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Yeoman

3,948
views

Published on

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

Published in: Technology, Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,948
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Yeoman Introducing the 3 wise men of web development
  • 2. Intro • Web Developer • Mobile Developer • @jrcryer
  • 3. three wise men?
  • 4. Yeoman • Modern Workflows for Modern Apps • Version 1.0 RC1 • Three key components • Yo • Bower • Grunt
  • 5. Yo • Scaffolding tool • Similar Rails Generators • Scaffolds project structure, defaults and Gruntfile • Existing generators for: • AngularJS, Chrome App, Flask, Silex, Sinatra, Firefox OS...
  • 6. Yo: Generators • Node Modules • Available via NPM • Rolling your own npm search yeoman-generator http://yeoman.io/generators.html#writing-your-first-generator
  • 7. Bower • Package Manager for the web • Created at Twitter • Runs over Git • No system wide dependencies • No cross project dependencies • Flattens dependency tree
  • 8. 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...
  • 9. 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
  • 10. Grunt: Plugins • Node Module • JavaScript / CoffeeScript • Creating a plugin: • Plugins available for: • HTMLmin, Mocha, PHPUnit, RECESS, SCSS / LESS http://gruntjs.com/creating-plugins
  • 11. Grunt DevTools
  • 12. Demo Time!
  • 13. Getting Started! • InstallingYo, Grunt and Bower: • Installing a Generator npm install -g yo grunt-cli bower npm install -g generator-backbone generator-mocha
  • 14. Creating a project • Create a new empty project folder • Scaffolding the project mkdir -p ~/projects/backbone && cd ~/projects/backbone yo backbone
  • 15. 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
  • 16. The Router var UrlRouter = Backbone.Router.extend({ routes: { "" : "onAppLoad" }, onAppLoad: function() { var url = new UrlCollection(); var view = new UrlView({ el: '#urls', collection: url }); } });
  • 17. 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(); } } ...
  • 18. The Model var UrlModel = Backbone.Model.extend({ defaults: {}, url: "https://www.googleapis.com/urlshortener/v1/url" });
  • 19. 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; },
  • 20. 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>
  • 21. Adding a Dependency • Finding a dependency: • Installing a dependency: bower search backbone.localStorage bower install backbone.localStorage
  • 22. 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); } });
  • 23. 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
  • 24. Preview + Building • Previewing: • Building: grunt server grunt build
  • 25. Fin!