Check out a free preview of the full JavaScript for WordPress course:
The "Working with the REST API" Lesson is part of the full, JavaScript for WordPress course featured in this preview video. Here's what you'd learn in this lesson:

Zac reviews more possibilities and tips for working with the REST API, including using Vue in a WordPress theme.

Get Unlimited Access Now

Transcript from the "Working with the REST API" Lesson

[00:00:00]
>> Zac Gordon: We went through this app. This is pretty simple. Now, it's probably worth taking a moment to talk about is this a good idea right? Just because we can do something, doesn't mean that we necessarily should. So what are the pro's and con's of building an app like this?

[00:00:15] Well one of the pro's is, that if you have someone login, like let's say that we have a login on the front end. Cuz it doesn't make much sense if you were log out of WordPress to log into the back end where you see all those options and then coming to the front end, right?

[00:00:29] But if you can have a log in here, somebody just posting really simply. They can do it right there, it's pretty clean, they number after see the back end. They never even have to know it's WordPress, right? So, that's pretty great. On the other hand, how do we add categories?

[00:00:43] How do we add a featured image? How do we do the excerpt? All of these things are not included, so to get to that next level, you would have to code way more. Like the amount that we did is this much but the amount to get to everywhere.

[00:00:58] So, this is where a trade off I wanna suggest is, is that if it's a simple kind of quick thing or for that particular client or used case. You're like yeah but just hide the whole thing, let's make it this clean as possible. But, if you want to rebuild the entire admin area and all the functionality, this is a bad idea and we'll take you way longer than you think.

[00:01:18] Hashtag Calypso has teams of full time developers, and they still haven't even finish all the features. And I have heard this, I haven't seen this statistics but a good portion of people who run large sites on WordPress.com, still opens the traditional editor to do certain things that aren't fully flash out in the full react version of it.

[00:01:38] But all that said, I think one of the best places and biggest wins for doing something like this that we've looked at is, let's say this was a portfolio page, right? And you had a nice your portfolio pieces and you click on one and you don't need to load a new page, it just pops it open right there, it's all nice and clean.

[00:01:57] One of the problems you're gonna get to though, if you try to build an entire single page web app with posts and pages and URL structures all running in JavaScript, you get into some issues because you need to have fallbacks for PHP. So let's say for example that when I click on this link it puts a hashtag up here and then that URL structure, right?

[00:02:23] Well then we need to write some extra bit of code, some basic routing code, to figure out what URL we're on and pull it in to the page. The other thing is, is that WordPress already has a page and a template for this. So what a lot of folks who are doing, who are building real rich themes that work well, they still have some PHP on the back end to handle potentially if something doesn't go through or if the JavaScript isn't there.

[00:02:49] But then they're building their whole JavaScript app on top of the full theme, right? So the problem again is is if you get into different URL structures and somehow JavaScript isn't loading, you want some fallback. The JavaScript space, and I think Frontend Masters is possibly mixed on this depending on the application.

[00:03:06] But a lot of folks are saying now, we don't need fallbacks. You know, try to run Facebook or your mail or Major applications without JavaScript, and it's probably not happening. So you need to make that decision of if it makes sense and how possible is it. And then when you get into routing on top of WordPress, you will eventually hit some weird issue.

[00:03:27] So I just wanna share that and point that out. So all this is to say that you can do a ton with the WordPress rest API. And I just wanna point out a few examples here that,
>> Zac Gordon: We're not going to go through, but I just want to show you that they are here for your reference, okay?

[00:03:52] So, if we come into section five, we stopped at deleting posts. So I'm not going to go through all the code with you all here. It looks like most people got pretty far along and at this point you understand how these examples work. So the next thing is the axio stemo.

[00:04:08] So if you wanted to not use the backbone client, and one of the examples we never did, notice there's no 5.3, right? 5.3 was suppose to be getting custom and points of the backbone clients. It's great for having post pages everything, but what if we had our simple post.

[00:04:25] You need to do some extra code that I wasn't able quite work out in order to this backbone with customs stuff. So, the case where you might want to use axious is if you're running, all custom stuff. And you don't really want to have to worry about the backbone client or customizing it or extending it.

[00:04:44] Or maybe you already had JavaScript that was written or your agency or your group is already working with a certain framework or certain tools. This is, the axious demo is the exact same thing you just built. But it's using a different client, it's just using regular ajax calls instead of the backbone client.

[00:05:03] So at some point, if your gonna take this further, go through this example and look at how this works, because it will help you make sense of it. The second thing, and we could've started our day with this, is that notice that when we save our code, we have to go back to WordPress and refresh the browser every time, right?

[00:05:21] How many of you have worked before with some sort of watch or refresh tool that will automatically refresh your code? Are you familiar with that? Amazing, right? It so, much simply you save it, pop it open and it's good. You can do that, so this demo here what this shows you is this a normal theme but it has inside of my JS folder, a webpack configuration.

[00:05:49] So in this webpack configuration, we're doing a few things that I just wanna point out. We're pulling in BrowserSync, and what BrowserSync does is watch your code in hard and refresh your browser itself. And if you're running the webpack developer tool, which will look at for a couple of example, that operates in the completely different space then your WordPress site.

[00:06:16] So the way we traditionally built JavaScript apps and work with the built tools, will not work in WordPress. We have to add this other layer that will automatically refresh our WordPress site itself. So the thing in here are down at the bottom. I wanna point out this code here.

[00:06:34] So my site URL is at vagrant.local. So you would change this to js whatever .dev that you have. And then local host, you can change it to something else, and you can change the port, something that you're not using. So what happens when you run this is instead of viewing your site at vagrant.local, you would go to localhost; 3333 and that would proxy your entire site and control the refreshes.

[00:07:01] So that's how it takes control of everything for you. If you're going to develop heavy JavaScript stuff inside of WordPress. You all grab this webpack config tweak it for yours and then it will just save you all that time of refreshing. I didn't do that with what we were doing just because it's one more thing to add and we've been covering a lot, but that is there for you.

[00:07:23] So I would definitely suggest check in that out. And the very last thing is, everybody wants to know how to do a framework right? Wait how do we do this in React? How do we plug Angular and how do we plug View-in. It all works the same way.

[00:07:35] You basically build whatever it is. You enqueue the files that you need and it works. So this is a very, very simple theme. It's the exact same thing we've been doing before. And what it's gonna do is basically just list out.
>> Zac Gordon: The ability to show a bunch of posts, or show a single post, and the actual template code is in the php.

[00:08:11] So notice how I have some view code, hard coded right here. Now is this the best approach? Maybe, it's okay, if you are doing something like this, I would highly suggest leveraging view cloak. V-cloak, if you look into this, because all this code is gonna get executed immediately and be on the page before JavaScript kicks in.

[00:08:34] So v-cloak will let you hide it. There are other ways to do that. But if you get deeper into View or React, or some of these other ones, you're building all your templates with JavaScript. And then you're importing them into the page. So that's kind of the next level, but when you're first starting off with View or something, it's simpler to take this approach.

[00:08:54] So if you're curious about how this works and how you make the API requests with something like View,
>> Zac Gordon: Take a look at this code for a second and see if that makes sense.
>> Zac Gordon: So what that is saying is get
>> Zac Gordon: The site URL, and you can see that we put this out by using the localized scripts, right?

[00:09:26] So that's how we get our site URL, and then we're getting this site URL or this restEnd point. Sorry, restEnd point is here. It's computed because you want to take your site URL and then add some things on to it. So if you had different Endpoints, you could set them up that way, so we're grabbing our restEndpoint.

[00:09:48] And then, when we get it back, we're sending this post equal to the new data. And this post up here, will refer to this, our array of posts. So it's just gonna get the posts and load them on the page. Really simple stuff, and again this just shows and why I was emphasizing taking a look, not just at jQuery, but something like axios or some of the more popular HTTP libraries, is that this is the only component that is different.

[00:10:16] You could build your whole reactor, your viewer, your angular backbone app. All you have to do is get those ajax calls right, and then load it into the page. So that should be something that you explore later. How many of you have played around with some sort of framework?

[00:10:31] Okay, so a good practice might be, if you wanted to play around with it, just try to list five posts. And then when you click on a post show that specific post, something like that, okay? And you can use this as a reference. And again, this is really the only code that's gonna change, and then it just plugs in, that's going to stay the same, and the rest just plugs into your framework.

[00:10:51] So that's an example there for you, we won't really go into it further, but when you get there and you're ready for it, it'll make a lot of sense and be helpful.