7. NOPE.IN THE LOOP?
IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
LATEST NEWS?
LATEST NEWS?
8. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example: Latest News
• WIRED module used
everywhere
• WP REST API req’d
additional HTTP request
• needs deduping
(sometimes)
LATEST NEWS?
9. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
YES.
ELEMENTARY,
MY DEAR.
THIRD PARTY?
GET REQUEST
TO /POSTS/
ENDPOINT
WELL, SORT OF
10. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example:
• include vendor js
• add outbrain data
attributes
• fallback: WP REST API
11. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
var apiUrl = 'http://' + location.host + '/wp-json/wp/v2/posts/';
// Fallback if OBR not available
if ( typeof OBR === 'undefined' ) {
$( getAll('poweredByOutbrain') ).remove();
return $.getJSON( apiUrl, function(res) {
if ( elementId === 'we-recommend' ) {
return smart.rec( get('we-recommend') );
}
}
}
12. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
smart = (function() {
var mostRecent = function( target, apiUrl ) {
function render( res ) {
var frag = document.createDocumentFragment();
var data = res.slice( 0, 5 );
data.forEach(function( value, i ) {
var currLi = document.createElement('li');
....
frag.appendChild( currLi );
});
return target.appendChild( frag );
}
return $.getJSON( apiUrl, render );
};
return {
rec: mostRecent
};
}());
13. YES, WITH MY
CONDOLENCESCUSTOM JSON?
GET REQUEST
TO CUSTOM
ENDPOINT
THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
14. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example:
• Custom endpoint
• Parse WP post content to
markdown
• Output in Apple Native
Format
LATEST NEWS?
16. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Plugin ParserWP DB
17. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Plugin Parser Apple News Custom JSON
18. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Plugin Parser Apple News Custom JSON
{
"role": "gallery",
"layout": "carouselLayoutNoTop",
"items": [
{
"path": "http://www.wired.com/wp-content/uploads/2016/01/CES_07-NEW-
NEW2.jpg",
"URL": "bundle://CES_07-NEW-NEW2.jpg",
"caption": "Drones as far as the eye can see."
},
{
"path": "http://www.wired.com/wp-content/uploads/2016/01/CES_11-NEW-
NEW2.jpg",
"URL": "bundle://CES_11-NEW-NEW2.jpg",
"caption": "There are still some old-school immersion tactics. This
attendee is sitting through a pre-programmed routine to lower his heart
rate and help him feel more relaxed."
}
]
}
19. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Apple News Preview
(simulators)
Apple News Custom JSON
21. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example: Betta Beta Data Getta
• Publish/update hook
• Make POST request via
WP REST API with post_id
LIVE: www.wired.com
BETA: beta.wired.com
1. data-push
1
LATEST NEWS?
22. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example: Betta Beta Data Getta
• Validate request
• Make GET request via WP
REST API for post_id
• Create post
LIVE: www.wired.com
BETA: beta.wired.com
2. data-pull
2
LATEST NEWS?
23. LATEST NEWS? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
public function __construct() {
add_action( 'wp_insert_post', array( $this, 'notify_beta_site_post' ),
100, 3 );
}
public function notify_beta_site_post( $post_id, $post, $update ) {
$this->update_object( $post_id, 'post' );
}
public function update_object( $post_id, $object ) {
$this->make_request( $post_id, $object );
}
29. IN THE LOOP? THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
Example:
• Node application listens
for requests from Slack
• Bot invited to channel
• Every comment or image
creates a “liveblog
update” post type via WP
REST API
• WP template w/ React
updates content
Liveblog
37. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?LATEST NEWS?
Example: Homepage Curator (in the future)
• Dashboard: Replace WP posts admin table
ajax with SPA using React components
• Create custom WP REST API endpoint for
homepage and all section fronts
• Front end: Build homepage and section fronts
with React components
• Ability to swipe from section to section
without reload
41. THIRD PARTY? CUSTOM JSON?
SYNCH’ING? EXTERNAL? SPA?
LATEST NEWS?
NOPE. WELL, SORT OF.
YES, WITH MY
CONDOLENCES
YEP, WE CAN
AUTOMATE
THAT
SURE, LET’S
GET CREATIVE!
YES, BECAUSE
#NODEJS
42. THIRD PARTY? CUSTOM JSON? SYNCH’ING? EXTERNAL? SPA?
All Code Samples in this Gist:
http://bit.ly/day-of-rest-2016-kv
Slides:
http://www.slideshare.net/kvignos/wired-and-the-wp-rest-api
LATEST NEWS?