Slides from my talk at WordCamp San Diego. How and why to build web applications with WordPress. Specifically how to build a single page application. I use AngularJS and show some PHP v Angular examples. I end the talk with 2 case studies that have been built using AngularJS as a single page application powered by WordPress
5. 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?
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 index.php
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
16. 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>
17. AngularJS - the important bits
<?php the_title(); ?>
PHP AngularJS HTML Template
{{post.title}}
<?php the_content(); ?> {{post.title}}
<?php the_permalink(); ?> {{post.link}}
18. 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 : {..},
...
},
…