Wordpress bb-portland

510 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
510
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wordpress bb-portland

  1. 1. WordPress +Backbone.jsPortland WP Dev Meetup - June 10, 2013Wednesday, May 29, 13
  2. 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. 3. What is Backbone.js?A lightweight JavaScript framework that canprovide structure for your JavaScript -making development and maintenance moreefficientWednesday, May 29, 13
  4. 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. 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. 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. 7. { name: ‘Lisa’,email: lisa@foo.com }<li><a href=”mailto:lisa@foo.com”>Lisa</a></li>Model ViewWednesday, May 29, 13
  8. 8. <ul></ul>{ name: ‘Bob’,email: bob@foo.com }<li><a href=”mailto:bob@foo.com”>Bob</a></li>Collection View{ name: ‘Lisa’,email: lisa@foo.com }<li><a href=”mailto:lisa@foo.com”>Lisa</a></li>{ name: ‘Jack’,email: jack@foo.com }<li><a href=”mailto:jack@foo.com”>Jack</a></li>Wednesday, May 29, 13
  9. 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. 10. Example Pluginhttp://wordpress.org/plugins/current-commentsRequires WP 3.5 as a minimumWednesday, May 29, 13
  11. 11. Wednesday, May 29, 13
  12. 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. 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. 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. 15. Questions?Wednesday, May 29, 13

×