Decoupled Development with WordPress JSON APIs

D74c365206652832a56fd9ba1fb61d99?s=47 dirtystylus
December 05, 2015

Decoupled Development with WordPress JSON APIs

Presentation for WordCamp US 2015

D74c365206652832a56fd9ba1fb61d99?s=128

dirtystylus

December 05, 2015
Tweet

Transcript

  1. WordCamp US 2015 Philadelphia, PA

  2. Matt Cheney Co-Founder, Pantheon @populist Mark Llobrera Technology Director, Bluecadet

    @dirtystylus
  3. Supporting Material http://dirtystylus.com/decoupled-wordpress •Slides •Github Repos for the example •Links

    to additional Resources
  4. https://wordpress.org/plugins/json-rest-api/

  5. None
  6. None
  7. None
  8. https://developer.wordpress.com/calypso/

  9. None
  10. WHAT IS ALL THE FUSS ABOUT A DECOUPLED ARCHITECTURE?

  11. Monoliths vs. Microservices

  12. Monoliths vs. Microservices

  13. Limits of the Theme Layer as Architecture Theme Layer Plugins

    / Core Permeable Boundary Exciting / awkward game of chance
  14. Monoliths Can Lead to Unhappy Developers

  15. A Strong Separation of Concerns Client WordPress HTTP API Lots

    of Good Things Can Happen
  16. Use The Best Tools to Do the Coolest Things

  17. Work In Parallel

  18. Security Photo: Ian Britton, https://www.flickr.com/photos/freefoto/5692512457

  19. Future Proof Your Work

  20. Caveats and Throat Clearing

  21. Caveats and Throat Clearing

  22. Source: 2014 State of the Word How Do You Use

    WordPress?
  23. WP-API Can Grow the WordPress Market

  24. METHODS OF DECOUPLING WHICH ONE IS RIGHT FOR YOU?

  25. Static Generator / Renderer • Create a fast and resilient

    user-facing site. • Utilize front-end atomic design tools, minimal/ elegant markup, etc. • Read-only, but highly secure and scalabe.
  26. Hybrid • Build up a REST API on your site

    to power dynamic forms/ dashboards. • Many other functions served directly from WordPress as per normal. • Restrains the scope. Allows for particular experiences to be enhanced.
  27. “Single Page” App • Client side JavaScript application runs in-

    browser, pulls data from WordPress via API. • May include user interactions, or be purely content oriented. • Typically utilize a front- end framework like Angular, Backbone, or React.
  28. Native Mobile App / IoT • WordPress powers embedded applications

    via API. • May also present some web functionality to users. • Drive IOS and Android native apps, as well as “internet of things” implementations.
  29. WordPress-on-WordPress • Separation of concerns, but not technologies. • Front-end

    WordPress can control configuration, caching, throttling. • Develop reusable components for a Service-Oriented / Microservices architecture.
  30. The Old is New Again

  31. Wonder Awaits on the Future Web

  32. PROJECTS

  33. Haruki Murakami WP + AngularJS Website

  34. James Ensor / Art Institute of Chicago WP + Cinder

    (C++) touchscreen
  35. Hoover Mason Trestle WP + AngularJS Webapp

  36. Slavery at Monticello: Life & Work on Mulberry Row WP

    + Native iOS / Android App
  37. A SIMPLE EXAMPLE

  38. • WordPress CMS with Artwork custom post type • A

    simple web page to consume data and display it two different ways: • A list of teasers • A map. Playing with Data
  39. What we’ll need WordPress 4.3 WP API v2 (http://v2.wp-api.org) Advanced

    Custom Fields PRO
  40. SANITY CHECK • Enable the WP API Plugin • Make

    sure Permalinks are working • visit /wp-json/wp/v2/posts
  41. None
  42. • In functions.php: create a type called Artwork • Include

    in arguments when setting up Custom Post Type: ◦show_in_rest ◦rest_base ◦rest_controller_class Custom Post Types
  43. $args = array( 'description' => 'All Artworks', 'public' => true,

    … 'show_in_rest' => true, 'rest_base' => 'artwork', 'rest_controller_class' => 'WP_REST_Posts_Controller', 'supports' => array('title','excerpt','thumbnail'), );
  44. • Use ACF to add fields: ◦ artist ◦ description

    ◦ latitude ◦ longitude Custom Post Types
  45. None
  46. • ACF to WP-API (adds ACF data to ouput) ◦

    https://wordpress.org/plugins/acf-to-wp-api/ • Better REST API Featured Images (adds Featured Image data to output) ◦ https://wordpress.org/plugins/better-rest-api-featured- images/ Helper Plugins
  47. • Grab JSON data (from the artwork endpoint) • Create

    unordered list of Artwork: thumbnail, artwork name, artist, description • Create map of Artwork: latitude/longitude fed to LeafletJS Recipe
  48. http://wordcampus2015.local/wp-json/wp/v2/artwork

  49. <section class="display-wrapper"> <section class="listing"> <h1>Artwork List</h1> <ul class="post-list"> </ul> </section>

    <section class="map-wrapper"> <h1>Map</h1> <div id="map"></div> </section> </section>
  50. • LeafletJS ◦ http://leafletjs.com • Mapbox (for getting map tiles)

    ◦ https://www.mapbox.com ◦ Get API key Map
  51. $.ajax( { url: 'http://wordcampus2015.local/wp-json/wp/ v2/artwork', success: function ( data )

    { // do something here }, cache: false } );
  52. $.ajax( { url: 'http://wordcampus2015.local/wp-json/wp/ v2/artwork', success: function ( data )

    { // do something here }, cache: false } );
  53. LIST

  54. $.ajax( { url: 'http://wordcampus2015.local/wp-json/wp/v2/artwork', success: function ( data ) {

    posts = data; for (var i = 0; i < posts.length; i++) { var post = posts[i]; // CREATE LIST ITEMS } }, cache: false } );
  55. var postTeaser = '<li><section class="artwork-teaser"><h1>' + post.title.rendered + '</h1><h2>' +

    post.acf.artist + '</h2><div class="description-wrapper"><div class="artwork- image"><img src="' + post.better_featured_image.media_details.sizes.medium.source_url + '" /></div><div class="artwork-description">' + post.acf.description + '</div></section></li>'; $('.post-list').append(postTeaser);
  56. <li> <section class="artwork-teaser"> <h1>The Schuylkill Chained and The Schuylkill Freed</h1>

    <h2>William Rush (1756 - 1833)</h2> <div class="description-wrapper"> <div class="artwork-image"> <img src="http://wordcampus2015.local/wp-content/ uploads/2015/11/…jpg"> </div> <div class="artwork-description"> <p>As the Fairmount Water …</p> </div> </div> </section> </li>
  57. <ul class="post-list"> </ul> … $('.post-list').append(postTeaser);

  58. MAP

  59. var lat = post.acf.latitude; var long = post.acf.longitude; var marker

    = L.marker([lat, long]).addTo(map); marker.bindPopup('<p><strong>' + post.title.rendered + '</strong></p><p>' + post.acf.artist + '</p>');
  60. var map = L.map('map').setView([39.96634264897658, -75.18358930041654], 16); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? access_token={accessToken}', { attribution:

    'Map data &copy; <a href="http:// openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</ a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: ‘[YOUR MAPBOX PROJECT ID]’, accessToken: ‘[YOUR MAPBOX ACCESS TOKEN]’ }).addTo(map);
  61. None
  62. DEMO

  63. None
  64. Supporting Material http://dirtystylus.com/decoupled-wordpress •Slides •Github Repos for the example •Links

    to additional Resources
  65. Matt Cheney Co-Founder, Pantheon @populist Mark Llobrera Technology Director, Bluecadet

    @dirtystylus
  66. QUESTIONS? WE’VE GOT ANSWERS