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
The “Perfect” Stack (opinion)
• WordPress for managing content.
• Isomorphism for the “app-like” experience and code base simplicity and extensibility
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
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.
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
Twenty Sixteen Reacthttps://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.
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'; \NodeifyWP\App::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.
• \NodeifyWP\App::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
\NodeifyWP\App::instance()->register_template_tag( 'wp_head', function() { do_action( 'wp_head' ); } );
Template Tags
\NodeifyWP\App::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\NodeifyWP\App::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
taylorlovett.com
github.com/tlovett1