Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
WordPress, WP-API
And Client Side
Applications
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
There will be code
There will be learning
There will be memes
Be Warned
WE ARE AWESOME
WordPress developer at
Disney
and the co-founder of
My first install of WordPress was
0.7 and been a user &
developer sinc...
Why build Web Applications
with WordPress?
Why not?
HOW?
WP
Very nice!
Client Side?
Client = Browser
POP QUIZ
What is the fastest file a web server
can serve?
CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSE
One request to rule them all
“I want my blog posts”
SERVER CLIENT
PHP is the language behind WordPress
SERVERCLIENT
Client: Sends request for index.php
Server: Processes PHP code turning i...
Benefits of Loading Client Side
Less load on the server
CDN all template files
Easier to cache JS and HTML
VERY Scalable
A...
Single Page Web Application
S.P.A
Code Example: Server Side Loop
<?php
//list all posts - this is PHP & HTML
while ( have_posts() ) : the_post();
?>
<articl...
Living on the client side
Code Example: Client Side Loop
(using AngularJS)
//list all posts - this is HTML
<article class="postWrapper" ng-repeat="p...
AngularJS - the important bits
<?php the_title(); ?>
PHP AngularJS HTML Template
{{post.title}}
<?php the_content(); ?> {{...
WP-API Response Example
/posts - WP-API endpoint
{
ID: 1
content: '<p>Welcome to WordPress. This is your first post. Edit ...
ASK NOT HOW, but WHY?
Case Study: Client
Client
WordPress for:
Users

User Authentication

Custom Post Types

Data Storage
WP-API / S.P.A for:
DOM Memory

User Pro...
Case Study: CodeCavalry
CodeCavalry.com
WordPress for:
Users

User Authentication

Custom Post Types

Data Storage
S.P.A for:
Session (CPT) Create...
Awesome Resources
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
WP-API on GitHub
https://github.com/WP-...
Thank You
Find me online:
Twitter: @royboy789
Github: @royboy789
CodeCavalry.com/royboy789
Roy Sivan Twitter/Github - @roy...
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
Upcoming SlideShare
Loading in …5
×

WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications

1,323 views

Published on

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

Published in: Technology
  • Login to see the comments

WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications

  1. 1. 1 WordPress, WP-API And Client Side Applications Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
  2. 2. There will be code There will be learning There will be memes Be Warned
  3. 3. WE ARE AWESOME
  4. 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. 5. Why build Web Applications with WordPress? Why not?
  6. 6. HOW?
  7. 7. WP Very nice!
  8. 8. Client Side? Client = Browser POP QUIZ What is the fastest file a web server can serve?
  9. 9. CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSE One request to rule them all “I want my blog posts” SERVER CLIENT
  10. 10. PHP is the language behind WordPress SERVERCLIENT Client: Sends request for index.php Server: Processes PHP code turning it into HTML. Returns full HTML
  11. 11. 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
  12. 12. Single Page Web Application S.P.A
  13. 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. 14. Living on the client side
  15. 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. 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. 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. 18. ASK NOT HOW, but WHY?
  19. 19. Case Study: Client
  20. 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. 21. Case Study: CodeCavalry
  22. 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. 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. 24. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789 Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

×