Using the API in Large & Small Projects

Talk given at Brighton WordCamp 2017

We have a brief look at the WordPress API, before deep-diving into different examples where we've deployed the API.

We'll look at alternative data models - including Elasticsearch -
the impact of using transients and speculate about the future impact of the API on the direction of WordPress.

Unedited video available here: https://www.youtube.com/watch?v=FxsDOxq6Q5I&feature=youtu.be

Transcript

1. USING THE API
2. seanblakeley.com sean@seanblakeley.co.uk Sean Blakeley • Lead Producer & Product Owner @Pragmatic • Running enterprise level scrum projects • Previously I was a Senior Dev • & I’ve been working with the web & WordPress for a very, very long time
3. WHO?
4. WHAT?
5. WHY?
6. HOW?
7. WHEN?
8. MAÑANA?
9. API AS LAYERS
10. LAYER 1: The Website
11. LAYER 2: JavaScript Distributing the data around the page
12. LAYER 3: The API Call Requesting the Data
13. LAYER 4: The API Data The data itself - in JSON format
14. LAYER 5: The API EndPoint The code that generates the JSON data file
15. Write Once & Distribute Anywhere Feed a website, native app, aggregator or even a IoT toaster
16. LIBERATING YOUR DATA Making it free from your website
17. WHY? Performance Usability Flexibility Freedom { Because it’s PUFFIE :) Integration Extendability
18. WordPress as the Centre of a Content Hub A true application platform - sharing data between different sources
19. WordPress as a Headless CMS Removing the classic output - the website
20. HOW?
21. Postman Get Postman at https://www.getpostman.com/
22. JSON Viewer Chrome Browser extension
23. Starting Playing Make API calls - then try exchanging data between sites
24. React jQuery Processing API Data JavaScript - vanilla or using a framework - is normally used for processing
25. WHEN?
26. SHARING DATA I am Team GB Ambitious project to create Britain’s Biggest Ever Sports Day
27. Sharing Data Data needed to be regularly moved from an existing site into a new site
28. Definition of Success Unique searches from any location - results provided by another source
29. Costly Direct API Requests We needed to store data, pulled via API - rather than direct requests
30. Request Data Process Data Searchable Prepare Data +ID Data Model 3 pots - New, Edited & Deleted - updated upon each successful request
32. HEADLESS CMS Shwimmer A public-facing and queryable API
33. Standard Model WordPress feeds a MySQL database - which is called to display the site
34. Alternative Model Using Elasticsearch for performance - alongside MySQL
35. Elasticsearch Performance impact - down from 3-4 seconds
36. Bypass The WordPress Waterfall Performance impact of a custom, small MU Plugin
37. Importance of Documentation Any API is only as good as its documentation - this is an automated tool
38. INTEGRATION Sage Advice Multisite blog integrated with an existing Sitecore site
39. https://sage-example.com/api/v1/related?tags=wordcamp&category =conference&max_results=16&word_count=12&secret_key=hello Example API EndPoint Enables requester to refine the results as much (or as little) as required
40. EndPoint Function Custom data weighting engine
41. Frictionless UX Numerous touchpoints enables frictionless movement between systems
42. Acme CMS Data Lake Enable the sharing of data between different systems
43. VISUALISATION Site in Numbers Big data visualisation
44. Visualisations Converting big data into visualisations
45. Huge Datasets The API can be used to expose huge datasets
46. API Performance Long queries can take a long time to resolve
47. Add Transients to the API Put API data into transients to make it fly
48. RESOURCES HM White Paper API Slack Channel Zac Gordon’s JS for WP
49. MAÑANA?
50. Modular Structure Frontend developers have embraced modular development for a while
51. Modular Content Gutenberg moves us towards modular content & away from spaghetti code
52. Decoupling Front & Back - Why WordPress? Because WordPress is prefered by editors & content teams around the world
53. Sean Blakeley seanblakeley.com | sean@seanblakeley.co.uk THANK YOU :)