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.

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…
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
30. PHP == LOGIC
32. It’s alive, it’s alive!
33. AND NOW, FOR SOME JAVASCRIPT
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!