Build isomorphic JavaScript applications within WordPress using NodeifyWP.

1. Isomorphic WordPress
Themes with NodeifyWP

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

3. 10up is hiring!
@tlovett12
taylor.lovett@10up.com

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

6. What is an isomorphic web
application?

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

8. Where are we now?

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?

12. NodeifyWP
https://github.com/10up/nodeifywp

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

15. NodeifyWP Requirements
• Google V8 Engine
• PHP V8Js Extension
• PHP 5.6+
• WordPress 4.7+

16. NodeifyWP Environment
https://github.com/10up/nodeifywp-environment

17. Twenty Sixteen React
https://github.com/10up/twentysixteenreact

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

19. Create your own theme with
NodeifyWP

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.

25. Template Tags
NodeifyWPApp::instance()->register_template_tag(
'wp_head',
function() {
do_action( 'wp_head' );
}
);

26. Template Tags
NodeifyWPApp::instance()->register_template_tag(
'twentysixteen_the_custom_logo',
function() {
the_custom_logo();
}
);

27. Post Tags
• Sometimes we need to register “tags” within
each post. For example, we need the featured
image URL or markup for each post.

28. 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;
}
);

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.

30. 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": { ... }
}

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