isomorphic wordpress applications with nodeifywp
TRANSCRIPT
Isomorphic WordPress Themes with NodeifyWP
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
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• 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+
NodeifyWP Environmenthttps://github.com/10up/nodeifywp-environment
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
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'; \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