Client Side Applications with WP-API WordPress - WCMTL 2015
Transcript of Client Side Applications with WP-API WordPress - WCMTL 2015
![Page 1: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/1.jpg)
1
Building Client Side Web Applications with WordPress and WP-APIRoy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
![Page 2: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/2.jpg)
I really don’t like Windows
![Page 3: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/3.jpg)
There will be code
There will be learning
There will be cats
Be Warned
![Page 4: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/4.jpg)
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?
![Page 5: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/5.jpg)
Why build Web Applications with WordPress?
Why not?
![Page 6: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/6.jpg)
HOW?
![Page 7: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/7.jpg)
![Page 8: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/8.jpg)
Single Page Web Application
S.P.A
Not all client side apps need to be full S.P.A’s.
![Page 9: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/9.jpg)
Client Side? Client = Browser
POP QUIZ What is the fastest file a web server
can serve?
![Page 10: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/10.jpg)
CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSEOne request to rule them all
“I want my blog posts”
SERVER CLIENT
![Page 11: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/11.jpg)
PHP is the language behind WordPress
SERVERCLIENT
Client: Sends request for template
Server : Processes PHP code turning it into HTML.Returns full HTML
![Page 12: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/12.jpg)
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
![Page 13: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/13.jpg)
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; ?>
![Page 14: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/14.jpg)
Living on the client side
![Page 15: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/15.jpg)
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>
![Page 16: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/16.jpg)
AngularJS - the important bits
<?php the_title(); ?>
PHP AngularJS HTML Template
{{post.title}}
<?php the_content(); ?> {{post.title}}
<?php the_permalink(); ?> {{post.link}}
![Page 17: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/17.jpg)
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 : {..}, ... }, …
![Page 18: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/18.jpg)
ASK NOT HOW, but WHY?
![Page 19: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/19.jpg)
Case Study: Client
![Page 20: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/20.jpg)
Client
WordPress for:
Users User AuthenticationCustom Post Types Data Storage
WP-API / S.P.A for:
DOM MemoryUser ProfilesInline CommentingInline Bookmarks
![Page 21: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/21.jpg)
Case Study: CodeCavalry
![Page 22: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/22.jpg)
CodeCavalry.com
WordPress for:
Users User AuthenticationCustom Post Types Data Storage
S.P.A for:
Session (CPT) CreateFirebase - WebSocketUser DashboardUser Profiles
![Page 23: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/23.jpg)
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
![Page 24: Client Side Applications with WP-API WordPress - WCMTL 2015](https://reader037.fdocuments.us/reader037/viewer/2022103019/55c31324bb61eb73608b46a1/html5/thumbnails/24.jpg)
Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com