 Hey everybody welcome. This is a game starting with QJS and Warcrafts with Eric Arvett. I just want to say a few things real quick. After this is lunch. Just also please sign up for cell phones and if you're tweeting use the hashtag. To you. Awesome. Thank you very much. John. All right. Is this thing on? I don't. Do I need that? You guys can you hear me okay in the back and everything? Yeah, okay. So I may go in and out of using next. I like to fidget, move around. So all right lunch is next is my first talk I've ever given before lunch, which is awesome. I always have the after lunch crowd and everybody's all sleepy. So now I know you're all anxious to get to lunch. So we'll be out of here in five minutes so we can be the first to get lunch. So there's a story behind out in five. I used to have a economics professor in college and old guys like 80 years old but he was the coolest teacher ever. He would always write up on the chalkboard out in five and about half the time he would actually let us out in five minutes. He'd give us five minute talk about economics and we'd be done. The other half the time out in five would still sit up on the board and he'd go through an hour of talking and I'd be like he told us five minutes. So he'd always trick us like that. But either way I thought that was pretty funny. So we're going to move through some stuff. I've got some things that may get a little bit tactical if it is and you need more explanation. Too bad. Otherwise just hit me up at lunch or something. We'll talk through it if you want to talk more about Vue.js. It's awesome. So without further delay let's open the slides here. All right. We're pressing Vue.js. Two things I think that go hand in hand really good together. That's what this talk about is about. We're going to just kind of like I said in the presentation intro that I wrote a few months ago. We're just going to dip our toes into Vue.js and see what it can do. It's a pretty awesome framework. It's not a framework. I should say I like to preface this. It's not just the hot new thing. I think it is here to stay. And I've been using it for a while on quite a few projects. It's pretty fantastic. And again if you don't need it for a project don't use it. No big deal. So a little bit about me. My name is Eric Arbay. I've been using WordPress for a long time now since like 2008, 2007, something like that. So I use WordPress for all my clients' websites. I actually started, I went to college to become a golf professional and got a business degree as well. So I'm still a golf pro but I was never a programmer by trade or by education or anything like that. So I'm 100% self-taught. The internet is a wonderful place to learn all kinds of things. Stack overflows like my primary mentor. And so you find me on Twitter there at EricArbay if you want to see five tweets a month. And I basically put this together in hopes that you guys will walk away with a little bit of knowledge about Vue.js, how you can implement it into a WordPress theme, maybe for your own side project, maybe for a client's project. You kind of see all the cool things it can do but we're just going to kind of, just like I said, dip our toes into it. Not get too crazy in depth. Oh, look at that. That was my next slide about today's golf. So WordPress as a database. That's kind of what we're going to talk a little bit about today. Is anyone in here familiar with the WordPress REST API? A couple of awesome, perfect. So we're going to talk a little bit about that and then kind of consuming that API and using it on the front end in your browser with Vue.js. So fun stuff. All right. Has anyone, I should preface this, has anyone used Vue in a project at all before? All right. A couple of hands. Awesome. Cool. If you haven't, it's great. You probably have, oh, that text is really small. I'll increase that a little bit. All right. So hopefully you can kind of see that. So Vue is a framework. If you ever heard of Angular or React, it's kind of similar. The guy, he actually, that created Vue, he worked on Angular for a while. He helped build it and then he said, hey, I'm going to build my own. I'm going to take all the best bits and pieces of these other JavaScript frameworks and build my own. And so he did. And it's called Vue.js. His name is Evan Yu, a super smart guy. And if you ever listen to him talk, it's like way over my head. I don't understand half the things that he's talking about. But it's a progressive framework. So that's one reason I think it fits really well with WordPress. If you guys have heard of React before, right, by Facebook, you may hear that as well in Gutenberg blocks in those talks about building your own custom Gutenberg stuff. It's a little, I think the learning curve is a little bit steeper with React because you have to compile it. There's some things you have to know ahead of time. With Vue, you can literally drop it into your project. If you want to drop it into your theme right now and start using it, you can. Just with a little script tag like that. Kind of like jQuery. I'm sure you've all touched jQuery at some point or another. It comes bundled with WordPress, but it's probably come bundled with some theme that you've used. You probably had to troubleshoot for a client somewhere along the line. Something happened. Something broke. There was a console error. So Vue, that's what I really like about Vue. You can just drop into your theme and get going with it right away. Also, it has this whole ecosystem. It has a CLI. You can build entire projects with Vue just like you can with React or Angular. You can build your whole stack right now based on JavaScript and using Vue as a front end and kind of the back end as well. So the guy that created it, one of the things he really noticed was the documentation was not poor, but maybe lacking on other framework websites. That was one thing that he really focused on and they continue to focus on. Just like WordPress, the docs for WordPress are really nice and legible and easily laid out. They are for Vue as well. That's one of the fantastic things about it. There's a good community around it. They already have, like I said, a relatively new framework and it's already got conferences and stuff like that. So a really good community. I forgot to ask you guys. Does that look better? Is that easier on the eyes? No? Yeah? Either way? Okay. Cool. We'll keep it like that until it's not good. All right. Let's go back down. Reset. Okay. Cool. So let's dive right into Vue. Again, Vue, JavaScript. This is JavaScript. So I'm using CodePen here, which is great. CodePen.io to demonstrate this little thing right here. This uses string interpolation. Who cares what that is? See the double handle curly braces right there? All right. That's what we're going to use here to make our app, our web page, reactive. That's one of the really cool things about Vue. It can instantly make your web page reactive. Let's say you wanted to do something based on user input, right? You want to build something that, you know, Sarah Drazner, who tweets about Vue all the time, she made this cool, like, little wine bottle maker. You type in the name of your wine and it, boom, spits it out right there on a little wine bottle on the web page. So that's, like, it's got some reactivity to it. So I'm sure you guys have had projects or you've had ideas where, oh, it'd be cool to make this little, you know, cat meme generator. And I don't want the user to put in this and then it prints out the picture. Well, with Vue, it makes it super simple to do that. So as you can see, I'm just going to walk through this a little bit right here. Down in the JavaScript part there, if you can kind of see that, it's a little bit hard to see. That is all the JavaScript you need to make this web page reactive. So anytime you update the data, which is called your text down below there, as you can see in the video there, it instantly changes. So instantly your data becomes reactive. Let's dive into it a little bit more. I'll show you an actual example here. This is kind of the same thing. So if you want to make that wine label maker or whatever it is, that cat meme generator, you got your input box, you're, you know, the client, the user can type in text. Bam, it's right on the web page. Kind of cool. So got my actual own code pen. Oh, and in the slides, I'll give you the link for the slides afterwards. It's slides.ericar.be. I'll show you. If you guys want that now, I'll give you that now. Instead of waiting. Slides.eric, it's my name. Just go there and you'll see all these slides. A couple of them aren't in there because I updated this. I did give this talk at WordCamp Atlanta, but I updated it fresh for you guys. So if you guys want to check that out, you can. So, all right. So the reason me saying that, you can find all these little code pens on code pen. And I got a link on there. So, hello, everyone. Right. We're going to do some live coding and stuff today. So something may go terribly wrong and break. And I can't wait for that to happen. Yeah, it's always fun, right? Live coding. So, this is all the JavaScript that was necessary right here. Yes, I'm going to do that right now. This is all the JavaScript that was needed to make that reactive. How cool is that? So, the big mind shift, though, with Vue, especially if you've all come from jQuery or just vanilla JavaScript, and what you've seen from it is you are not just manipulating the DOM now. You're not just putting like a div, you know, a strong with like an ID or something. You're actually using new syntax in your HTML. So this was like a real mind shift for me when I started using Vue with my WordPress themes. Again, almost all the client websites I build are on WordPress. So that's obviously the reason for this talk. But I was able to walk right into some of my themes, my custom themes, and just drop it in and start making things reactive and using Vue right away. So there's a few new things, though, that you'll have to add to your HTML to make Vue work properly. So this is a good thing and a, I don't want to say a bad thing, but it definitely requires a little bit of alerting shift, a little bit of mind shift. And once I kind of understood it, I was like, wow, Vue is really, really powerful. So all I had to do there was use my double curly braces here and use my input text. And you'll see in my JavaScript here, under data, I have the word input text as well. And that they correlate. So basically anything I put in there in my V model, back up here a second, my V model is attaching that input to that data type called input text. You can see both the exact same name. And then let's me make it reactive. So anything that I put in the input, it goes into that double curly brace there on the left. Kind of makes sense a little bit. So I know it's a very different kind of way of thinking about it, especially like I said, I came from jQuery. I came just from vanilla JavaScript and it was a total mind shift in how to do this. So moving on, that's kind of like our first concept there. And I keep talking about jQuery. Like, all right, cool, do I need to replace jQuery? Well, you can. You don't have to. They can work together. I'm actually going to show you a project I've built that where I'm using them both together. I really shouldn't because I don't need jQuery in it, but I just kind of did because it was there. So it was just me being a lazy developer. I shouldn't have done that. But anyway, you can see they both weigh about the same. When they're both minified, they both command the same. So if you worry about like page speed and slowing things down, they're both about the same size. All right, moving on. So I want to show you guys some examples of like what you would do in jQuery and then how you would do it in View. Right, because again, this is kind of going into the assumption you've all kind of seen jQuery and know kind of its syntax in a little bit. And then I'm going to show you the syntax for using something with View. And then we're going to dive into a little more WordPress stuff later on in the talk. So, all right, I've got this thing right here in jQuery what you would do. You've got your div ID of an app. You've got a label. And then you've got an input. Oh, and then you've got your paragraph. So this is the example that I just gave of like your reactive text. This is kind of how you would make a reactive in jQuery. We've got some JavaScript here. You've got your function. You've got your key up function. So every time you change keys, you go to the next key. This function is going to run. You've got your form name, right? We're creating a variable. I'm down here. I hope you guys kind of see the TV there. Right, so you're finding the class of .form name, which is right here. Your input, you're going to find your ID of your thing, which is right here. Sorry, it's right here. My input. So I'm grabbing the value of my input and then I'm popping that into the paragraph. The class of .form name. So I'm appending it. Now in view, check this out. Right? A lot less. I mean, that's pretty cool. When I saw this, I was like, okay, that's pretty awesome with the stuff you can do. And then it gets, this is like, like I said, this is just dipping our toes in. It gets way more powerful from here. But this, just showing you like on the surface level of what it can do, it's a lot. So again, like I said, the new thing that we kind of learned is that we added a little bit new HTML up here. We've got this V model, which we attached that to the data, which is called name down here. Everything else is the same. Input, ID, type, text, that's all the same. And then down here, we use this new syntax of the double curly braces, putting the name of that piece of data, which is down here, and that's it. It's instantly view makes it reactive. View does all the heavy stuff and the heavy lifting for you. So this is kind of just touching the surface of like what's possible in making things reactive. Another thing that I really don't jump into too much in this talk is that view is great for animation. In terms of like timing things and you know, like your intro, your outro and different stuff like that, animation can be used in really good conjunction with ViewJS. So how many times have you guys wanted to toggle a class in jQuery, right? This is actually something I use probably all the time, from like opening a menu or closing a menu or changing the color with a button click, something like that, or hiding something or showing it. I mean, it's a pretty commonly used thing. I think this is like the post where I pulled some of this from by Sarah Drasner credits to her. I think this is like the top thing jQuery was used for. Like out of all the stuff like jQuery could be used for. And as big of a library it is, this is the biggest thing is like toggling a class. Which is kind of funny, right? So you've got, and they have that pre-built function in there called toggle class, right? So I'm saying my class of dot toggle, which is my paragraph here, toggle the class of red on or off when I click the button. So when I, you know, on click my button will toggle that class, either red or not. Or, now this again was a little bit more javascripty and a little bit more of a mind shift for me, but in view.js more of the action happens in the actual HTML up here. So down in my view, I've got my data. All I have in the data here of my view instance as this is called is the data of active. And it's set to a Boolean. Is it true or false? So is it active or not, right? It's kind of like in the previous example. Is it red or is it not red? Okay? Then I've got, this is like what really blew my mind. I was like, oh, we're going to put things in the HTML again, right? Right here in my button. My at click function is going to happen in the HTML. And I started to realize why he built view.js like this is that when you're talking about code and readable code, maybe something you can pass on to your developers and especially making your development time a little bit faster, if you can look down your HTML and kind of see what's going on, especially in more of an application where things are reactive and things like do things. If you can look at your HTML and instantly kind of see what's going on, that's going to be a little bit faster and a little bit easier to process for you as a developer when you come in there and say, oh, okay, I see what's going on now. Versus if there was just classes here and then you had to go back and look at your jQuery to see what class was that name and then toggle it when you click this button called this class. It takes a little bit more time and processing of your brain power to be like, all right, what really is going on here? So this, the way they do it in view is very easy and legible when it's actually in the HTML like that. I hated on this at first. When I first saw this, I was like, oh, view sucks. I was like, why would they do that? Why would they put your kind of elements like that in the HTML? But once I realized why, I was like, okay, yeah, this is pretty cool. So when you're clicking it, so you're clicking it, you're saying we're making it active or we're not making it active depending on what it currently is right now, depending on the current state of your data. And then we're changing the class right here. This is kind of a dynamic class. Again, a little syntax piece there from view with the colon in front of the word class. And we're saying the class will be colorful. That's the name of the class if active is true. So that took me a minute to like wrap my brain around it and see how that works. And that's actually, see this night mode? That's exactly how night mode is working there. So that's how you do it. So, moving on. Again, I know kind of the questions are usually at the end, but in a talk like this, if you guys do have questions in the middle that you think, oh yeah. You haven't tried me on the PowerPoint? Oh, yeah, yeah, yeah. Sorry. So that was my big reveal at the end. This is not done in PowerPoint. Just the URL. Head over to that URL. Slides.ericar.be Oh, that doesn't make that any bigger, does it? Yeah, can you see that? No. Yeah, I'll spell it for you. It's slides.ericar.be It's a Belgium domain name. But it spells my name. Eric Arbe. Yeah. Sorry, that's so small. I can't increase the size of that. Only that does. Yeah, it doesn't do the URL. That sucks. Okay, good. Cool. All right, sorry about that. So yeah, that is where you'll find those. Okay. Cool. Moving on. So toggling class. The most popular jQuery thing done with jQuery. So, here's my example. Bam. This is the exact example I just gave. Let's assume that in. There we go. So, there's my JavaScript to do that. There's my HTML like I just showed right there. And CSS. The only thing you really need to worry about CSS is so it's an H2 and then it's an H2 with the class of .colorful and that gives you your fancy result there. So it's not colorful. Click it and it is colorful. Cool, right? Simple. Ish. I don't want to say easy. I've heard you're always supposed to say it's simple. It's not easy. You're explaining things to people. Oh yeah, it's simple. Yeah, right. It's easy, sure it is. I should say it's simple. Okay, one more concept here before we dive into like real world stuff. The VIF. And this is definitely a really, really cool thing when we get in a little bit technical here if you load something in the DOM, the Document Object Model and you want to use a particular CSS animation on it sometimes that gets tricky if it's already loaded in the DOM, right? If there's some kind of like entrance class that you want to give it so something like fades in, right? If you want to like rerun that that can pose a bit of a problem because it's already in the DOM. It's already loaded. So what VIF does, it's really cool that it does in VU, VU uses what's called a virtual DOM. So, if you use VIF on something, see where it says I am completely hidden unless loading is equal to true, that is not even loaded on the web page. It's not even loaded in the actual DOM. So once VIF loading equals true, I'm sorry, if it's false it won't even be loaded in the DOM. Once it becomes true, right, then that view pulls into the DOM, bam, loads it in there. Then you can use your CSS animation on it the way you expect to use it. So I know there's a glitch there. I've ran into that several times before like certain animations that I want to rerun again. And that makes it really easy to do that. So that's kind of like a handy little thing right there. So VIF, again, this is another like little mind shift of actually loading in your logic here into the HTML because that's a whole new syntax right there, that whole VIF. And then you can put regular JavaScript syntax into that statement right there. So I'm using the triple equal sign and bam saying if it's true give it the class of loading. Or I'm sorry, if it's true then load this whole div. Otherwise that whole div doesn't even load. Yeah. Alright. Cool. So I got told you guys before I am a golfer. So my company is called Golf Web Design. And we build hundreds of websites for golf courses and clients all over the country. We've known that for a while. And now we also do regular small business and things like that. So this isn't our only jam right now. But we did a cool little directory search here for the Northern California Golf Association. And I hope this video isn't too jarring for you. But basically it's a search, right? It's all based on WordPress. And this is basically pretty much a single page application. It's a search, finds those search results pulls them back plots them on a map and then you can actually view the individual search results so that actual golf course. And this is all built with WordPress. The entire database it was an existing WordPress database that was like a mess. It was like some developer went in there and made like some custom tables and I was like why did they do this? I was like we could just use a custom post type with custom fields. And so that's what we did. And so really cleaning up their data that was the biggest piece. This was like the fun part was building out the front end right here. So I want to show you guys like a little bit how this works and seeing it like in a real world application. Because this is a really nice little project. They were very happy with the result. But before we were going to dive right into it in a second I want to show you what the actual HTML looks like for this project. So again I've got some you're going to see lots of logic like I said built in to the actual HTML. And this is directly in a WordPress template page in a .php file. So I've got my double curly brace syntax there. I've got the title of the golf course which is my result.title, course type, address, things like that. So it doesn't look too crazy. So when you're actually looking at it you're like okay I can kind of see what's going on right. It's somewhat readable. Again that's another great thing that I really enjoy about view. Alright let's dive straight into that I don't want to wait any longer. Okay so San Francisco here's what's happening you've got a search bar and when I hit search it's basically going to call an Ajax request. So I went to the functions.php file for my custom WordPress theme which really wasn't too crazy of a theme it was a really small theme that I built and the Ajax request basically does a loop a WP query which we've all built any kind of theme or had to modify a theme you probably know what the WP query is and it just loops through that custom post type of golf course I could have just used the post type if I wanted to but I thought I'd make it a little bit more friendly on the back end so it loops through all there and basically does some parameters by location or by name and returns to me what it actually returns is a JSON file that's what it actually returns and then I consume that JSON data with ViewJS I don't know if I'm running in that and I even left it in here for you guys cool cool cool so I'll show you what this data looks like live oops again the live stuff always got to be wary of that alright cool so you're probably like oh this looks like code this looks like an endpoint looks like an API yes it does and it's beautiful isn't it isn't that nice isn't that nicely structured so that's one of the cool things again about WordPress you just do a little Ajax call right here you build in this function to spit out this JSON file of exactly what you need and again WordPress I'm not really going to dive into how you do that or all the technical details of that but that's what makes WordPress so easy that you can do it so quick because right now I'm actually really appreciating WordPress even more I'm building a custom application not using WordPress and I have to build the API myself and wow that takes some time to do if you've ever done it so it makes me really appreciate WordPress that you can just run that WP query function spit it out like this and bam it's nice and clean ready to go and takes a lot less time so that's what I'm doing right there right and you can see I've got my title we saw on the HTMLer before I had my result.title course type I've got my link to the actual like the full post my address city state latitude launch dude so let's get back here well no I want to keep showing you guys that alright how that's working cool so that's working right I've got my developer tools open there let's close that and it pulls in my list and I'm actually not using Vue.js to its full potential right here I could be doing more I could be throwing in some really cool animations when each one of these loads in you can make each one like pop in and do stuff like that latitude longitude man we can have a whole talk on that yeah so that was actually manually input for each course there's only like 200 courses so they actually had that data we did have to clean up some of that data for latitude longitude but Google Maps is where we got it from so so yeah so Vue.js would allow me to do some even more fun things here but if I wanted to modify this again you know uncheck and just see what private golf courses are in a 10 mile radius San Francisco there we go and you see there's kind of a little bit of animation how the other ones fade out and these new ones fade in but basically that data is being dynamically replaced like I said now I have a reactive web page it's a reactive application right away then I can change it to 50 miles bam and there we go and then my map populates as well but that really doesn't have anything to do with Vue that's just Google Maps so all based on Vue all done you know on the front and this is really just a one page site I'm just using like the index.php file here and then loading everything here each course does have its own actual like page right here which I'm kind of loading in and takes a minute because this map oh that's cool alright don't look at that I'm sure the client will want to see that alright anyway so I'm using WordPress to load each individual course page like that you know that was styled similar to how they wanted it styled and so I shouldn't say it's only a single page website but all the functionality is on this home page right here page just has information about the golf course so all using Vue and I want to show you how I looped through the results right so I got my results I showed you that file that JSON file that had kind of all that nice clean data in there so now I'm looping through that we would call that let's say you call that items right that would be my array of data all my JSON data and this is I hate the fume bar thing here but I just used it I'm sorry and I'm using the v4 like I showed you before I don't think I got into this the v4 is another really powerful thing it's kind of like a full reach loop right in PHP, orange JavaScript, full reach you're looping through a whole bunch of items right so you're going item by item and here in this example you're spitting out the message of that item which as you can see down here the message so then my result you can see on the bottom of the screen there foo and bar right so that v4 again is another new kind of concept that you put it directly in your HTML you loop through that data and there you go you can style it you can manipulate it do whatever you want to you can do a whole bunch of extra things that view will let you do after you've looped through it or even before you looped through it but again another kind of new thing in view that really kind of blew my mind once I found out how to use it and how powerful it could be okay exactly, exactly yes so that would be my JSON file would be the items but in just in this example it's the data down below there yes that's exactly right any other questions about that cool alright now in WordPress again like I said in the beginning yes no no for this example no router is needed I'm just using WordPress yep and we can dive into that later about using Vuex stuff like that but yeah for this situation just using WordPress because it's just a WordPress theme so like I said before we can drop the Vue.js script tag right into WordPress just like you would do with jQuery right there just pretty much exactly what I did in that theme for the NCGA and this is just a little bit more about how I got that data and I told you I wouldn't really go into it too much but how I got that that JSON endpoint or that nice clean response from WordPress is in my functions.php file there's great tutorials out there about this about the WPAJAX function there that lets you create an AJAX endpoint and do return to it whatever you want you can return posts, images, cat pictures, anything and I just manipulated that to give it the data that I needed so I hope that kind of makes sense when I try to explain things because I'm not from a programmer world it doesn't come out usually like programmers speak I don't think I hope not I hope it's a little bit more relatable but sometimes if it isn't apologize just call me out on it alright so I already showed you the kind of the ideal response it's nice clean data right that you want however sometimes you don't get that if you go through a REST API but there's nothing wrong with that and I do really enjoy the REST API do all you know that your websites I mean right away have this this API like enabled if you go to this oh that's right you can't see the URL real good it's really tiny if I could make nope I can't make that bigger anyway my URL up there if you put any of your WordPress websites wp-json slash wp slash v2 I know it's a little bit to remember but if you put that up there you'll get some information that looks like this about your website and anybody can kind of ping it you can protect it and disable it if you want but anybody can get data from your website like that and use it in their own application if they really wanted to but the good thing is so can you the REST API really really cool it's like ready to go out of the box like I said building this from scratch is pretty tough and very time consuming like I'm doing for a different project right now so the fact that this is readily available to you will kind of really opens up the world of what you can do with WordPress if you're just building like a preface if you're just building client based websites just pretty looking websites you probably don't need this probably don't need to worry about this probably don't need Vue.js I don't know some activity some reactivity and building a little bit more application style websites then this is what you probably want to use so fun fact if you didn't know that hopefully you already knew that about the WP API and the kind of whole little just URL scheme there again I apologize for that being so hard to read up top in the URL alright but that's our response that you can get from it and you can do with whatever you want with it just learn that like I said I've been doing this for over 10 years and this was like 2 or 3 years ago when I finally discovered this and I was like wait a second you can do so much you can just have WordPress just as your back end and build a completely non WordPress looking website with a completely different router so your links look different nobody would really know it's WordPress on the front end you can build applications I actually built a little CRM internally for our company and this is the API as well it's you post to it like update post create new post things like that and again it makes it really powerful and pre built like if you need like an MVP a minimum viable product to like show a client of what's possible like if I were going to build a CRM I might just use WordPress build it out the way I think it should be built front end would just be pulling in data from the WP API very very quickly now I'm sure if we like you got investors they wanted more security or something different you may have to build that completely from scratch but getting it going right away and for most use cases it's solid it's good to go alright so this is kind of a little bit what I did okay sorry but we're really moving here we got a little bit of time left we got to be first to lunch right okay so my template that's you this is basically like what I did in the my NCGA theme right there that I built you got your header this is what you do in WordPress get your header get your footer down below instead of having our content and our loop in the middle that's like where I actually perform my Ajax call in my functions PHP file and I used view right here to mount on to that Div ID and then I got my data my data didn't look like this I actually pulled from that endpoint from that JSON response but this is like something that you can do right there that's kind of an example of how your actual PHP file might look so in my talk here I kind of talked about building a spa single page application and this is exactly what I was just talking about with WordPress as the data source you got your API giving you that data and then on the front end you can do whatever you want with it you can make custom pages custom routes log in log out now this is the only cool graphic Tiffany and her talk she had such cool pictures and stuff like that this is the only cool graphic I have in mind so this presentation was actually built with Vue.js and WordPress the exact way that I've been talking about this entire time so I'm using local by flywheel which is really cool for running a local instance of WordPress and a little shout out to them and then the actual slides are right here so each post is one slide show you my very first slide right there if we go into visual mode that was if we recall 45 minutes ago that first slide there it is and I'm using Vue.js to loop through it on the front end through each slide so I just put all my slides this to like to like actually build this instead of build a power presentation which may have taken me forever to figure out all my animations that I wanted and all that cool stuff this took me maybe like an hour I just spun up this site real quick didn't matter what theme that I was using on the front end of this site because that didn't matter because I was just getting the actual data from these posts and then I'll show you the actual I did put this on github too if you guys are interested it's nothing crazy let's go like I said live we're not going to be coding here I'm just going to be showing you a little code never goes great oh there you go now you guys can see that URL right so there's the URL I pinged to get my response I've got some data right here I got my my post data my page index party mode that's turning you know the night mode I can use my key I thought party mode was more fun I can use my key arrows my left and right to control the slides that's what I've been doing the whole time for this slide show is using my left and right keys and basically I have some javascript functions so I'm using Axios which is like jQuery's Ajax function it basically goes and fetches a website so it's actually fetching my URL right here it's fetching that JSON file pulling it back in and then Axios is a completely separate library you can actually use library Axios with anything with any other javascript library yeah completely separate you can also use the fetch function I believe which is not yet supported everywhere but so Axios is pretty awesome for that so we're getting that data back right from my URL that I showed you guys earlier in my response and then my error handling there really simple right this is my say simple it's not easy it's simple I got my next page here right that goes to the next page I got my previous page that allows my left and right arrow keys to go yes ah yes I do exactly yeah so here's one of the that's a really good catch one of the I can find my where is it there it is ah one of the caveats that was a good catch one of the caveats of my posts here or of each slide if I wanted to add a new one in here between you know getting data from WordPress my Ajax response I'd have to put it in there chronologically I could have yeah exactly that's exactly all I had to do yep I just changed the publish date yep that's all I did so I'd look even at quick edit and I'd be like alright it's at 1210 I need to make the one at 1211 and that was it so that's the only like little caveat you could do it with like order if you really wanted to and then do some little extra but no big deal I just had to change the publish date so um yes good catch where's code there it is okay cool so getting back to that the location that hash the window location so this allowed me to actually if you saw in the in the actual slides and you see in my URL you see the URL it's tough to see but it says hashtag 23 so that's like the actual slide number that I'm on I'm on the 23rd slide why do I keep losing it there we go alright now here's what I love and hate about programming this is so awesome right so this like I said this took me maybe okay maybe two hours right to build like to do those slides like to get the titles of it I already had the outline you know written on another document everything and then I built this pretty quick not too bad thing that took me the longest probably another like two three hours of googling and like banging my head against the wall was this one piece of code right here actually actually yeah just this little section right here friggin prism is what you use to that's the fancy highlighting that you use for code so we can't get out of there oh there you go yeah oh yeah here just to show the fancy like syntax highlighting right here right that's called a little library called prism well when you would go to my next slide you'd lose all that formatting like this would look like just a garbled mess it wouldn't look like nicely formatted like this you would look like junk so I was like why it looked great on the first slide but every other slide after that it was complete crap it was just not working so that literally it took me longer to debug that then it did to like do my whole presentation so that was awesome so you have to basically rerun this function every time the view is updated which is called this little next tick function so every time a new slide enters that little function there is rerunning and I found on this one like glorious blog post that I finally found thank you so you got a lot of programming sometimes it's amazing alright so hopefully I've given you guys a little bit of an insight hopefully I wasn't jumping around too too much about what you can do with UJS what you can do with the WordPress API like I said in the last slide of that of my slides here on that URL you'll actually see some links I got my code pen collection up there if you just want to hop in the code pen and start toggling around with view and messing around with it go nuts other links up there are great and side plug I do have a little podcast called the strong web that I started not too long ago had some really good speakers Chris Coyer, Dan Maul I had the founder of Statomic on there Jack McDade really cool so I'm trying to get some more people from the WordPress community on there as well so check that out sorry for the shameless plug Julian anyway questions yes about accessibility sure sure so with view and any kind of like reactive kind of front end based framework where if you looked at the HTML you would see like one div if you look at a React app or a view app you might see like one div sitting there no content because it's all loaded dynamically it depends on I guess the accessibility of like Google being able to parse all that information correctly there are ways around that where you can do more server side rendered stuff and it gets in a little bit other things but I mean overall like rendering an application just like these slides that I built would be pretty good and pretty indexable by Google I couldn't tell you all like the little intricacies of it because I really don't know but oh yes like a screen or everything as long as you use you know semantic markup there shouldn't be any I really I couldn't say I've never tried it before but I mean everything is semantic as long as you use semantic markup and HTML and everything that you build should be good to go you know questions about view ah sorry thestrongweb.com yep there's a link in the slides larger view applications do you have any pointers about maybe maybe like for like yeah yeah so with larger view applications and not really like using them in just a WordPress theme I guess even in a WordPress theme as well you can use components which if you come from React World components are a very big thing view has their own components which I really enjoy using because a view component is your HTML your JavaScript and your CSS all in one it's not and it's not JSX it's not like inline CSS but it's those three components in one file and that's like a component that pops in there you can give it data receive data from it, it can talk to other components yeah componentizing is a huge piece of view that like in bigger applications is awesome so if you guys do really go down the view road there's a lot lot more like I said this is just touching the surface of what view can do so yeah ah yes yes that is there is a view little there's a little piece of view it's ready for that it's a special piece of code and the question is basically when you render your view or your WordPress API you may see a little issue not in this one but you may get an issue with the actual content it gives you back from your ah right here content rendered you've got actual HTML in your JSON response here like this did sometimes JavaScript does not know what to do with that view comes with a built in directive that handles that you say this is HTML coming from this JSON response boom spits it out perfect how secure I don't know I would assume it's really good in terms of being secure I would hope I really haven't come across that issue and I've never looked into it so I don't have the perfect answer for it but I imagine they're pretty on it hmm there we go so it should already oh yeah right oh that's funny oh okay yes before it even gets there I think it's called VHTML not anything about it because I have used that before so yeah question hmm any other questions it's time for lunch good cool thank you guys