WP REST APIintro / terms / logic / useage

tomhermans.com

Hi, I’m Tom

You might know me of …

SonyTelenetfreelance WP development

get in touch : tomhermans.com

Question Time

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 programand how it will respond.

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"

};

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.

WP REST API : A bit of history

WP API’s

XML-RPC & friends (atom..)XML remote procedure callmobile app

admin-ajaxlightweight routing layerresponds w/ JSONmore dev tool - see previous presentation

RSSopen standard syndication format

RESTful API’s

Twitter

Facebook

WordPress.com

Stripe

.. many more

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.

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

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.

How does a HTTP request look like ?

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

Example sites

https://feelingrestful.com/

http://quotesondesign.com/

http://www.michaelbromley.co.uk/

http://qz.com

Calypso / WordPress.com

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

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

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

DEMO time

So ...

this is a start, obviously

Different paradigm,

different mindset,

different useage,

different tooling

Can I already use it ?

Yes, but ..

think about

SEO,

server-side rendering,

JS dependencies, etc ..

Question Time

More questions ?

@tomhermans

tomhermans.com/contact