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.

Wordcamp Toronto Presentation

830 views

Published on

How to use AngularJS to build a client side web application using WordPress and WP-API

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Wordcamp Toronto Presentation

  1. 1. 1 WordPress And Client Side Applications Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
  2. 2. There will be code There will be learning Be Warned
  3. 3. 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?
  4. 4. Why build Web Applications with WordPress? Why not?
  5. 5. How to use WP as a (faux) MVC to build a Client-Side S.P.A powered by WP-API
  6. 6. WP Very nice!
  7. 7. 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) Why? Decoupling the functionality from the view
  8. 8. Client Side? Client = Browser POP QUIZ What is the fastest file a web server can serve?
  9. 9. PHP is the language behind WordPress SERVERCLIENT Client: Sends request for index.php Server: Processes PHP code turning it into HTML. Returns full HTML
  10. 10. 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)
  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 while( have_posts() ) : the_post(); the_content(); endwhile;
  14. 14. 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; ?>
  15. 15. Living on the client side
  16. 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. 17. AngularJS - the important bits <article class="postWrapper" ng-repeat="post in posts” > … </article> {{post.XXXXXX}} ng-repeat Post object
  18. 18. AngularJS - the important bits <?php the_title(); ?> PHP AngularJS Template {{post.title}} <?php the_content(); ?> {{post.title}} <?php the_permalink(); ?> {{post.link}}
  19. 19. // 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 Angular
  20. 20. 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 : {..}, ... }, …
  21. 21. Case Study: CodingOfficeHours.com
  22. 22. 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
  23. 23. 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 & Slides http://www.roysivan.com/blog
  24. 24. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodingOfficeHours.com Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

×