2. 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
4. What is the ideal way to build,
serve, and manage a website?
5. The “Perfect” Stack (opinion)
• WordPress for managing content.
• Isomorphism for the “app-like” experience and
code base simplicity and extensibility
7. 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
9. PHP in WordPress
• WordPress is built in PHP.
• Can’t run PHP client side.
10. 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.
11. How do we get ourselves to
the “perfect” web stack?
14. 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
18. 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
20. 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
21. 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'
);
22. 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.
23. 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
24. 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.
29. 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.
31. Again, Start with Twenty Sixteen React
• Twenty Sixteen React provides a great starter
application using React.js and Redux.
32. 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