Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA based on React and WordPress

PWA based on React and WordPress

This talk is about building an offline-first REACT PWA using the WordPress REST API, lessons learned.

This talk was given at the Ieper Wordpress Meetup group. https://www.meetup.com/nl-NL/Ieper-WordPress-Meetup/

Koen Van den Wijngaert

June 05, 2019
Tweet

More Decks by Koen Van den Wijngaert

Other Decks in Programming

Transcript

  1. Progressive Web Apps using
    React and WordPress

    View full-size slide

  2. @vdwijngaert
    Koen Van den Wijngaert
    SiteOptimo.com
    Geek

    View full-size slide

  3. WHAT?
    Progressive Web App
    using React and
    WordPress REST API

    View full-size slide

  4. Table of Contents
    1. WordPress REST API
    2. React
    3. Progressive Web App

    View full-size slide

  5. WordPress REST API

    View full-size slide

  6. What is a REST API?
    A way to transfer state between two systems
    using a common protocol.
    REpresentational STate
    Application Programming Interface

    View full-size slide

  7. What is a REST API?
    ● Resources
    ● Verbs
    ● Requests
    ● Responses

    View full-size slide

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

    View full-size slide

  9. REST Verbs
    Verbs that are used to display, create and/or
    manipulate resources.
    We describe them using the HTTP request method.

    View full-size slide

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

    View full-size slide

  11. GET https:/
    /api.example.com/cars/123456

    View full-size slide

  12. POST https:/
    /api.example.com/cars
    > HTTP/1.1 201 CREATED

    View full-size slide

  13. GET https:/
    /api.example.com/cars

    View full-size slide

  14. WordPress REST API

    View full-size slide

  15. WordPress Rest API
    https://api.example.com/wp-json/wp/v2/posts
    ● Posts, categories, pages, settings, …
    ● Calypso
    ● Extendable
    ● Modifiable (meta fields, …)
    ● Libraries

    View full-size slide

  16. What I did
    ● Custom REST Controller for activities
    ● Added ACF Fields
    ● Shaved some data off

    View full-size slide

  17. Table of Contents
    1. WordPress REST API
    2. React
    3. Progressive Web App

    View full-size slide

  18. React
    A JavaScript library for building
    user interfaces

    View full-size slide

  19. Crash Course React

    View full-size slide

  20. React vs jQuery

    View full-size slide

  21. State and Props

    View full-size slide

  22. Let’s Build a React App Together®

    View full-size slide

  23. Let’s Build a React App Together®
    WORDCAMP EUROPE 2019
    20–22 June, Berlin, Germany | #WCEU

    View full-size slide

  24. Let’s Build a React App Together®

    View full-size slide

  25. Where do we get the good stuff?
    GET https://2019.europe.wordcamp.org/wp-json/wp/v2/sessions

    View full-size slide

  26. What Components do we need?
    ● App
    ● SessionList
    ● Session
    ● Speaker
    ● Category
    ● ...

    View full-size slide

  27. Let’s Build a React App Together®
    Demo time!
    https:/
    /localhost:5000

    View full-size slide

  28. Table of Contents
    1. WordPress REST API
    2. React
    3. Progressive Web App

    View full-size slide

  29. Progressive Web Apps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. manifest.webmanifest

    View full-size slide

  33. ServiceWorker.js

    View full-size slide

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

    View full-size slide

  35. ServiceWorker.js Lifecycle
    Installed
    Downloaded Activated

    View full-size slide

  36. What can it do?
    ● Intercept HTTP Request
    Useful for caching and providing fallbacks
    ● Subscribe for Push Notifications
    ● Synchronize in the background
    ● Register navigation routes

    View full-size slide

  37. Caching strategies
    ● Cache First
    ● Network First
    ● Network Only
    ● Cache Only
    ● StaleWhileRevalidate
    ● ...

    View full-size slide

  38. https://googlechrome.github.io/samples/service-worker/basic/

    View full-size slide

  39. Recap
    1. WordPress REST API
    2. React
    3. Progressive Web App

    View full-size slide

  40. That’s it. Meer weten?
    Stel je vraag

    View full-size slide