isomorphic wordpress applications with nodeifywp
TRANSCRIPT
![Page 1: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/1.jpg)
Isomorphic WordPress Themes with NodeifyWP
![Page 2: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/2.jpg)
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
![Page 4: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/4.jpg)
What is the ideal way to build, serve, and manage a website?
![Page 5: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/5.jpg)
The “Perfect” Stack (opinion)
• WordPress for managing content.
• Isomorphism for the “app-like” experience and code base simplicity and extensibility
![Page 6: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/6.jpg)
What is an isomorphic web application?
![Page 7: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/7.jpg)
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
![Page 8: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/8.jpg)
Where are we now?
![Page 9: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/9.jpg)
PHP in WordPress
• WordPress is built in PHP.
• Can’t run PHP client side.
![Page 10: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/10.jpg)
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.
![Page 11: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/11.jpg)
How do we get ourselves to the “perfect” web stack?
![Page 13: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/13.jpg)
![Page 14: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/14.jpg)
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
![Page 15: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/15.jpg)
NodeifyWP Requirements
• Google V8 Engine
• PHP V8Js Extension
• PHP 5.6+
• WordPress 4.7+
![Page 16: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/16.jpg)
NodeifyWP Environmenthttps://github.com/10up/nodeifywp-environment
![Page 17: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/17.jpg)
Twenty Sixteen Reacthttps://github.com/10up/twentysixteenreact
![Page 18: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/18.jpg)
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
![Page 19: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/19.jpg)
Create your own theme with NodeifyWP
![Page 20: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/20.jpg)
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
![Page 21: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/21.jpg)
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' );
![Page 22: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/22.jpg)
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.
![Page 23: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/23.jpg)
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
![Page 24: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/24.jpg)
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.
![Page 25: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/25.jpg)
Template Tags
\NodeifyWP\App::instance()->register_template_tag( 'wp_head', function() { do_action( 'wp_head' ); } );
![Page 26: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/26.jpg)
Template Tags
\NodeifyWP\App::instance()->register_template_tag( 'twentysixteen_the_custom_logo', function() { the_custom_logo(); } );
![Page 27: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/27.jpg)
Post Tags
• Sometimes we need to register “tags” within each post. For example, we need the featured image URL or markup for each post.
![Page 28: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/28.jpg)
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; } );
![Page 29: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/29.jpg)
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.
![Page 30: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/30.jpg)
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": { ... } }
![Page 31: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/31.jpg)
Again, Start with Twenty Sixteen React
• Twenty Sixteen React provides a great starter application using React.js and Redux.
![Page 32: Isomorphic WordPress Applications with NodeifyWP](https://reader033.vdocument.in/reader033/viewer/2022042619/58e565171a28abd82b8b49c9/html5/thumbnails/32.jpg)
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