building wordpress client side applications with wp and wp-api - #wcmia

1

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

There will be code WP-API v1 code

There will be learning

There will be memes

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?

Why build Web Applications with WordPress?

Why not?

MVC - Client Side

M - Model ( WP ) V - VIEW ( THEME ) C - CONTROLLER ( PLUGINS )

HOW?

It’s the best!

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

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

Single Page Web Application S.P.A

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

Living on the client side

wp_localize_script( ‘some-script', 'APIdata', array( ‘wp_api_url’ => esc_url_raw( get_json_url() ), ‘wp_api2_url’ => rest_get_url_prefix() . '/wp/v2/' 'api_nonce' => wp_create_nonce( 'wp_json' ), 'templateUrl' => get_bloginfo( 'template_directory' ) ) );

Step 0: Setup Variable for WP-API url (PHP)

Step 1: Custom Endpoints for you (WP-API v1 - PHP)

function register_routes( $routes ) { $routes[‘/my_route'] = array(

array( array( $this, ‘my_callback_function’), WP_JSON_Server::CREATABLE | WP_JSON_Server::ACCEPT_JSON )return $routes;

);

function my_callback_function() { …… }

// Get Pages $.get( APIdata.wp_api_url + ‘/posts’, { ‘type’: ‘page’ } .done( function( res ) { do_something( res ); }) .fail( function( error ) { console.log( error ); });

Step 2: Get Data from WP-API (using jQuery)

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

Step 2.5: Get Data from WP-API The response object

(JSON)

Step 3: Beautiful Template with the dataCode Example: Client Side Loop

(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>

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 & Repository https://github.com/WP-API/WP-API https://wordpress.org/plugins/json-rest-api/

CodeCavalry http://www.codecavalry.com

My Blog, AngularJS WP Theme & Plugin http://www.roysivan.com/blog http://www.roysivan.com/angular-wordpress-theme http://www.roysivan.com/angularjs-for-wordpress

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

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