Download as PDF, PPTX
![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": { ... }
}](https://image.slidesharecdn.com/isomorphic-apps-nodeifywp-170304153309/85/Isomorphic-WordPress-Applications-with-NodeifyWP-30-320.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": { ... }
}](https://image.slidesharecdn.com/isomorphic-apps-nodeifywp-170304153309/75/Isomorphic-WordPress-Applications-with-NodeifyWP-30-2048.jpg)
More Related Content
Similar to Isomorphic WordPress Applications with NodeifyWP
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Isomorphic WordPress Applications with NodeifyWP
- 1. Isomorphic WordPress Themes withNodeifyWP
- 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.
- 4. What is theideal way to build, serve, and manage a website?
- 5. The “Perfect” Stack(opinion) • WordPress for managing content. • Isomorphism for the “app-like” experience and code base simplicity and extensibility
- 6. What is anisomorphic web application?
- 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. Where are wenow?
- 9. PHP in WordPress •WordPress is built in PHP. • Can’t run PHP client side.
- 10. Current Options forthe “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. How do weget ourselves to the “perfect” web stack?
- 12.
- 14. NodeifyWP • Framework forcreating 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
- 15. NodeifyWP Requirements • GoogleV8 Engine • PHP V8Js Extension • PHP 5.6+ • WordPress 4.7+
- 16.
- 17.
- 18. 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
- 19. Create your owntheme with NodeifyWP
- 20. 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
- 21. Functions.php • NodeifyWP bypassesall 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' );
- 22. What Did ThatDo? • 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.
- 23. Server-side JavaScript • Whenwe’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
- 24. Template Tags • NodeifyWPcontains a template tag API for localizing hooks, options, etc. for use in our server-side JS. • NodeifyWP comes with some default template tags.
- 25.
- 26.
- 27. Post Tags • Sometimeswe need to register “tags” within each post. For example, we need the featured image URL or markup for each post.
- 28. 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; } );
- 29. Application Changes • NodeifyWP 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.
- 30. 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": { ... } }
- 31. Again, Start withTwenty Sixteen React • Twenty Sixteen React provides a great starter application using React.js and Redux.
- 32. Questions? We need tosend 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