1. 1
Building Client Side
Web Applications with
WordPress and WP-API
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

2. I really don’t like
Windows

3. There will be code
There will be learning
There will be cats
Be Warned

4. 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 geek?

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

6. HOW?

8. Single Page Web
Application
S.P.A
Not all client side apps
need to be full S.P.A’s.

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

10. CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSE
One request to rule them all
“I want my blog posts”
SERVER CLIENT

11. PHP is the language behind WordPress
SERVERCLIENT
Client: Sends request for template
Server: Processes PHP code turning it into HTML.
Returns full HTML

12. Benefits of Loading Client Side
Less load on the server
CDN all template files
Easier to cache JS and HTML
VERY Scalable
AJAX - can transform your UI / UX

13. 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;
?>

14. Living on the client side

15. 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>

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

17. WP-API Response Example
/posts - WP-API endpoint
{
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 : {..},
...
},
…

18. ASK NOT HOW, but WHY?

19. Case Study: Client

20. Client
WordPress for:
Users
User Authentication
Custom Post Types
Data Storage
WP-API / S.P.A for:
DOM Memory
User Profiles
Inline Commenting
Inline Bookmarks

21. Case Study: CodeCavalry

22. CodeCavalry.com
WordPress for:
Users
User Authentication
Custom Post Types
Data Storage
S.P.A for:
Session (CPT) Create
Firebase - WebSocket
User Dashboard
User Profiles

23. Awesome Resources
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
WP-API on GitHub
https://github.com/WP-API/WP-API
CodeCavalry
http://www.codecavalry.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 & Slides
http://www.roysivan.com/blog

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