Tweet
Tweet

Slide 1

Slide 1 text

WordCamp US 2015 Philadelphia, PA

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

WHAT IS ALL THE FUSS ABOUT A DECOUPLED ARCHITECTURE?

Slide 11

Slide 11 text

Monoliths vs. Microservices

Slide 12

Slide 12 text

Monoliths vs. Microservices

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Monoliths Can Lead to Unhappy Developers

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Use The Best Tools to Do the Coolest Things

Slide 17

Slide 17 text

Work In Parallel

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Future Proof Your Work

Slide 20

Slide 20 text

Caveats and Throat Clearing

Slide 21

Slide 21 text

Caveats and Throat Clearing

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

WP-API Can Grow the WordPress Market

Slide 24

Slide 24 text

METHODS OF DECOUPLING WHICH ONE IS RIGHT FOR YOU?

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

“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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

The Old is New Again

Slide 31

Slide 31 text

Wonder Awaits on the Future Web

Slide 32

Slide 32 text

PROJECTS

Slide 33

Slide 33 text

Haruki Murakami WP + AngularJS Website

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Hoover Mason Trestle WP + AngularJS Webapp

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

A SIMPLE EXAMPLE

Slide 38

Slide 38 text

● 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

● 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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

● 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

Slide 47

Slide 47 text

● 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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Artwork List

Map

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

LIST

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

var postTeaser = '

  • ' + post.title.rendered + '

    ' + post.acf.artist + '

    ' + post.acf.description + '
    • '; $('.post-list').append(postTeaser);

    Slide 56

    Slide 56 text

  • The Schuylkill Chained and The Schuylkill Freed

    William Rush (1756 - 1833)

    As the Fairmount Water …

    • Slide 57

    Slide 57 text

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

    Slide 58

    Slide 58 text

    MAP

    Slide 59

    Slide 59 text

    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 + '

    ');

    Slide 60

    Slide 60 text

    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, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: ‘[YOUR MAPBOX PROJECT ID]’, accessToken: ‘[YOUR MAPBOX ACCESS TOKEN]’ }).addTo(map);

    Slide 61

    Slide 61 text

    No content

    Slide 62

    Slide 62 text

    DEMO

    Slide 63

    Slide 63 text

    No content

    Slide 64

    Slide 64 text

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

    Slide 65

    Slide 65 text

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

    Slide 66

    Slide 66 text

    QUESTIONS? WE’VE GOT ANSWERS