Put a little Backbone in your WordPress vs. 3
- 1. Put a little Backbone in your WordPress http://tunedin.net/ • @roundearth • adam@10up.com
- 3. Backbone is Awesome Philosophically, Backbone is an attempt to discover the minimal set of data- structuring (models and collections) and user interface (views and URLs) primitives that are generally useful when building web applications with JavaScript
- 4. Should You Use Backbone?
- 5. ☛ Prototypes: Views, Models, Collections. ☛ Plus: Events, Routes, History ☛ Data: bootstrapping & fetching Backbone Basics
- 6. ☛ Fast, interactive, responsive interfaces ☛ Organized code structure ☛ Lightweight Why use Backbone?
- 7. ☛ http://backbonejs.org/#examples ☛ Rdio, Hulu, Gawker, Foursquare, Disqus, Khan Academy, Basecamp, Stripe, AirBnB, Pandora, Code School, CloudApp, Trello and on and on… ☛ Backbone in WordPress core… Some Examples
- 8. Backbone in WordPress Core ☛ media ☛ revisions ☛ themes ☛ what next?
- 9. ☛ Collection functions: _.map, _.where, _.pluck, _.filter ☛ Timing functions: _.memoize, _.throttle, _.debounce, _.once, _.delay, _.defer ☛ Utility: _.pick, _.extend, _.defaults ☛ http://underscorejs.org/ Underscore is Awesome
- 11. WordPress and Backbone ☛ WordPress JSON REST API ☛ wp_localize_script ☛ wp_ajax_(action) ☛ wp_create/verify_nonce ☛ wp_remote_get ☛ get/set_transient ☛ wp_send_json_success/error ☛ wp.template, wp.Backbone.view/subview
- 12. Coding Backbone is fun!
- 13. Coding Backbone is fun! ☛ annotated source code backbonejs.org/docs/backbone.html ☛ simple and extendable - meant to be flexible ☛ clean structure, templates, code data binding
- 14. Considerations ☛ Accessibility ☛ nojs ☛ Internationalization
- 15. Building a Simple App ☛ DEMO 1 ☛ Display a post ☛ Uses View, Model and Template ☛ Post data from the WP REST API
- 16. Template
- 17. Bootstrap Data
- 18. Post Model
- 19. JSON REST API
- 20. Post View
- 21. Initialization
- 22. Result
- 23. A bit more complex ☛ DEMO 2 ☛ Display a post list using bootstrapped data, a template and view ☛ Click post to load post via the WP REST API ☛ Uses Collection to handle all posts ☛ Uses same view from Demo1 for detail view ☛ Uses Router and History to handle routing
- 24. Template
- 25. Bootstrap Data
- 26. Post Collection
- 28. Router
- 29. Initialization
- 30. Result
- 31. More complex ☛ Backbone driven plugin to display user directory ☛ Grabs data by scraping WordCamp attendee page ☛ Data stored in CPT, passed via JSON REST API https://github.com/adamsilverstein/backbone-directory
- 32. Start Using Backbone ☛ Simple concepts ☛ Fast and lightweight ☛ Flexible and extendible ☛ Used in WordPress core
- 33. ☛ Backbone - http://backbonejs.org/ ☛ Underscore - http://underscorejs.org/ ☛ Code School Backbone course - https:// www.codeschool.com/paths/javascript#backbone-js ☛ Developing Backbone Applications - https:// www.codeschool.com/paths/javascript#backbone-js ☛ JSON REST API - https://wordpress.org/plugins/json- rest-api/ & https://github.com/WP-API/WP-API ☛ TLC Transients - github.com/markjaquith/WP-TLC- Transients ☛ wp.Backbone.View/Subview - http://wordpress.tv/ 2014/11/03/mark-jaquith-backbone-views-in- wordpress/ ☛ Demo Code: https://github.com/adamsilverstein/ backbone-demo Resources
- 34. About • Save assembly code onto cassettes • Good at JavaScript & bug squashing • Love contributing to WordPress Core • WP Revisions Component Maintainer • Managing Engineer at 10up http://tunedin.net/ • @roundearth • adam@10up.com