@vdwijngaert
Koen Van den Wijngaert
SiteOptimo.com
Geek
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
WHAT?
Progressive Web App
using React and
WordPress REST API
Slide 8
Slide 8 text
Table of Contents
1. WordPress REST API
2. React
3. Progressive Web App
Slide 9
Slide 9 text
WordPress REST API
Slide 10
Slide 10 text
What is a REST API?
A way to transfer state between two systems
using a common protocol.
REpresentational STate
Application Programming Interface
Slide 11
Slide 11 text
What is a REST API?
● Resources
● Verbs
● Requests
● Responses
Slide 12
Slide 12 text
REST Resources
A resource has a certain location and can have an
identifier and links to other resources.
https://api.example.com/cars
https://api.example.com/cars/123456
Slide 13
Slide 13 text
REST Verbs
Verbs that are used to display, create and/or
manipulate resources.
We describe them using the HTTP request method.
Slide 14
Slide 14 text
REST Verbs
https://api.example.com/cars
GET Retrieve a list of cars
POST Create a new car
PUT Replace the list of cars with a new one
PATCH Update one or more cars in the list
DELETE Delete the list of cars
Slide 15
Slide 15 text
GET https:/
/api.example.com/cars/123456
Slide 16
Slide 16 text
POST https:/
/api.example.com/cars
> HTTP/1.1 201 CREATED
What I did
● Custom REST Controller for activities
● Added ACF Fields
● Shaved some data off
Slide 22
Slide 22 text
Table of Contents
1. WordPress REST API
2. React
3. Progressive Web App
Slide 23
Slide 23 text
React
A JavaScript library for building
user interfaces
Slide 24
Slide 24 text
Crash Course React
Slide 25
Slide 25 text
React vs jQuery
Slide 26
Slide 26 text
State and Props
Slide 27
Slide 27 text
Let’s Build a React App Together®
Slide 28
Slide 28 text
Let’s Build a React App Together®
WORDCAMP EUROPE 2019
20–22 June, Berlin, Germany | #WCEU
Slide 29
Slide 29 text
Let’s Build a React App Together®
Slide 30
Slide 30 text
Where do we get the good stuff?
GET https://2019.europe.wordcamp.org/wp-json/wp/v2/sessions
Slide 31
Slide 31 text
What Components do we need?
● App
● SessionList
● Session
● Speaker
● Category
● ...
Slide 32
Slide 32 text
Let’s Build a React App Together®
Demo time!
https:/
/localhost:5000
Slide 33
Slide 33 text
Table of Contents
1. WordPress REST API
2. React
3. Progressive Web App
Slide 34
Slide 34 text
Progressive Web Apps
Slide 35
Slide 35 text
What is this PWA thing?
A type of mobile app delivered through the
web, built using HTML, CSS and JavaScript.
They can be installed on any platform that
uses a standards-compliant browser.
✓ Progressive
✓ Working offline
✓ Push notifications
✓ Native experience
Slide 36
Slide 36 text
Main criteria for a valid PWA
✓ Originate from a secure origin
✓ Load while offline
✓ Manifest file with basic information
✓ An icon of at least 144×144
Slide 37
Slide 37 text
manifest.webmanifest
Slide 38
Slide 38 text
ServiceWorker.js
Slide 39
Slide 39 text
ServiceWorker.js
● Runs in its own global script context
● Sits between clients and server
● Can handle multiple clients simultaneously
● Has no direct access to the client DOM
What can it do?
● Intercept HTTP Request
Useful for caching and providing fallbacks
● Subscribe for Push Notifications
● Synchronize in the background
● Register navigation routes
Slide 42
Slide 42 text
Caching strategies
● Cache First
● Network First
● Network Only
● Cache Only
● StaleWhileRevalidate
● ...