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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Yeoman

4,109

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
4,109
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!

×