Transcript from the "Working with the REST API" Lesson
>> 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: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: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: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: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: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.