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
And Client Side
Applications
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
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 to use
WP as a faux
MVC to build a
Client-Side
S.P.A powered by
WP-API
WP
Very nice!
WP as a MVC?
MODEL -
Deals with the database (save data)
VIEW -
Deals with what people see (view data)
CONTROLLER -
Deals ...
Client Side?
Client = Browser / Visitor
POP QUIZ
What is the fastest file a web server
can serve?
PHP is the language behind WordPress and
most themes you see use it exclusively,
but PHP renders HTML server-side
SERVERCL...
What if you could pass the rendering
process to the client?
SERVERCLIENT
Client: Sends request for template.html
Server: R...
Benefits of Loading Client Side
Less load on the server
Can handle more visitors simultaneously
CDN all template files
Eas...
Single Page Application
S.P.A's allow you to change views and load data, without
actually refreshing the page.
Utilizing 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
<article class="postWrapper" ng-repeat="post in posts” >
…
</article>
{{post.XXXXXX}}
The N...
AngularJS - the important bits
<?php the_title(); ?>
PHP AngularJS Template
{{post.title}}
<?php the_content(); ?> {{post....
// Factory
app.factory('Posts', function($resource){
return $resource(MyAjax.resturl+’/posts/:id, {
update: {method: 'PUT'...
WP-API Response Example
/posts
{
ID: 1
content: '<p>Welcome to WordPress. This is your first post. Edit or delete it, then...
Case Study: CodingOfficeHours.com
CodingOfficeHours.com
WordPress for:
User Creation

User Authentication

Custom Post Types

Data Storage
S.P.A for:
WebRTC...
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
CodingOfficeHours.com
Roy Sivan Twitter/Github - @royboy7...
WordPress and Client Side Web Applications WCTO
Upcoming SlideShare
Loading in …5
×

WordPress and Client Side Web Applications WCTO

982 views

Published on

Using WordPress as a client side application backend

Published in: Technology
  • Login to see the comments

  • Be the first to like this

WordPress and Client Side Web Applications WCTO

  1. 1. 1 WordPress And Client Side Applications Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
  2. 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. 3. Why build Web Applications with WordPress? Why not?
  4. 4. How to use WP as a faux MVC to build a Client-Side S.P.A powered by WP-API
  5. 5. WP Very nice!
  6. 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. 7. Client Side? Client = Browser / Visitor POP QUIZ What is the fastest file a web server can serve?
  8. 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. 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. 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. 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. 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. 13. Living on the client side
  14. 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. 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. 16. AngularJS - the important bits <?php the_title(); ?> PHP AngularJS Template {{post.title}} <?php the_content(); ?> {{post.title}} <?php the_permalink(); ?> {{post.link}}
  17. 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. 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', ... }...
  19. 19. Case Study: CodingOfficeHours.com
  20. 20. 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
  21. 21. 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
  22. 22. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodingOfficeHours.com Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

×