Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Isomorphic WordPress Applications with NodeifyWP

2 091 vues

Publié le

Build isomorphic JavaScript applications within WordPress using NodeifyWP.

Publié dans : Technologie
  • Soyez le premier à commenter

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 taylor.lovett@10up.com
  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 https://github.com/10up/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 https://github.com/10up/nodeifywp-environment
  16. 16. Twenty Sixteen React https://github.com/10up/twentysixteenreact
  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 README.md
  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 10up.com taylor.lovett@10up.com taylorlovett.com github.com/tlovett1