THEME DEVELOPMENT
WITH THE REST API
IT’S THEMING JIM, BUT NOT AS WE KNOW IT…
Slide 2
Slide 2 text
@jacklenox
Slide 3
Slide 3 text
FIND THE CODE ON GITHUB
https://github.com/jacklenox/REST-API-Theme
Slide 4
Slide 4 text
WHAT IS REST API?
Slide 5
Slide 5 text
REPRESENTATIONAL STATE TRANSFER
APPLICATION PROGRAMMING INTERFACE
Slide 6
Slide 6 text
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…
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
WHY WOULD YOU WANT TO BUILD A
THEME THAT USES THE REST API?
Slide 10
Slide 10 text
Y u build theme with REST API?
• Speed
• More engaging user experience
• Better mobile experience
• More control (failed connections
etc.)
Slide 11
Slide 11 text
WHAT SHOULD I USE TO BUILD A THEME
THAT USES THE REST API?
Slide 12
Slide 12 text
Just some recommendations
• {{ mustache }}
• Backbone
• HTML5/JS stuff: localStorage, WebSockets, Application Cache
Slide 13
Slide 13 text
MUSTACHE YOU SAY?
Slide 14
Slide 14 text
What is {{ mustache }}?
• Logic-less templating language
• Pure with the occasional {{ placeholder }}
• Can be used by a whole load of languages
• Importantly in this instance, PHP and JavaScript
Slide 15
Slide 15 text
AND BACKBONE?
Slide 16
Slide 16 text
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?)
BUT SURELY YOU HAVE ANSWERS TO
THESE QUESTIONS HOLMES?
Slide 23
Slide 23 text
INDEED WATSON… INDEED.
Slide 24
Slide 24 text
Rise to the challenges!
• SEO – non-JS backup
• JS – non-JS backup
• WordPress options – umm, we’ll come back to this later
Slide 25
Slide 25 text
SO LET’S GET STUCK IN!
Slide 26
Slide 26 text
Fugly…
Slide 27
Slide 27 text
LET’S SPLIT LOGIC AND MARKUP
Slide 28
Slide 28 text
{{MUSTACHE}} == MARKUP
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
PHP == LOGIC
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
It’s alive, it’s alive!
Slide 33
Slide 33 text
AND NOW, FOR SOME JAVASCRIPT
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
GOOD?
Slide 37
Slide 37 text
SO HOW CAN WE IMPROVE THIS?
Slide 38
Slide 38 text
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?
Slide 39
Slide 39 text
WebSockets
• Use this instead of AJAX for our additional requests
• Ratchet (PHP library for WebSockets)
Slide 40
Slide 40 text
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