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.

Isomorphic WordPress Applications with NodeifyWP


Published on

Build isomorphic JavaScript applications within WordPress using NodeifyWP.

Published in: Technology
  • Login to see the comments

Isomorphic WordPress Applications with NodeifyWP

  1. 1. Isomorphic WordPress Themes with NodeifyWP
  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. NodeifyWP Environment
  16. 16. Twenty Sixteen React
  17. 17. 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
  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