Wordcamp Toronto Presentation
0 likes945 views
This document discusses using WordPress as a backend for client-side applications. WordPress can function as a model-view-controller framework by handling the database through its API while client-side frameworks like AngularJS manage the views and logic. This allows building single-page applications that make requests to the WordPress API for data instead of loading full page HTML from the server. Benefits include less server load, easier caching, and a more scalable and interactive user experience through AJAX. An example application is discussed that uses WordPress for user authentication and data while employing client-side technologies for video chat, text chat, and user profiles.
Wordcamp Toronto Presentation
- 1. 1 WordPress And Client Side Applications Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
- 2. There will be code There will be learning Be Warned
- 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. Why build Web Applications with WordPress? Why not?
- 5. How to use WP as a (faux) MVC to build a Client-Side S.P.A powered by WP-API
- 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. Client Side? Client = Browser POP QUIZ What is the fastest file a web server can serve?
- 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. 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. 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. Single Page Web Application S.P.A
- 13. Code Example: Server Side Loop while( have_posts() ) : the_post(); the_content(); endwhile;
- 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. Living on the client side
- 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 <article class="postWrapper" ng-repeat="post in posts” > … </article> {{post.XXXXXX}} ng-repeat Post object
- 18. AngularJS - the important bits <?php the_title(); ?> PHP AngularJS Template {{post.title}} <?php the_content(); ?> {{post.title}} <?php the_permalink(); ?> {{post.link}}
- 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. 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 : {..}, ... }, …
- 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. 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. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodingOfficeHours.com Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com