Your SlideShare is downloading. ×
Backbone midwestphp
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

Backbone midwestphp

233

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
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. Backbone.js in a Php Environment Midwest Php – March 2, 2013Ken Harris – Sr. Developer, Telkonet.com Milwaukee, WI
  • 2. Trends in Web Apps ● Fatter Clients ● Desktop style apps ● Lots of Javascript ● Lots of CSS ● Requires structure03/03/13 Midwest Php 2
  • 3. Backbone.js ● Framework for client side Javascript ● Organize and structure large JS applications ● Lightweight – only 4kb minified ● Becoming popular03/03/13 Midwest Php 3
  • 4. Backbone.js ● Agnostic & very flexible ● Mixes well with other frameworks & modules ● Lots of ways to do things ● Two Backbone apps may look quite different ● Especially good for migrating an app from server side to client side rendering03/03/13 Midwest Php 4
  • 5. Backbone components ● events ● models ● collections ● views ● routers03/03/13 Midwest Php 6
  • 6. MVC Design Pattern? ● Backbone is not classic MVC ● Model – Data objects for resources ● View – Like a view controller. Control and render templates. ● Templates – Correspond to MVC view. Can use template facility of choice. Get rendered by the view. ● Routers – Like Rails routes.03/03/13 Midwest Php 7
  • 7. Requirements ● Underscore.js – support library ● Especially for collections ● Jquery or Zepto ● Uses jquery.ajax to access server DB ● Json2.js for RESTful persistence03/03/13 Midwest Php 8
  • 8. Booklist Example03/03/13 Midwest Php 9
  • 9. Booklist Example03/03/13 Midwest Php 10
  • 10. Backbone.Events ● Mixin module – can be added to any object ● Bind, trigger, and unbind ● Events are strings (eg. “change”) ● Trigger can pass arguments ● Changes to data models can trigger automatic refresh of views03/03/13 Midwest Php 11
  • 11. Backbone.Eventsvar object = {};_.extend(object, Backbone.Events);object.bind(“poke”, function(msg) { alert(“Just got poked: “+msg); });object.trigger(“poke”, “hello...”);03/03/13 Midwest Php 12
  • 12. Backbone.Model ● Heart of the application ● Data + logic (conversions, validations, computed properties, access control, …) ● Create new model by extending Backbone.Model ● Create instance with new03/03/13 Midwest Php 13
  • 13. Backbone.Modelvar Book = Backbone.Model.extend({ initialize: function() { // do something }, defaults: { loc : , title : , author : }, urlRoot: /booklist/db.php/ });var book = new Book; 03/03/13 Midwest Php 14
  • 14. Backbone.Model ● Properties ● model.id – unique server id ● model.cid – client id ● model.defaults – default attribute values ● Methods ● Initialize() - called on creation ● get(attribute) - getter ● set(attributes) - setter ● validate() - validation03/03/13 Midwest Php 15
  • 15. Backbone.Model ● More methods ● fetch() ● save() ● destroy() ● toJSON() ● Events ● change, destroy, error ● change event can be bound to render a view03/03/13 Midwest Php 16
  • 16. Server Interaction ● Makes RESTful calls to server ● CRUD (create,read,update,delete) ● Create → POST server/collection/id ● Read → GET server/model/id ● Update → PUT ● Delete → DELETE ● Data passed using JSON encoding03/03/13 Midwest Php 17
  • 17. Example Requests● METHOD host/table/id● GET http://myserver/customer/16● GET http://myserver/salesclass● POST http://myserver/payment● DELETE http://myserver/appointment/213703/03/13 Midwest Php 18
  • 18. Backbone.Collection● Ordered set of models● Can listen for events on any model● Create by extending Backbone.Collection● Create an instance usingPhp 03/03/13 Midwest new 19
  • 19. Backbone.Collection var Booklist = Backbone.Collection.extend({ model : Book, url : /phpdemo/db.php }); var booklist = new Booklist;03/03/13 Midwest Php 20
  • 20. Backbone.Collection● Methods ● add() ● remove() ● get(id) ● getByCid(cid) ● Comparator – ordering function ● Uses underscore.js for iteration methods03/03/13 Midwest Php 21
  • 21. Backbone.View ● Control piece that renders a view ● Extend Backbone.View to create new view ● Use new to create an instance ● View.el – associated DOM element ($el) ● initialize() function ● render() function ● $(selector) – locally scoped jQuery03/03/13 Midwest Php 22
  • 22. Backbone.View03/03/13 Midwest Php 23
  • 23. underscore templates ● _.template(“text”) returns a template function which merges properties into the text ● Can embed template in dummy script tag ● <script type=”text/template” id=”add_template”> </script> ● <%= value %> or <% javascript %> ● template1 = _.template(“Hi <%= name %>”); ● result = template1({ name : “bob”});03/03/13 Midwest Php 24
  • 24. add.tmpl03/03/13 Midwest Php 25
  • 25. Backbone.Router ● Route client side pages and connect them to actions and events ● Interfaces with hashchange events ● Reacts to history navigation ● Need to be aware of possible server interactions03/03/13 Midwest Php 26
  • 26. Backbone.Router03/03/13 Midwest Php 27
  • 27. Booklist App ● server ● index.php ● db.php ● client-side ● booklist.js ● templates03/03/13 Midwest Php 28
  • 28. index.php03/03/13 Midwest Php 29
  • 29. db.php03/03/13 Midwest Php 30
  • 30. db.php - continued03/03/13 Midwest Php 31
  • 31. db.php - continued03/03/13 Midwest Php 32
  • 32. References ● Backbone.js Applications (Early Access), Addy Osmani, OReilly (2012) ● Backbone.js: Basics & Beyond, Sarah Mei, Fluent2012 video, OReilly (2012) ● Javascript Master Class, Douglas Crockford, OReilly Media (2009) ● Javascript The Good Parts, Douglas Crockford, OReilly (2008) ● Javascript Web Applications, Alex MacCaw, OReilly (2011) ● Recipes With Backbone, Nick Gauthier and Chris Strom, eee_c (2012) ● Secrets of Javascript Ninjas, John Resig and Bear Bibeault, Manning (2012)03/03/13 Midwest Php 33
  • 33. 03/03/13 Midwest Php 34

×