Theme Development with the REST API

C9a5478931da1bbdcc0be2800daa2915?s=47 Jack Lenox
September 23, 2014

Theme Development with the REST API

A talk about WordPress theme development using the REST API that I gave at WordPress Leeds' September Dev Night.

C9a5478931da1bbdcc0be2800daa2915?s=128

Jack Lenox

September 23, 2014
Tweet

Transcript

  1. THEME DEVELOPMENT WITH THE REST API IT’S THEMING JIM, BUT

    NOT AS WE KNOW IT…
  2. @jacklenox

  3. FIND THE CODE ON GITHUB https://github.com/jacklenox/REST-API-Theme

  4. WHAT IS REST API?

  5. REPRESENTATIONAL STATE TRANSFER APPLICATION PROGRAMMING INTERFACE

  6. REST API • Pure data (JSON) • Fast • Due

    in WordPress core in 4.1/4.2 (probably Spring 2015) • Available now as a plugin: wp-api.org • There is also a public WordPress.com REST API that you can use with any self-hosted site via Jetpack…
  7. None
  8. None
  9. WHY WOULD YOU WANT TO BUILD A THEME THAT USES

    THE REST API?
  10. Y u build theme with REST API? • Speed •

    More engaging user experience • Better mobile experience • More control (failed connections etc.)
  11. WHAT SHOULD I USE TO BUILD A THEME THAT USES

    THE REST API?
  12. Just some recommendations • {{ mustache }} • Backbone •

    HTML5/JS stuff: localStorage, WebSockets, Application Cache
  13. MUSTACHE YOU SAY?

  14. What is {{ mustache }}? • Logic-less templating language •

    Pure <markup> with the occasional {{ placeholder }} • Can be used by a whole load of languages • Importantly in this instance, PHP and JavaScript
  15. AND BACKBONE?

  16. What’s Backbone? • Super-lightweight JavaScript framework • MVC(ish) • Essentially

    designed to improve the organisation of your JavaScript • Designed for interaction with REST APIs (that’s lucky isn’t it?)
  17. AND SOME OTHER HTML5 STUFF?

  18. Yep… • localStorage • WebSockets • Application Cache

  19. SO, A REST API-BASED THEME ‘EY?

  20. SOUNDS GREAT, WHAT’S THE CATCH?

  21. Challenges • SEO? • JavaScript (what if it isn’t enabled?)

    • WordPress options… • Customisable permalinks? • Customizerrrrrr? • Plugins omgbbq?
  22. BUT SURELY YOU HAVE ANSWERS TO THESE QUESTIONS HOLMES?

  23. INDEED WATSON… INDEED.

  24. Rise to the challenges! • SEO – non-JS backup •

    JS – non-JS backup • WordPress options – umm, we’ll come back to this later
  25. SO LET’S GET STUCK IN!

  26. Fugly…

  27. LET’S SPLIT LOGIC AND MARKUP

  28. {{MUSTACHE}} == MARKUP

  29. None
  30. PHP == LOGIC

  31. None
  32. It’s alive, it’s alive!

  33. AND NOW, FOR SOME JAVASCRIPT

  34. None
  35. None
  36. GOOD?

  37. SO HOW CAN WE IMPROVE THIS?

  38. localStorage • We can put a lot of stuff in

    here to speed things up (post URLs and IDs) • Possibly even REST API responses? • Maybe load stuff asynchronously when user first visits the site?
  39. WebSockets • Use this instead of AJAX for our additional

    requests • Ratchet (PHP library for WebSockets)
  40. Application Cache • We can create a proper offline experience

    for users • Any JS can run when the user isn't connected to the internet if it's stored in Application Cache • There are a lot of complications around Application Cache • Hopefully in the not too distant future we can use Service Worker instead
  41. SO THERE WE HAVE IT. GO FORTH AND MULTIPLY.

  42. ANY QUESTIONS?

  43. @jacklenox jack@automattic.com Thank you!