Download - Wordpress as a Backend
![Page 1: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/1.jpg)
WordPress as a Backend
WordCamp Dayton 2015 - Andrew Duthie
![Page 2: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/2.jpg)
About Me
• JavaScript Engineer at Automattic
• Co-Host of WordPress Cincinnati Meetup group
• Previously worked at a local agency building custom WordPress themes
![Page 3: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/3.jpg)
Web Sites vs
Web Apps
![Page 4: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/4.jpg)
Web Sites are documents
![Page 5: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/5.jpg)
Web Apps are interactive
![Page 6: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/6.jpg)
Speed Matters• With JavaScript, you have
the opportunity to render optimistically
• Even artificial content can give users the perception of speed
![Page 7: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/7.jpg)
JSON REST API
![Page 8: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/8.jpg)
JSONJavaScript 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" }
![Page 9: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/9.jpg)
RESTRepresentational 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
![Page 10: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/10.jpg)
APIApplication Programming Interface
An API is an contract by which a programmer can interact with a
particular service
![Page 11: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/11.jpg)
WordPress Data StoryXML-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” ]
![Page 12: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/12.jpg)
WordPress Data StoryWordPress.com / Jetpack REST API
• Simple to set up • Secure and mature • Requires Jetpack • Extra network hop
![Page 13: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/13.jpg)
WordPress Data Storyadmin-ajax.php
• Ad hoc endpoints • Manually configured
![Page 14: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/14.jpg)
WordPress JSON API
![Page 15: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/15.jpg)
WordPress JSON API
• Alternative to XML-RPC • REST endpoints • Extendable • Expected later this year • Available now as a plugin
![Page 16: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/16.jpg)
WordPress JSON APIQuerying
/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
![Page 17: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/17.jpg)
WordPress JSON APIRegistering 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’ ) );
![Page 18: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/18.jpg)
WordPress JSON APIAuthentication
• Cookie Authentication • OAuth1 • Basic Authentication
http://wp-api.org/guides/authentication.html
![Page 19: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/19.jpg)
WordPress JSON APIWP-API.js
• Official JavaScript library • Backbone models and collections • Transparent nonce handling
https://github.com/WP-API/client-js
![Page 20: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/20.jpg)
Use Cases
• Single-page web apps • Mobile apps • Widgets • JavaScript themes • Other technology stacks
![Page 21: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/21.jpg)
Demo
https://github.com/aduth/wordcamp-popular-movies
![Page 22: Wordpress as a Backend](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55a9a9181a28aba8318b4583/html5/thumbnails/22.jpg)
Thanks!
Questions?