Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

You Got React.js in My PHP

Create isomorphic JavaScript applications in PHP and WordPress.

  • Login to see the comments

You Got React.js in My PHP

  1. 1. You Got React.js in My PHP!
  2. 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. 3. 10up is hiring! @tlovett12
  4. 4. What is the ideal way to build, serve, and manage a website?
  5. 5. The “Perfect” Stack (opinion) • WordPress for managing content. • Isomorphism for the “app-like” experience and code base simplicity and extensibility
  6. 6. What is an isomorphic web application?
  7. 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. 8. Where are we now?
  9. 9. PHP in WordPress • WordPress is built in PHP. • Can’t run PHP client side.
  10. 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. 11. How do we get ourselves to the “perfect” web stack?
  12. 12. NodeifyWP
  13. 13. 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
  14. 14. NodeifyWP Requirements • Google V8 Engine • PHP V8Js Extension • PHP 5.6+ • WordPress 4.7+
  15. 15. Twenty Sixteen React
  16. 16. 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
  17. 17. 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.
  18. 18. Create your own theme with NodeifyWP
  19. 19. 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
  20. 20. 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' );
  21. 21. 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.
  22. 22. Server-side JavaScript • When we’ve initialized our NodeifyWP application, the following will be available in your server-side JS:
 PHP.client_js_url • For full documentation see
  23. 23. 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.
  24. 24. Template Tags NodeifyWPApp::instance()->register_template_tag( 'wp_head', function() { do_action( 'wp_head' ); } );
  25. 25. Template Tags NodeifyWPApp::instance()->register_template_tag( 'twentysixteen_the_custom_logo', function() { the_custom_logo(); } );
  26. 26. Post Tags • Sometimes we need to register “tags” within each post. For example, we need the featured image URL or markup for each post.
  27. 27. 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; } );
  28. 28. 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.
  29. 29. 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": { ... } }
  30. 30. Again, Start with Twenty Sixteen React • Twenty Sixteen React provides a great starter application using React.js and Redux.
  31. 31. Questions? We need to send a PUT request to this endpoint with our post data. Of course we must authenticate before doing this. @tlovett12