Your SlideShare is downloading. ×
Wordpress bb-portland
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

Wordpress bb-portland


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. WordPress +Backbone.jsPortland WP Dev Meetup - June 10, 2013Wednesday, May 29, 13
  • 2. AgendaWhat’s Backbone.js?What does it bring to the table?Overview of the Framework“Current Comments” Example Plugin WalkthruThings We’ve Learned So FarWednesday, May 29, 13
  • 3. What is Backbone.js?A lightweight JavaScript framework that canprovide structure for your JavaScript -making development and maintenance moreefficientWednesday, May 29, 13
  • 4. What does it bring tothe table?structureencapsulation, separation of concernsevent driven behavior (rendering, etc.)appification of a page ( sync, pushState,etc.)Wednesday, May 29, 13
  • 5. Overview of Backbone.jsData is abstracted into ModelsMultiple Models may be collected intoCollectionsModels and Collections are inserted into theDOM via ViewsModels and Collections are mapped to serverside resourcesWednesday, May 29, 13
  • 6. MoarViews can leverage underscore or othertemplating systems to renderViews can listen to change events onattributes in the model to decide when /how much to re-renderHooking up clicks is straightforwardViews can listen to add / remove events onCollections to add / remove Views for ModelsWednesday, May 29, 13
  • 7. { name: ‘Lisa’,email: }<li><a href=””>Lisa</a></li>Model ViewWednesday, May 29, 13
  • 8. <ul></ul>{ name: ‘Bob’,email: }<li><a href=””>Bob</a></li>Collection View{ name: ‘Lisa’,email: }<li><a href=””>Lisa</a></li>{ name: ‘Jack’,email: }<li><a href=””>Jack</a></li>Wednesday, May 29, 13
  • 9. Potential WP UsesDisplay new posts on home page withoutreloading the entire pageDisplay new comments on posts while you’relooking at it and writing your ownShowing who else is looking at the pagewhile you areLeverage the Jetpack JSON API for dataWednesday, May 29, 13
  • 10. Example Plugin WP 3.5 as a minimumWednesday, May 29, 13
  • 11. Wednesday, May 29, 13
  • 12. Things We’ve Learned SoFarBe aware of your target version. WordPress3.5 includes Backbone 0.9.2, which lackssome interesting features (like add merge)which are in Backbone 1.0Watch out for sharing by reference - if yourmodels or views use defaultsDon’t put View attributes (e.g.“show_comments”) in ModelsWednesday, May 29, 13
  • 13. MoarUse the Collection’s View addOne to achievenesting of things like comment trees (and anintermediate view)Define templates in filterable PHP to makeyour plugin / theme more extensibleUse content filter to pack bootstrap data foreach page/post/commentWednesday, May 29, 13
  • 14. MoarUse the Jetpack JSON API, or write anadmin-ajax endpoint and customize .syncWatch out for render() : views are notnecessarily in the DOM in render() - acontaining view might still need to append itEvent busses are magical and support loosecouplingWednesday, May 29, 13
  • 15. Questions?Wednesday, May 29, 13