Decoupled Development with WordPress JSON APIs

Presentation for WordCamp US 2015

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/
8. https://developer.wordpress.com/calypso/
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
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
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);
62. DEMO
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