The Case for the WordPress REST API | WordCamp Montreal 2016
Introduction to VueJS & The WordPress REST API
-
Upload
josh-pollock -
Category
Software
-
view
127 -
download
5
Transcript of Introduction to VueJS & The WordPress REST API
![Page 1: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/1.jpg)
@TwitterHandle [change in Slide > Edit Master]
Introduction To VueJS & The WordPress REST API
Josh Pollock | CalderaLabs.org
![Page 2: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/2.jpg)
@Josh412
CalderaLabs.org
Hi I'm JoshFounder/ Lead Developer/ Space Astronaut Grade 3:
Caldera LabsI make WordPress plugins @calderaformsI teach about WordPress @calderalearnI wrote a book about the WordPress REST APII wrote a book about PHP object oriented programing.I am core contributor to WordPressI am a member of The WPCrowd @thewpcrowd
![Page 3: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/3.jpg)
@Josh412
What We're Covering Today
A little background on Josh + JavaScript FrameworksWhy VueJS Is Really CoolSome Basics On VueJSSome Things That Are Not So Cool About VueJSHow To Go Further With VueJS
![Page 4: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/4.jpg)
@Josh412
CalderaLearn.com
0.Josh + VueJS
Didn’t You Talk About Angular Last Year?
![Page 5: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/5.jpg)
@Josh412
CalderaLabs.org
![Page 6: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/6.jpg)
@Josh412
NG1 Is Cool
![Page 7: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/7.jpg)
@Josh412
React and NG2 Are More Than I Need
![Page 8: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/8.jpg)
@Josh412
VueJS Is A Good Balance
![Page 9: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/9.jpg)
@Josh412
CalderaLabs.org
BONUS LINK #1calderalearn.com/wcmia-js-frameworks
![Page 10: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/10.jpg)
@Josh412
CalderaLearn.com
1.Why VueJS Is Really Cool
Simple, Reactive, Lightweight
![Page 11: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/11.jpg)
@Josh412
VueJS: Simplicity
Fast StartWorks with ES5
Better with ES6Reusable ComponentsFamiliar SyntaxHTML(ish) Templates18kB
![Page 12: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/12.jpg)
@Josh412
Reactive !== ReactJS
![Page 13: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/13.jpg)
@Josh412
Reactive Seems Familiar
VueJS Lifecycle Diagram
vuejs.org/images/lifecycle.png
![Page 14: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/14.jpg)
@Josh412
CalderaLabs.org
![Page 15: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/15.jpg)
@Josh412
We’re Used To Event-Based Systems
![Page 16: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/16.jpg)
@Josh412
Event-Based SystemsLike WordPress Hooks
![Page 17: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/17.jpg)
@Josh412
VueJS Doesn’t Include But Has Official Packages
HTTPRouterFlux/ Redux State Manager
![Page 18: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/18.jpg)
@Josh412
CalderaLearn.com
2.VueJS + WordPress Basics
Enough To Get Started
![Page 19: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/19.jpg)
@Josh412
A Few Notes Before We Look At Code
All of this is ES5You should use ES6
We’re using jQuery.ajax()Read the docs for install
Just need one CDN link
![Page 20: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/20.jpg)
@Josh412
CalderaLabs.org
Example Onecalderalearn.com/wcmia-example-1
![Page 21: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/21.jpg)
@Josh412
Vue Templates
<div id="post"> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content"> {{post.content.rendered}} </div> </article></div>
![Page 22: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/22.jpg)
@Josh412
The Vue Instance
var ex1 = new Vue({ el: '#post', data: { post: { title: { rendered: 'Hello World!' }, content: { rendered: "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!<\/p>\n", } } }});
![Page 23: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/23.jpg)
@Josh412
CalderaLabs.org
Example Twocalderalearn.com/wcmia-example-2
![Page 24: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/24.jpg)
@Josh412
Adding AJAX
![Page 25: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/25.jpg)
@Josh412
The Vue Instance
/** You should use wp_localize_script() to provide this data dynamically */var config = { api: 'https://calderaforms.com/wp-json/wp/v2/posts/45218',}; /** GET post and then construct Vue instance with it **/var ex2;$.get({ url: config.api}).success( function(r) { ex2 = new Vue({ el: '#post', data: { post: r } });});
![Page 26: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/26.jpg)
@Josh412
Data Attributes
![Page 27: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/27.jpg)
@Josh412
Vue Templates
<div id="post">
<article>
<header>
<h1 class="post-title">
{{post.title.rendered}}
</h1>
</header>
<div class="entry-content" v-html="post.content.rendered"></div>
</article>
</div>
![Page 28: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/28.jpg)
@Josh412
CalderaLabs.org
Example Threecalderalearn.com/wcmia-example-3
![Page 29: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/29.jpg)
@Josh412
Form Inputs
![Page 30: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/30.jpg)
@Josh412
Vue Templates
<div id="post"><form v-on:submit.prevent="save"> <div> <label for="post-title-edit"> Post Title </label> <input id="post-title-edit" v-model="post.title.rendered"> </div> <div> <label for="post-content-edit"> Post Content </label> <textarea id="post-content-edit" v-model="post.content.rendered"></textarea> </div> <input type="submit" value="save"> </form> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article></div>
![Page 31: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/31.jpg)
@Josh412
Event Handlinghttps://vuejs.org/v2/guide/events.html
![Page 32: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/32.jpg)
@Josh412
Vue Templates
<div id="post"><form v-on:submit.prevent="save"> <div> <label for="post-title-edit"> Post Title </label> <input id="post-title-edit" v-model="post.title.rendered"> </div> <div> <label for="post-content-edit"> Post Content </label> <textarea id="post-content-edit" v-model="post.content.rendered"></textarea> </div> <input type="submit" value="save"> </form> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article></div>
![Page 33: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/33.jpg)
@Josh412
Methods
![Page 34: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/34.jpg)
@Josh412
The Vue Instance var ex3;jQuery.ajax({ url: config.api, success: function(r) { ex3 = new Vue({ el: '#post', data: { post: r }, methods: { save: function(){ var self = this; $.ajax( { url: config.api, method: 'POST', beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', config.nonce ); }, data:{ title : self.post.title.rendered, content: self.post.content.rendered } } ).done( function ( response ) { console.log( response ); } ); } } }); }});
![Page 35: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/35.jpg)
@Josh412
CalderaLabs.org
Example Fourcalderalearn.com/wcmia-example-4
![Page 36: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/36.jpg)
@Josh412
ComponentsLet’s Make Our Code More Reusable!
![Page 37: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/37.jpg)
@Josh412
App HTML
<div id="app"> <post-list></post-list></div>
![Page 38: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/38.jpg)
@Josh412
TemplatesWe Could Have Used A Template Before
![Page 39: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/39.jpg)
@Josh412
Template HTML
<script type="text/html" id="post-list-tmpl"> <div id="posts"> <div v-for="post in posts"> <article v-bind:id="'post-' + post.id"> <header> <h2 class="post-title"> {{post.title.rendered}} </h2> </header> <div class="entry-content" v-html="post.excerpt.rendered"></div> </article> </div> </div></script>
![Page 40: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/40.jpg)
@Josh412
Instantiating Components
![Page 41: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/41.jpg)
@Josh412
Vue Instance
(function($){ var vue; $.when( $.get( config.api.posts ) ).then( function( d ){ Vue.component('post-list', { template: '#post-list-tmpl', data: function () { return { posts: d } }, }); vue = new Vue({ el: '#app', data: { } }); }); })( jQuery );
![Page 42: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/42.jpg)
@Josh412
Components
Improve code reuse.Can be shared between vue instances.The Vue Router can switch components based on state.
![Page 43: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/43.jpg)
@Josh412
CalderaLearn.com
3.Downsides To VueJS
It’s Cool But...
![Page 44: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/44.jpg)
@Josh412
VueJS Downsides
Super minimalSmall, but you’re going to need other things
Less popularLess tutorialsLess developersLess Packages
Never going to be in WordPress core
![Page 45: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/45.jpg)
@Josh412
CalderaLabs.org
Slides, Links & More:CalderaLearn.com/wcmia
![Page 46: Introduction to VueJS & The WordPress REST API](https://reader033.fdocuments.in/reader033/viewer/2022042600/58e4ba891a28ab1c1f8b6373/html5/thumbnails/46.jpg)
CalderaLabs.org
Thanks!
JoshPress.net
CalderaLearn.comCalderaForms.com
CalderaLabs.org@Josh412
Slides, Links & More:CalderaLearn.com/wcmia