Using WordPress as a client side application backend

1. 1
WordPress
And Client Side
Applications
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

2. WordPress developer at
Disney
and the co-founder of
My first install of WordPress was
0.7 and been a user &
developer since
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
Who is this guy?

3. Why build Web Applications
with WordPress?
Why not?

4. How to use
WP as a faux
MVC to build a
Client-Side
S.P.A powered by
WP-API

5. WP
Very nice!

6. WP as a MVC?
MODEL -
Deals with the database (save data)
VIEW -
Deals with what people see (view data)
CONTROLLER -
Deals with logic in between (data logic)
Decoupling the functionality from the view

7. Client Side?
Client = Browser / Visitor
POP QUIZ
What is the fastest file a web server
can serve?

8. PHP is the language behind WordPress and
most themes you see use it exclusively,
but PHP renders HTML server-side
SERVERCLIENT
Client: Sends request for index.php
Server: Processes PHP code turning it into HTML.
Returns full HTML

9. What if you could pass the rendering
process to the client?
SERVERCLIENT
Client: Sends request for template.html
Server: Returns template.html
Client: Renders & Displays template.html
While rendering request to server for data (JSON)

10. Benefits of Loading Client Side
Less load on the server
Can handle more visitors simultaneously
CDN all template files
Easier to cache JS and HTML
VERY Scalable
AJAX - can transform your UI

11. Single Page Application
S.P.A's allow you to change views and load data, without
actually refreshing the page.
Utilizing AJAX, you can load pages on the fly seamlessly.

12. Code Example: Server Side Loop
<?php
//list all posts - this is PHP & HTML
while ( have_posts() ) : the_post();
?>
<article class="postWrapper">
<h3 class="page_title text-center">
<a href=“<?php the_permalink(); ?>” class="content">
<?php the_title(); ?>
</a>
</h3>
<?php the_content(); ?>
</article>
<?php
endwhile;
?>

13. Living on the client side

14. Code Example: Client Side Loop
(using AngularJS)
//list all posts - this is HTML
<article class="postWrapper" ng-repeat="post in posts” >
<h3 class="page_title text-center">
<a href=“/coh/#/post/{{post.ID}}” class="content">
{{post.title}}
</a>
</h3>
{{post.content}}
</article>

15. AngularJS - the important bits
<article class="postWrapper" ng-repeat="post in posts” >
…
</article>
{{post.XXXXXX}}
The NG-REPEAT repeats through posts and lets you use the post object
Use the post object contains all the individual post data, and you
display it with {{..}}

16. AngularJS - the important bits
<?php the_title(); ?>
PHP AngularJS Template
{{post.title}}
<?php the_content(); ?> {{post.title}}
<?php the_permalink(); ?> {{post.link}}

17. // Factory
app.factory('Posts', function($resource){
return $resource(MyAjax.resturl+’/posts/:id, {
update: {method: 'PUT'}
});
});
// Controller
function ListCtrl($scope, $http, Posts){
$scope.posts = Posts.query();
});
Powering the Angular

18. WP-API Response Example
/posts
{
ID: 1
content: '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>',
title: 'Hello world!',
status: 'publish',
author : {..},
...
},
{
ID: 10,
content: '<p>Testing Another Post! Yay!</p>',
title: 'I don't know',
...
}...

20. Case Study: CodingOfficeHours.com

21. CodingOfficeHours.com
WordPress for:
User Creation
User Authentication
Custom Post Types
Data Storage
S.P.A for:
WebRTC - Video
Firebase - Text Chat
User Dashboard
User Profiles

22. Awesome Resources
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
WP-API on GitHub
https://github.com/WP-API/WP-API
CodingOfficeHours
http://www.codingofficehours.com
AngularJS WP Theme
http://www.roysivan.com/angular-wordpress-theme
AngularJS For WP Plugin
http://www.roysivan.com/angularjs-for-wordpress
Community Built WP App with AngularJS
http://www.roysivan.com/blog

23. Thank You
Find me online:
Twitter: @royboy789
Github: @royboy789
CodingOfficeHours.com
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com