Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Put a little Backbone in your WordPress

2,126 views

Published on

Put a little Backbone in your WordPress

Published in: Internet
  • Hello! I have searched hard to find a reliable and best research paper writing service and finally i got a good option for my needs as ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ⇒ www.WritePaper.info ⇐ is a good website if you’re looking to get your essay written for you. You can also request things like research papers or dissertations. It’s really convenient and helpful.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can ask here for a help. They helped me a lot an i`m highly satisfied with quality of work done. I can promise you 100% un-plagiarized text and good experts there. Use with pleasure! ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Put a little Backbone in your WordPress

  1. 1. Put a little Backbone in your WordPress http://tunedin.net/wcto2014
  2. 2. ☛ Backbone is Awesome ☛ Includes Underscore.js, also awesome ☛ WordPress makes Backbone easier Outline
  3. 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. 4. ☛ Prototypes: Models, Collections, Views ☛ Plus: Events, Routes, History ☛ Getting and Saving Data: ☛ Bootstrapping ☛ AJAX/AJAJ ☛ JSON REST API Backbone Basics
  5. 5. ☛ Highly interactive pages - front end or admin ☛ Single page application with more than one state ☛ Helps keep your code maintainable ☛ Gets your truth out of the DOM ☛ Really simple, well documented, easy to understand ☛ Modular - use what you need ☛ Bundled with WordPress Why use Backbone?
  6. 6. ☛ http://backbonejs.org/#examples ☛ Rdio, Hulu, Gawker, Foursquare, Disqus, Khan Academy, ☛ Backbone in WordPress core… Some Examples
  7. 7. Backbone in WordPress Core ☛ media ☛ revisions ☛ themes ☛ what next?
  8. 8. ☛ Collections: _.map, _.where, _.pluck, _.filter ☛ Functions: _.memoize, _.throttle, _.debounce, _.once, _.delay, _.defer ☛ Utility: _.pick, _.extend, _.defaults ☛ http://underscorejs.org/ Underscore is Awesome
  9. 9. Underscore Examples
  10. 10. Underscore Examples
  11. 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. 12. Coding Backbone is fun!
  13. 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. 14. Considerations ☛ Accessibility ☛ nojs ☛ Internationalization
  15. 15. Building a Demo App ☛ 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
  16. 16. Mockup!
  17. 17. ☛ Model: Person ☛ Collection: PersonCollection ☛ Views: PersonDisplay, PersonDetail, Search Bar, Grid ☛ Router: routes: '?details=:name': , '?search=:search': Structure
  18. 18. Person Model
  19. 19. Person Collection
  20. 20. Views
  21. 21. Router
  22. 22. Fetch
  23. 23. PHP
  24. 24. /wp- json/posts?filter[posts_per_page]=80&filter[or der]=ASC&filter[offset]=0&type=backbonedire ctory Fetch
  25. 25. Templates - Person
  26. 26. Templates - Person Detail
  27. 27. Result
  28. 28. Start Using Backbone ☛ Wireframes ☛ Models, Collections ☛ Views: templates/rendering ☛ Data: bootstrap data, new data, updates ☛ Events ☛ Routing, History
  29. 29. Backbone?
  30. 30. ☛ Backbone - http://backbonejs.org/ ☛ Underscore - http://underscorejs.org/ ☛ Code School Backbone course - https://www.codeschool.com/paths/javascript#backbo ne-js ☛ Developing Backbone Applications - https://www.codeschool.com/paths/javascript#backbo ne-js ☛ JSON REST API - https://wordpress.org/plugins/json- rest-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/ ☛ WP JSON REST API - https://github.com/WP- API/WP-API Resources
  31. 31. About • Save assembly code onto cassettes • Good at JavaScript & bug squashing • Love contributing to WordPress Core • Revisions Component Maintainer • Managing Engineer at 10up http://tunedin.net/wcto2014

×