Client Side Applications with WP-API WordPress - WCMTL 2015
1 like2,205 views
This document discusses building client-side web applications with WordPress and the WP-API. It explains the benefits of loading content and templates client-side like improved performance, scalability and user experience. Code examples show how to load posts from the WP-API into AngularJS and display them on the client-side rather than using PHP on the server-side. Case studies demonstrate how specific companies like CodeCavalry use WordPress for user authentication and content with a single page application for features like user profiles and commenting. Resources are provided for learning more about the WP-API and building WordPress driven applications.
Client Side Applications with WP-API WordPress - WCMTL 2015
- 1. 1 Building Client Side Web Applications with WordPress and WP-API Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
- 2. I really don’t like Windows
- 3. There will be code There will be learning There will be cats Be Warned
- 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. Why build Web Applications with WordPress? Why not?
- 6. HOW?
- 8. Single Page Web Application S.P.A Not all client side apps need to be full S.P.A’s.
- 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 template 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
- 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. Living on the client side
- 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. AngularJS - the important bits <?php the_title(); ?> PHP AngularJS HTML Template {{post.title}} <?php the_content(); ?> {{post.title}} <?php the_permalink(); ?> {{post.link}}
- 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. ASK NOT HOW, but WHY?
- 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
- 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. 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. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789 Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com