Slide 1

Slide 1 text

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?)

Slide 17

Slide 17 text

AND SOME OTHER HTML5 STUFF?

Slide 18

Slide 18 text

Yep… • localStorage • WebSockets • Application Cache

Slide 19

Slide 19 text

SO, A REST API-BASED THEME ‘EY?

Slide 20

Slide 20 text

SOUNDS GREAT, WHAT’S THE CATCH?

Slide 21

Slide 21 text

Challenges • SEO? • JavaScript (what if it isn’t enabled?) • WordPress options… • Customisable permalinks? • Customizerrrrrr? • Plugins omgbbq?

Slide 22

Slide 22 text

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

Slide 41

Slide 41 text

SO THERE WE HAVE IT. GO FORTH AND MULTIPLY.

Slide 42

Slide 42 text

ANY QUESTIONS?

Slide 43

Slide 43 text

@jacklenox [email protected] Thank you!