Decoupled Development with WordPress JSON APIs

Presentation for WordCamp US 2015

Transcript

1. WordCamp US 2015
   Philadelphia, PA
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. https://developer.wordpress.com/calypso/
   

   View Slide

9. View Slide

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

    View Slide

11. Monoliths vs. Microservices
    

    View Slide

12. Monoliths vs. Microservices
    

    View Slide

13. Limits of the Theme Layer as Architecture
    Theme
    Layer
    Plugins /
    Core
    Permeable
    Boundary
    Exciting / awkward
    game of chance
    

    View Slide

14. Monoliths Can Lead to Unhappy Developers
    

    View Slide

15. A Strong Separation of Concerns
    Client
    WordPress
    HTTP API
    Lots of Good
    Things Can
    Happen
    

    View Slide

16. Use The Best Tools to Do the Coolest Things
    

    View Slide

17. Work In Parallel
    

    View Slide

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

    View Slide

19. Future Proof Your Work
    

    View Slide

20. Caveats and Throat Clearing
    

    View Slide

21. Caveats and Throat Clearing
    

    View Slide

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

    View Slide

23. WP-API Can Grow the WordPress Market
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

30. The Old is New Again
    

    View Slide

31. Wonder Awaits on the Future Web
    

    View Slide

32. PROJECTS
    

    View Slide

33. Haruki Murakami
    WP + AngularJS Website
    

    View Slide

34. James Ensor / Art Institute of Chicago
    WP + Cinder (C++) touchscreen
    

    View Slide

35. Hoover Mason Trestle
    WP + AngularJS Webapp
    

    View Slide

36. Slavery at Monticello: Life & Work on Mulberry Row
    WP + Native iOS / Android App
    

    View Slide

37. A SIMPLE EXAMPLE
    

    View Slide

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
    

    View Slide

39. What we’ll need
    WordPress 4.3
    WP API v2 (http://v2.wp-api.org)
    Advanced Custom Fields PRO
    

    View Slide

40. SANITY CHECK
    • Enable the WP API Plugin
    • Make sure Permalinks are working
    • visit /wp-json/wp/v2/posts
    

    View Slide

41. View Slide

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
    

    View Slide

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'),
    );
    

    View Slide

44. ● Use ACF to add fields:
    ○ artist
    ○ description
    ○ latitude
    ○ longitude
    Custom Post Types
    

    View Slide

45. View Slide

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
    

    View Slide

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
    

    View Slide

48. http://wordcampus2015.local/wp-json/wp/v2/artwork
    

    View Slide

49. 
    
    Artwork List
    
    
    
    
    Map
    
    
    
    

    View Slide

50. ● LeafletJS
    ○ http://leafletjs.com
    ● Mapbox (for getting map tiles)
    ○ https://www.mapbox.com
    ○ Get API key
    Map
    

    View Slide

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

    View Slide

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

    View Slide

53. LIST
    

    View Slide

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
    } );
    

    View Slide

55. var postTeaser = '' +
    post.title.rendered + '' + post.acf.artist +
    '' +
    post.acf.description + '';
    $('.post-list').append(postTeaser);
    

    View Slide

56. 
    
    The Schuylkill Chained and The Schuylkill Freed
    William Rush (1756 - 1833)
    
    
    
    
    
    As the Fairmount Water …
    
    
    
    
    

    View Slide

57. 
    
    …
    $('.post-list').append(postTeaser);
    

    View Slide

58. MAP
    

    View Slide

59. var lat = post.acf.latitude;
    var long = post.acf.longitude;
    var marker = L.marker([lat, long]).addTo(map);
    marker.bindPopup('' + post.title.rendered +
    '' + post.acf.artist + '');
    

    View Slide

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 © OpenStreetMap contributors, href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA
    a>, Imagery © Mapbox',
    maxZoom: 18,
    id: ‘[YOUR MAPBOX PROJECT ID]’,
    accessToken: ‘[YOUR MAPBOX ACCESS TOKEN]’
    }).addTo(map);
    

    View Slide

61. View Slide

62. DEMO
    

    View Slide

63. View Slide

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

    View Slide

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

    View Slide

66. QUESTIONS?
    WE’VE GOT ANSWERS
    

    View Slide