+ All Categories
Home > Technology > You Got React.js in My PHP

You Got React.js in My PHP

Date post: 16-Apr-2017
Category:
Upload: taylor-lovett
View: 430 times
Download: 0 times
Share this document with a friend
31
You Got React.js in My PHP!
Transcript

You Got React.js in My PHP!

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

10up is hiring!@tlovett12

[email protected]

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?

NodeifyWPhttps://github.com/10up/nodeifywp

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+

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.

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

[email protected]

taylorlovett.com

github.com/tlovett1


Recommended