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