1

Building Client Side Web Applications with WordPress and WP-APIRoy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

I really don’t like Windows

There will be code

There will be learning

There will be cats

Be Warned

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?

Why build Web Applications with WordPress?

Why not?

HOW?

Single Page Web Application

S.P.A

Not all client side apps need to be full S.P.A’s.

Client Side? Client = Browser

POP QUIZ What is the fastest file a web server

can serve?

CLIENT VS. SERVER SIDE - REQUESTS AND RESPONSEOne request to rule them all

“I want my blog posts”

SERVER CLIENT

PHP is the language behind WordPress

SERVERCLIENT

Client: Sends request for template

Server : Processes PHP code turning it into HTML.Returns full HTML

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

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; ?>

Living on the client side

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>

AngularJS - the important bits

<?php the_title(); ?>

PHP AngularJS HTML Template

{{post.title}}

<?php the_content(); ?> {{post.title}}

<?php the_permalink(); ?> {{post.link}}

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 : {..}, ... }, …

ASK NOT HOW, but WHY?

Case Study: Client

Client

WordPress for:

Users User AuthenticationCustom Post Types Data Storage

WP-API / S.P.A for:

DOM MemoryUser ProfilesInline CommentingInline Bookmarks

Case Study: CodeCavalry

CodeCavalry.com

WordPress for:

Users User AuthenticationCustom Post Types Data Storage

S.P.A for:

Session (CPT) CreateFirebase - WebSocketUser DashboardUser Profiles

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

Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodeCavalry.com/royboy789

Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com