Slide 1

Slide 1 text

WP REST API intro / terms / logic / useage tomhermans.com

Slide 2

Slide 2 text

Hi, I’m Tom You might know me of … Sony Telenet freelance WP development get in touch : tomhermans.com

Slide 3

Slide 3 text

Question Time

Slide 4

Slide 4 text

term : API : Application Program Interface agreed set of standardized ways that a particular piece of software can be used; the rules defined for its interaction with the wider world, which govern how other pieces of software can talk to a program and how it will respond.

Slide 5

Slide 5 text

term : JSON: JavaScript Object Notation a way to store information in an organized, easy-to-access manner. In a nutshell, it gives us a human-readable collection of data that we can access in a really logical manner. var jason = { "age" : "24", "gender" : "male" };

Slide 6

Slide 6 text

term : SPA : Single Page Application is a web application or web site that fits on a single web page with the goal of providing a more fluent user experience The page does not reload at any point in the process.

Slide 7

Slide 7 text

WP REST API : A bit of history

Slide 8

Slide 8 text

WP API’s XML-RPC & friends (atom..) XML remote procedure call mobile app admin-ajax lightweight routing layer responds w/ JSON more dev tool - see previous presentation RSS open standard syndication format

Slide 9

Slide 9 text

RESTful API’s Twitter Facebook WordPress.com Stripe .. many more

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

What is REST ? REST = representational state transfer RESTful systems : ● communicate via HTTP ● same HTTP verbs (GET, POST, PUT, DELETE, etc.) like web browsers use ● to retrieve web pages and to send data to remote servers.

Slide 13

Slide 13 text

REST Examples Pretty much everyone who claims to have a REST API, in fact, does not. Exception: WWW - the World Wide Web https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

Slide 14

Slide 14 text

How is WWW restful ? Does your browser (the client) know whether it’s displaying a banking website or a casual game? Nope. It just utilizes standard media types (HTML, CSS, JS .. ) The web doesn’t know whether it is serving you a website for a bank or a game.

Slide 15

Slide 15 text

How does a HTTP request look like ?

Slide 16

Slide 16 text

so, REST uses HTTP to CRUD HTTP to CREATE data : POST HTTP to READ data : GET HTTP to UPDATE data : PUT (with an existing URI) HTTP to DELETE data : DELETE

Slide 17

Slide 17 text

Example sites https://feelingrestful.com/ http://quotesondesign.com/ http://www.michaelbromley.co.uk/ http://qz.com

Slide 18

Slide 18 text

Calypso / WordPress.com

Slide 19

Slide 19 text

What is Calypso Calypso = frontend admin for WP, written in JS with REST API to be used to read/write for WP.com and jetpack sites 1. better user experience - faster & being able to manage multiple sites 2. better dev experience - better tooling + how they deal with JS

Slide 20

Slide 20 text

Calypso how How does Calypso work ? > in a nutshell: Connects to WP.com via node.js, loads rest of JS, loaded async controllers render React components

Slide 21

Slide 21 text

Why is Calypso interesting ? interesting if you want to build a SPA based on WP REST API Do You: 1. have a lot of user interaction ? 2. need quick transitions between interactions ? 3. have multiple front ends ? web/mobile/desktop, powered by same data different mindset, user controls page content with interactions

Slide 22

Slide 22 text

DEMO time

Slide 23

Slide 23 text

So ... this is a start, obviously Different paradigm, different mindset, different useage, different tooling

Slide 24

Slide 24 text

Can I already use it ? Yes, but .. think about SEO, server-side rendering, JS dependencies, etc ..

Slide 25

Slide 25 text

Question Time More questions ? @tomhermans tomhermans.com/contact