SlideShare a Scribd company logo
You Got React.js in My PHP!
Who Am I?
• My name is Taylor Lovett
• Director of Web Engineering at 10up
• Open source community member
• WordPress core contributor
• One of the creators of ElasticPress
• Creator of NodeifyWP
@tlovett12
10up is hiring!
@tlovett12
taylor.lovett@10up.com
What is the ideal way to build,
serve, and manage a website?
The “Perfect” Stack (opinion)
• WordPress for managing content.
• Isomorphism for the “app-like” experience and
code base simplicity and extensibility
What is an isomorphic web
application?
Isomorphic Web Applications
• Applications where the same code is used for
both server side and client side rendering
• Create single page applications without having to
wait a long time for initial loading
• Run JavaScript in the browser and server side via
Node.js
• “App-like” experiences are arguably the future of
the web
Where are we now?
PHP in WordPress
• WordPress is built in PHP.
• Can’t run PHP client side.
Current Options for the “App-like”
WordPress Experience
• Headless WordPress. Create a front-end in a
Node.js framework that interacts with the WP
API.
• Handle initial render with PHP and bootstrap JS
templates into theme.
How do we get ourselves to
the “perfect” web stack?
NodeifyWP
https://github.com/10up/nodeifywp
NodeifyWP
• Framework for creating isomorphic web
applications in PHP and WordPress.
• Uses PHP to execute JavaScript (Node.js) on the
server.
• Benefit from the editorial experience of WordPress
with the latest greatest Node.js frameworks and
technologies such as React.js.
• No separate Node.js/Express server necessary
NodeifyWP Requirements
• Google V8 Engine
• PHP V8Js Extension
• PHP 5.6+
• WordPress 4.7+
Twenty Sixteen React
https://github.com/10up/twentysixteenreact
Twenty Sixteen React
• Example theme using NodeifyWP
• Uses NodeifyWP to serve a true isomorphic
application in WordPress
• Uses modern technologies: Node.js, React.js,
and Redux
Twenty Sixteen React
• Google V8 and PHP V8Js can be tricky to set
up.
• Twenty Sixteen React contains a Docker
compose file for spinning up an environment
ready for NodeifyWP.
Create your own theme with
NodeifyWP
Getting Set Up
• Make sure you have at least WP version 4.7 or
the JSON REST API is installed.
• Include NodeifyWP in your theme. With
composer:



composer require 10up/nodeifywp
Functions.php
• NodeifyWP bypasses all standard WordPress
template files: index.php, single.php, page.php,
etc.
• To initialize NodeifyWP in your theme add the
following to the top of functions.php:
require_once __DIR__ . '/vendor/autoload.php';
NodeifyWPApp::setup(
__DIR__ . '/js/server.js',
get_stylesheet_directory_uri() . '/js/client.js'
);
What Did That Do?
• First, we required our composer autoloader so
NodeifyWP is included automatically.
• NodeifyWPApp::setup() takes two
parameters: path to server side JS and path to
client side JS.
Server-side JavaScript
• When we’ve initialized our NodeifyWP application,
the following will be available in your server-side
JS:



PHP.context.$route

PHP.context.$nav_menus

PHP.context.$sidebars

PHP.context.$posts

PHP.context.$template_tags

PHP.context.$user

PHP.client_js_url
• For full documentation see README.md
Template Tags
• NodeifyWP contains a template tag API for
localizing hooks, options, etc. for use in our
server-side JS.
• NodeifyWP comes with some default template
tags.
Template Tags
NodeifyWPApp::instance()->register_template_tag(
'wp_head',
function() {
do_action( 'wp_head' );
}
);
Template Tags
NodeifyWPApp::instance()->register_template_tag(
'twentysixteen_the_custom_logo',
function() {
the_custom_logo();
}
);
Post Tags
• Sometimes we need to register “tags” within
each post. For example, we need the featured
image URL or markup for each post.
Post Tags
NodeifyWPApp::instance()->register_post_tag(
'twentysixteen_post_thumbnail',
function() {
if ( ! has_post_thumbnail() ) {
return;
}
if ( is_singular() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php else : ?>
<a class="post-thumbnail" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'post-thumbnail' ); ?>
</a>
<?php endif;
}
);
Application Changes
• Nodeify WP registers an API endpoint at:

/wp-json/nodeifywp/v1/route
• The endpoint takes a “location” GET parameter
and returns the new state of the application (new
route, template tags, posts, post tags, etc.)
• This endpoint can be extended for custom
application behavior.
Application Changes
GET /wp-json/nodeifywp/v1/route?location=my-page%2F
{
"template_tags": {
"wp_head": "..."
},
"route": {
"type": "single",
"object_id": 2,
"document_title": "My Page - Test Site",
"object_type": "page"
},
"posts": [ ... ],
"nav_menus": { ... },
"sidebars": { ... },
"user": { ... }
}
Again, Start with Twenty Sixteen React
• Twenty Sixteen React provides a great starter
application using React.js and Redux.
Questions?
We need to send a PUT request to this endpoint with
our post data. Of course we must authenticate before
doing this.
@tlovett12
10up.com
taylor.lovett@10up.com
taylorlovett.com
github.com/tlovett1

More Related Content

What's hot (20)

PDF
Modernizing WordPress Search with Elasticsearch
Taylor Lovett
 
PPTX
The JSON REST API for WordPress
Taylor Lovett
 
PDF
Unlocking the Magical Powers of WP_Query
Dustin Filippini
 
PDF
OpenERP and Perl
OpusVL
 
KEY
WordPress APIs
mdawaffe
 
PDF
Software Development with Open Source
OpusVL
 
PDF
Perl in the Real World
OpusVL
 
PDF
Introduction to CouchDB
OpusVL
 
PPTX
Caching, Scaling, and What I've Learned from WordPress.com VIP
Erick Hitter
 
PDF
Beyond The Browser - Creating a RESTful Web Service With WordPress
Christopher Reding
 
PDF
Theming in WordPress - Where do I Start?
Edmund Turbin
 
PDF
Introduction to CQ5
Michele Mostarda
 
PPT
DSpace UI Prototype Challenge: Spring Boot + Thymeleaf
Tim Donohue
 
PPT
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
PDF
SSDs are Awesome
Barry Abrahamson
 
PPTX
WordPress CLI in-depth
Sanjay Willie
 
PDF
API Design & Security in django
Tareque Hossain
 
PDF
High Performance WordPress II
Barry Abrahamson
 
PDF
PowerShell for SharePoint Developers
Boulos Dib
 
PPTX
Day 7 - Make it Fast
Barry Jones
 
Modernizing WordPress Search with Elasticsearch
Taylor Lovett
 
The JSON REST API for WordPress
Taylor Lovett
 
Unlocking the Magical Powers of WP_Query
Dustin Filippini
 
OpenERP and Perl
OpusVL
 
WordPress APIs
mdawaffe
 
Software Development with Open Source
OpusVL
 
Perl in the Real World
OpusVL
 
Introduction to CouchDB
OpusVL
 
Caching, Scaling, and What I've Learned from WordPress.com VIP
Erick Hitter
 
Beyond The Browser - Creating a RESTful Web Service With WordPress
Christopher Reding
 
Theming in WordPress - Where do I Start?
Edmund Turbin
 
Introduction to CQ5
Michele Mostarda
 
DSpace UI Prototype Challenge: Spring Boot + Thymeleaf
Tim Donohue
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
SSDs are Awesome
Barry Abrahamson
 
WordPress CLI in-depth
Sanjay Willie
 
API Design & Security in django
Tareque Hossain
 
High Performance WordPress II
Barry Abrahamson
 
PowerShell for SharePoint Developers
Boulos Dib
 
Day 7 - Make it Fast
Barry Jones
 

Viewers also liked (20)

PDF
Integrating React.js Into a PHP Application
Andrew Rota
 
PDF
Integrating Node.js with PHP
Lee Boynton
 
PDF
Fluxible
Taylor Lovett
 
PPTX
What You Missed in Computer Science
Taylor Lovett
 
PDF
Wordpress search-elasticsearch
Taylor Lovett
 
PDF
React server side rendering performance
Nick Dreckshage
 
PDF
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
Ryan Weaver
 
ODP
Scaling and securing node.js apps
Maciej Lasyk
 
PDF
Integrating React.js with PHP projects
Ignacio Martín
 
PPTX
PHP and node.js Together
Chris Tankersley
 
PDF
WordCamp Cantabria - Código mantenible con WordPress
Asier Marqués
 
PDF
Doctrine2 sf2Vigo
Ignacio Martín
 
PDF
Refactorizando Pccomponentes.com con Symfony
Mario Marín
 
PDF
How Symfony Changed My Life
Matthias Noback
 
PDF
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Ignacio Martín
 
PDF
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Ryan Weaver
 
PDF
Desarrollo código mantenible en WordPress utilizando Symfony
Asier Marqués
 
PDF
Keeping the frontend under control with Symfony and Webpack
Ignacio Martín
 
PDF
Guard Authentication: Powerful, Beautiful Security
Ryan Weaver
 
PDF
Symfony: Your Next Microframework (SymfonyCon 2015)
Ryan Weaver
 
Integrating React.js Into a PHP Application
Andrew Rota
 
Integrating Node.js with PHP
Lee Boynton
 
Fluxible
Taylor Lovett
 
What You Missed in Computer Science
Taylor Lovett
 
Wordpress search-elasticsearch
Taylor Lovett
 
React server side rendering performance
Nick Dreckshage
 
Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony C...
Ryan Weaver
 
Scaling and securing node.js apps
Maciej Lasyk
 
Integrating React.js with PHP projects
Ignacio Martín
 
PHP and node.js Together
Chris Tankersley
 
WordCamp Cantabria - Código mantenible con WordPress
Asier Marqués
 
Doctrine2 sf2Vigo
Ignacio Martín
 
Refactorizando Pccomponentes.com con Symfony
Mario Marín
 
How Symfony Changed My Life
Matthias Noback
 
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Ignacio Martín
 
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Ryan Weaver
 
Desarrollo código mantenible en WordPress utilizando Symfony
Asier Marqués
 
Keeping the frontend under control with Symfony and Webpack
Ignacio Martín
 
Guard Authentication: Powerful, Beautiful Security
Ryan Weaver
 
Symfony: Your Next Microframework (SymfonyCon 2015)
Ryan Weaver
 
Ad

Similar to You Got React.js in My PHP (20)

PDF
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
PDF
Hello world - intro to node js
Refresh Annapolis Valley
 
PDF
Introduction to Infrastructure as Code & Automation / Introduction to Chef
Nathen Harvey
 
PPTX
Nodejs
Akhil Gopan
 
PDF
Node.js to the rescue
Marko Heijnen
 
PPTX
Advanced Web Technology.pptx
ssuser35fdf2
 
PDF
Extending WordPress as a pro
Marko Heijnen
 
PDF
Building the next generation of themes with WP Rig 2.0
Morten Rand-Hendriksen
 
PDF
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
PDF
Wordpress beyond blogging
Julien Minguely
 
PDF
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
Roy Sivan
 
PDF
The WordPress Way
Kan Ouivirach, Ph.D.
 
PPTX
Introduction to node.js by jiban
Jibanananda Sana
 
PDF
Web Fundamental
SiliconExpert Technologies
 
PDF
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
PPTX
Beginners Node.js
Khaled Mosharraf
 
PPTX
Building a REST API Microservice for the DevNet API Scavenger Hunt
Ashley Roach
 
PPTX
ASP.NET Core 1.0
Ido Flatow
 
PPTX
They why behind php frameworks
Kirk Madera
 
PDF
Improve WordPress performance with caching and deferred execution of code
Danilo Ercoli
 
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
Hello world - intro to node js
Refresh Annapolis Valley
 
Introduction to Infrastructure as Code & Automation / Introduction to Chef
Nathen Harvey
 
Nodejs
Akhil Gopan
 
Node.js to the rescue
Marko Heijnen
 
Advanced Web Technology.pptx
ssuser35fdf2
 
Extending WordPress as a pro
Marko Heijnen
 
Building the next generation of themes with WP Rig 2.0
Morten Rand-Hendriksen
 
React on rails v6.1 at LA Ruby, November 2016
Justin Gordon
 
Wordpress beyond blogging
Julien Minguely
 
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
Roy Sivan
 
The WordPress Way
Kan Ouivirach, Ph.D.
 
Introduction to node.js by jiban
Jibanananda Sana
 
Integrating React.js Into a PHP Application: Dutch PHP 2019
Andrew Rota
 
Beginners Node.js
Khaled Mosharraf
 
Building a REST API Microservice for the DevNet API Scavenger Hunt
Ashley Roach
 
ASP.NET Core 1.0
Ido Flatow
 
They why behind php frameworks
Kirk Madera
 
Improve WordPress performance with caching and deferred execution of code
Danilo Ercoli
 
Ad

Recently uploaded (20)

PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
Biography of Daniel Podor.pdf
Daniel Podor
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
July Patch Tuesday
Ivanti
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
Advancing WebDriver BiDi support in WebKit
Igalia
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Biography of Daniel Podor.pdf
Daniel Podor
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
July Patch Tuesday
Ivanti
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Advancing WebDriver BiDi support in WebKit
Igalia
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 

You Got React.js in My PHP