With the release of the WordPress JSON API expected later this year, WordPress is primed to serve as a viable backend for single-page web applications of the future. The presentation will explain the benefits of using WordPress in this context and include a short demonstration to show how WordPress can be integrated in a typical single-page application technology stack.

1. WordPress as a
Backend
WordCamp Dayton 2015 - Andrew Duthie

2. About Me
• JavaScript Engineer at
Automattic
• Co-Host of WordPress
Cincinnati Meetup group
• Previously worked at a local
agency building custom
WordPress themes

3. Web Sites
vs
Web Apps

4. Web Sites are documents

5. Web Apps are interactive

6. Speed Matters
• With JavaScript, you have
the opportunity to render
optimistically
• Even artificial content can
give users the perception
of speed

7. JSON REST API

8. JSON
JavaScript Object Notation
{
"id": 1,
"type": "post",
"slug": "hello-world",
"link": "http://wordpress.dev/hello-world/",
"guid": { "rendered": “http://wordpress.dev/?p=1" },
"date": "2014-08-14T00:02:39",
"modified": "2014-08-14T00:02:39",
"title": { "rendered": "Hello world!” },
"content": { "rendered": "<p>Welcome to WordPress.</p>" },
"excerpt": { "rendered": "<p>Welcome to WordPress.</p>” },
"author": 1,
"featured_image": 0,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"format": "standard"
}

9. REST
Representational State Transfer
Action Endpoint HTTP Verb
List /posts/ GET
Read /posts/1 GET
Create /posts/ POST
Update /posts/1 PUT / PATCH
Delete /posts/1 DELETE

10. API
Application Programming Interface
An API is an contract by which a
programmer can interact with a
particular service

11. WordPress Data Story
XML-RPC API
• Verbose
• Difficult to work with
XML-RPC JSON
<array>
<data>
<value><string>Hello</string></value>
<value><string>World</string></value>
</data>
</array>
[ “Hello”, “World” ]

12. WordPress Data Story
WordPress.com / Jetpack REST API
• Simple to set up
• Secure and mature
• Requires Jetpack
• Extra network hop

13. WordPress Data Story
admin-ajax.php
• Ad hoc endpoints
• Manually configured

14. WordPress JSON API

15. WordPress JSON API
• Alternative to XML-RPC
• REST endpoints
• Extendable
• Expected later this year
• Available now as a plugin

16. WordPress JSON API
Querying
/wp-json/wp/posts?posts_per_page=10
http://codex.wordpress.org/Class_Reference/WP_Query
http://wp-api.org/#posts_retrieve-posts
/wp-json/wp/posts?paged=2

17. WordPress JSON API
Registering Endpoints
register_json_route( ‘my-plugin', '/actions', array(
‘methods' => WP_JSON_Server::READABLE,
‘callback' => array( $this, 'get_actions' ),
) );
register_post_type( ‘movie’, array(
// …
‘show_in_json’ => true,
‘json_base’ => ‘movies’
) );

18. WordPress JSON API
Authentication
• Cookie Authentication
• OAuth1
• Basic Authentication
http://wp-api.org/guides/authentication.html

19. WordPress JSON API
WP-API.js
• Official JavaScript library
• Backbone models and collections
• Transparent nonce handling
https://github.com/WP-API/client-js

20. Use Cases
• Single-page web apps
• Mobile apps
• Widgets
• JavaScript themes
• Other technology stacks

21. Demo
https://github.com/aduth/wordcamp-popular-movies

22. Thanks!
Questions?