 Cool, thank you all for spending your 2 o'clock hour with me, I appreciate it. My name is Eric Arbay, and the talk today is on WordPress and ViewJS, and we're just going to kind of dip our toes into ViewJS. We could go really, really deep and get really complicated, but I'm not going to do that today. I just want to kind of let you walk out of here with kind of an overview of what ViewJS is and how it can interact with your WordPress website. Has anybody heard of ViewJS before? Okay, good. All right. For those of you that haven't, it is a JavaScript framework, somewhat new in the past probably three-ish years, three-four years. If you've heard of React, it's kind of, I don't want to say a competitor, but it's somewhat similar in a lot of ways it's not, but it kind of is. It's another JavaScript framework. So without further ado, let's dive into it. I've got exactly 25 slides, so if I take a minute each, it's 25 minutes. So we'll get you out of here nice and quick. So anyway, my name is Eric Arbay. You can find me on Twitter at EricArbay. I've been building websites for about 10 years now, almost exclusively on WordPress. I have a company called Golf Web Design. We focus on the golf industry. That's still going on. And more recently, I started another company, an online mattress company. We run everything on WooCommerce. If you're familiar with WooCommerce, e-commerce solution for WordPress. And so I love to just dabble and tinker with new things and build new technology. So when ViewJS came out, I thought it was pretty awesome. So that's why I kind of wanted to share it with everybody here today. So again, thank you all for being here and letting me share this wonderful information with you. Again, today's goal, WordPress as our database, right? ViewJS, we're kind of going to use it as the view layer. So basically, it's going to be kind of our interaction layer and our presentation layer. The way I use it with WordPress is different than some other people may use it. But I'm going to show you how I've done it in a few projects. Actually one in particular that I've built a directory website that uses ViewJS with WordPress as the back end. So and I don't know, maybe you guys tell me what's easier to see. Is that easier on the eyes? Then the white, is it hard to read? Okay, so we'll keep it like that. I wasn't sure which one would be better. Yeah, that's better. Can I make it bigger? I think I can. Probably could. There you go. Yeah, okay, cool. So ViewJS, it is a progressive framework. It's as simple or complex as you want to make it. That's what I love. If you're familiar with React, React is pretty complicated. You have to have a build process. With ViewJS, you can just drop it in very similar to jQuery. It's very, very similar. You just drop it in and go. And that's what makes it wonderful for working with WordPress. At least just kind of dipping your toes in and getting started with it. That's exactly what I said. It's easy to maintain. It's very legible. Once you kind of get past like the learning curve of you and you see what it can do and how it's built and how it's structured, there is like a slight mind shift you need to have coming from jQuery and traditional kind of manipulating the DOM versus writing in View. But once you get past that, you're like, wow, this is really easy. I can almost just start right up and go from this. I've heard a different debate about developers or beginning developers. If you're just learning any language, especially JavaScript, what's better to learn? A framework, should I learn plain vanilla JavaScript? You can almost jump right into View and start learning right away. My niece is right here. She could start learning this immediately. That's what we're working on next after WordPress. So anyway, that's just a script tag of how you'd include View. Really, really simple. Again, you don't need a build process. View does have a CLI, a command line interface that you can use to compile a whole View app. But we're not going to get into that. But just so you know, that is an option. All right. So this is kind of neat. I'm just going to dip into View a little bit, and then we'll talk about how it can interact with WordPress. So you see the double curly braces. That's something, if you've never seen that before in any other language or in the other programming language, you might be like, what the heck is that? And why is it not out here on my HTML? Well, because that's View. View is actually integrated in your HTML as well. As you can see, this is just a little code pen here. Just a little, I made a GIF. But you can see, when we update the actual data model here at the text, it updates where that text is on the actual screen. So I can take a second. There you go. That says hello there. So that's kind of an intro to the syntax as the double curly braces there. Two-way data binding. All right, so this is kind of neat. This is like interactive. This is like, you know, this is beginning to see, like, all right, what can View really do and why is this cool at all? I don't know. Because you can actually enter in text and see it somewhere else on the screen. That's kind of neat, right? It's two-way data binding, so it's instant. It's instantaneous. Now this might take a second, because I am on the Wi-Fi here. I don't know if I need to tether. I'm sure some other people have had issues with the Wi-Fi being a little slow. There it is. I do have, this is like a little bit of interactive. I didn't want to do live coding in this talk, but I planned on doing a little bit of something. So here we go. Now I can actually go, hello everyone, right? That's kind of neat. So if we look at the JavaScript for this, super simple. That's it. That's super minimal. Now, if I look at my actual HTML, again I'm using the double curly braces here. See my input text there? This is the mind shift that I was talking about. If you're used to, you know, JQuery or JavaScript, I guess, plain JavaScript, manipulating the DOM, the actual document object model, you don't have to do that here. With view, you can actually insert some special tags into your HTML. You can see my input type. Can everybody read that? Is that big enough? I'm referring to the V model right here. That's something you've probably never seen. If you've never seen view before, you're like, wow, this is kind of weird. So V model is actually going to bind whatever I'm typing into that input box with what's in the curly braces there, the double curly braces. So that's it. I don't need to do anything special. View picks up everything else. So now I can just as I type, there it is. So it's kind of a little bit magical. You're like, probably like, wow, what's going on? How is it even doing that? But that's how simple it is. If you've come from a plain vanilla JavaScript or JQuery world, this is like, wow, it's so easy. That's why when I saw it, I was like blown away. Speaking of JQuery, I'm going to compare the two here a little bit and I promise we're going to get into WordPress in a little bit here as well. You're probably like, oh, there's so much JavaScript. Okay, we're going to get into WordPress in a little bit. But I've used JQuery a lot. I build custom themes a lot, custom WordPress themes a lot. And I'll use JQuery for a lot of different things. You guys might use them for sliders or for different interactions here and there. That's, you know, this is the mind shift here. So I'm going to compare the two. You can see the weight of both of them is exactly the same. I'm going to walk through a little example here of something you would do in JQuery and then something you would do in Vue.js. So something you do in JQuery right here would be exactly what I just showed you in this little example right here of typing and it gets manually entered out on the screen, right? You can't see all the code necessary there. You've got a function. You know, every time you're basically performing the key up function, this is going to run. And you're basically going to grab the value and spit it out. You're going to append it to the actual HTML. There's my HTML up there. Whereas if we hop into Vue, it's very, very different. We're going to add those elements, like I said, the V model into our HTML. And look how simple and clean and tiny that JavaScript is. Super tiny. So again, like I said, even for beginners learning this, once you, if you have a good teacher, if you have some good tutorials that you can find, it really is a lot, I shouldn't say easier, but a lot more simple to understand and to grasp the concepts behind it. So don't be discouraged. If you do dive into this, don't be discouraged by kind of the initial hurdle to get over. All right, so Google says that the most popular thing that people use JQuery for is toggling a class. That's what Google says, which is kind of funny. And I'll show you a little example in a second. But this is how you do it in JQuery. You'd use the toggle class function. So basically, every time I click my button class, then the dot toggle class, my paragraph there, changes the class to red. If I show you that in Vue, it's again, look how tiny my JavaScript is. All I'm doing is setting active, active as a Boolean there, teaching my niece about Booleans, true and false earlier. All I'm doing, I'm actually got a special parameter in Vue there called the at click. And I'm basically saying if it's active, make it, you know, remove it. If it's not, add it. And that's it. So I won't go all into that, but that's roughly what it's doing. So we got a little example here. Click it, unclick it. Super simple. There's my JavaScript. Again, minimal, that's it. HTML. That's it. Super duper simple. So when I saw this, it blew my mind. Even these simple tutorials, these simple examples, the mind shift from vanilla JavaScript really is very, very different. Next. All right, now we're gonna finally get into WordPress a little bit, what you guys are all here for. So, how you would include it, and now you can't include it, is just like you would in queue any other script into your theme. Again, I do a lot of custom theming. So you would include, oops, that array. That's not what I was saying, it requires jQuery. No, no, no, no, it doesn't require jQuery. I'm sorry, sorry. If you were using jQuery in your theme, you would in queue it just like you would jQuery or any other script, I should say. Yeah. So, little error there. Somebody didn't catch that. I did just now. All right, so this is a website I built. Again, I told you I was in the golf industry, and we built a little view and WordPress app for a directory, the Northern California Golf Directory. And basically what happens is they've got a huge database. If anybody's worked with clients that have just a large database of things, of places, a list of lawyers, any kind of directory, anything like that, view would be great for searching and sorting on the front end. And that's pretty much what this was. So this is a directory of golf courses in the Northern California area. And each one basically has a profile, right? And a listing and a latitude and longitude, you know, an address. So all that data is stored in WordPress. We used a custom post type if you're wondering. Used a custom post type in WordPress called golf course. And had just basically all this data. We used advanced custom fields to hold their website, their address, all that fun stuff. And on the front end, this form is built, and you can see it's pretty quick. It's using Ajax to return those results and display them. So all this right here is using view to display these nice little boxes. You click there, it loads in the actual post type page where it has all that data. The Google map loads really slow. We incorporated Google maps into it with JavaScript. Pretty basic stuff from like a high level. But Vue.js made this so simple. And actually how we were able to perform this search and get our data back. Yes? Are you in that app, did you update the URL so that somebody could say, oh, here, send it to somebody and then come back exactly. That's exactly right. Yeah, so the question is, did we update the URL when somebody goes to that like single golf course like this Quail Lodge here. And we did do that. And we're actually using the push state and pop state to keep track of that. Does Vue provide you with golf course? Vue does not. Out of the box like Vue, including it like this, it does not. It does not. So that's something that we had to manage. Yeah, exactly. But basically, he's asking is, so when you click on that single golf course page, if you're using Ajax and it just loads it on the page, you're like, oh, I want to send this link to somebody. Well, if you're using typical Ajax, that link would just take you back to the homepage. So then your customer would be like, well, where is it? I'm just looking at the homepage. I'm not looking at Quail Lodge, which I want to look at. So we did handle that through the state of the URL browser or the URL. Next. All right, another concept that I want to show you in Vue, that's very, very awesome. And if you're a PHP developer at all, you may have used this before. We're even a JavaScript developer. You're probably familiar with kind of a for loop. And what this, again, it's really a mind shift because you're like, normally what you would do is sort through results. If you're familiar with the WP query, you're going to loop through results and display them out. If I want to get all my list of posts, I would loop through each one and maybe spit out the title. Well, you would do that in PHP. We're doing that here in the HTML with Vue. See my V4 statement right here? Result in results. I'm actually able to do this right in my HTML. So as I'm writing my HTML, I can spit out this loop here. Hence, you see the double curly braces right here, the results.title, result.address. That is actually my data being spit out on all on the view layer or on the front end layer. Exactly. That's the actual WordPress title. But those are the custom fields, like the course type, the address, the city, things like that. Yes, exactly. But the whole concept of actually being able to loop over items directly in your HTML as opposed to looping through them in the PHP and then spitting out the proper HTML that needs to format those correctly is definitely a big shift. So when I saw that and I was like, wow, this is really something that could kind of cut down on development time. Obviously, the learning curve is a little bit, but once you get there, you're like, okay, wow, this really, really makes sense. So like I said, if you venture down this road, stick with it because it gets easy and then shouldn't say easy, it gets more simple. And then it really is kind of fun to play with from there. So any questions on kind of like looping over items like this? Because what this spits out is basically a list, a whole bunch of LI items that you're seeing there. Is it interacting with the query? Yes, so how does this integrate with WordPress? What I'm doing here, yeah, I'm sorry, I did not explain that. This basically is looping over my results and I stored my results. I went, there's a separate kind of Ajax call that requested all of my posts from WordPress and returned them as a view object called results. And that's what I'm looping over. So I don't have it here, I might have another slide, but basically we're sending an Ajax request to the server, to WordPress, to return those results as a JSON object. And then actually I do have that, I'll show you in a second. Good question. Any other questions on kind of the V4 on building a loop like that? Yes? Right, well that's definitely a concern, I'll tackle the last part. He asked, is there a basically an advantage or disadvantage of looping over data like this on the back end on the server side versus on the front end side? So yes, the one thing on the front end side is you wanna make sure that your client's browser can handle something like view. It is a modern framework and there are fallbacks, but you can kind of progressively enhance or allow for those I guess. So that is definitely a concern on what your clients are running. Now I wouldn't say a huge concern because view is pretty compatible with a lot of things, but sure, I mean definitely for many buddies if you're building enterprise things, that could be a concern. As far as the data goes, serving it up on the back end and then displaying it on the front end, you're still getting that data somehow. So honestly, I like this way, and I shouldn't, I'm not a proponent either way in saying this is better, but this is kind of nice because from here, I can manipulate it further. Whereas on the back end, I have to do those complex calculations and whatnot and then spit it out. And if I wanna re-render that, do one little manipulation, you know filter through these, I can still do that on the front end cause all the data is right there. Does that make sense? So that is kind of one advantage is you can do more data manipulation from here on the front end versus having to make another server side call and spit that back out to the browser. Are you always pulling in a complete set of results or are you maybe making that a subset? Right, yes, this- Is it based on what's needed just for that page? Exactly, so the question was, are you always making a call to all the results and then filtering from there? No, no, that is those results that are being returned from the browser are usually just based on like that search query. So just return results within an X amount radius of the city that you type in. So you're not getting like the whole thing. So you're always deciding like how much to get? Exactly. And then displaying it on the board, okay? Yes, exactly. Modern browsers? Oh yeah, view is built for modern browsers. Modern browsers, but not edge, but in and out. I believe I, 10, I'm not exactly sure the backwards compatibility with it. That's a good question though, I should check that out, but obviously edge, yeah, works pretty good with edge. Yeah, the question was, is it capable of all versions of Internet Explorer? Good question. And like, car browsers, because Tesla has its own browser and one of my clients called me because they couldn't see something on the Tesla browser. Wow. If everybody didn't hear that, she's talking about a client who has a Tesla browser, Tesla car, and the browser in there. It's a great question. I don't have the fun advantage of being able to test. On a Tesla yet. I don't know, maybe? I wish I, You could go to the showroom. I wish I did, yeah, you could go to the showroom, just to test the webpage. That's a good reason to go to the, check out a Tesla. It's gonna happen more and more of that. Absolutely, well, I'm sure they release, you know, what browser is in, is in there. Yeah. So, all right. So, again, going over kind of the V4, I dig into this deeper here. This is straight from the view, js.org website. Or it's basically, in my example, or in the website that I built, I was actually pulling, I was getting an Ajax response. Here, the data is listed under items right there. This is just an array. Message foo, message bar. And so, in my HTML, I'm using the special V4 tag to loop through those items, and then display the item.message. So, that's kind of just a simpler way to see, and then here's the result. Boom, boom, one, two. Just kind of a recap of exactly what we went over. I see a hand raised? No, okay. All right, so. Getting data from WordPress. This is kind of what I was talking about. How do we actually get that data? So, there's two ways right off the bat. If you're building a custom theme, and you wanna get your Vue.js data, there's two ways to kind of build it in, without doing the whole build process and going into really diving into that and doing a standalone kind of spa, which we'll get into later on. But you can use the WPAJAX action, or the REST API. Two different ways you can pull data. WPAJAX is exactly what we used in the directory, the NCGA directory there. And basically, you're creating an action with a special function that you create. I won't get into it too much. I'll just give you a high level overview. You created a function in the functions.php file to say, all right, query all of my golf course posts and return this data in this special format. That's how we use the WPAJAX. The REST API is really, really cool, and I'll show you an example in a second of that. Does anybody use the REST API in any projects at any level? Yes. It's a little bit faster. It's a little faster, yes, yes. Yeah, there's definitely some advantages. So this, from our AJAX response, this is what we got for our golf courses. This is, like I said, this is the function that we created to return this data in this way. So it's all just custom post type data, custom meta fields that we created, city, state, zip, lat, long. And this is kind of when you ask the question about what are our results looking at, returning all of them to view and the filtering there. No, not necessarily. We're returning exactly what we searched for, and this is what it gets formatted like. So in my v4 loop, I'm looping through each one of these objects, and then I'm saying result.title, result.title, result.title, boom, spinning all out. Now, you've also got the, I know that's really tiny to read, you don't need to read all that, but you can kind of get the gist of what that's structured like. This is your WP REST API response. So if we want to get a little bit more advanced, that there is all the content that you're seeing here that's being spit out and returned to you is probably a waste. A lot of it is a waste. Whereas what I just showed you, this is way more efficient. This is exactly what I need. But in the REST API model, I don't need to know that the author was one or the comment status was open. That's kind of wasted data coming down the pipeline, right? So if the GraphQL is pretty cool, never used it before, but the promise there is that you get return only the data that you need and it's fast like the REST API. So anyway, just a kind of a side note there. But this is the response that you could get and then ViewJS can easily handle this. This is just a JavaScript object and you can easily reach in and grab anything you need here with ViewJS. That's, again, one of the really, really nice things about View. All right, 225 already. Man, that should be done. We're almost there. All right, so template.view. This is just a real quick overview of what a template page in your custom WordPress theme can look like. You get the header, you get the footer. Pretty simple stuff. Div ID equals app, right? We need that because we're saying in our script your new view element equals ID app, right? So that ties it to that div. So anything in that div ID app, that's all gonna be like a view component. That's all gonna be used. You can access anything in there from view. Again, here's our data. You can loop through it however you want. However you get the data, whether you, bam, slap it straight in there, use a PHP function, use an Ajax request. However you do it, now it's basically accessible in that div ID app. So, view.js can also be a standalone single page application. As I was saying earlier, there's a whole CLI command line interface for it where you can scaffold entire pages. There's routing, there's everything that you wanna do as a standalone kind of website. And you can use WordPress as basically your data store and pull your data from that REST API that WordPress spits out. So, this presentation is actually built exactly like that. This presentation I'm going back and forth. I use the key up function and you can see I had to use my niece's computer because mine had a USB-C connection so I'm on hers. But, you can see that I am just flipping through, this is just an index.html file and I'm using the hashtag there, 22, this is the 22nd slide. WordPress is powering all the data that came in to each slide. Does that kinda make sense? And all I did for that was use a local version of WordPress. I used, this is kind of a neat little local dev tool called local by flywheel if you've ever heard of this. If you've ever heard of MAMP, WAMP, basically the same thing, lets you run WordPress locally. So, I just set this up and that was it. All my data is in there and I will show you that right now. There's all my posts. Each post was, or each slide in this deck, in this presentation was a WordPress post. And it's all spit out right here. Anyway, mind blown. All right, so that is roughly, we can dive into that if you have any questions about how that was built and how that gets pulled in and everything. I did create a few, just like three pens on CodePen. They're really, really easy. They're really simple. Pretty much exactly what I showed you. Things that do basic functionality like this. The two-way data binding right here. Spits it out right there. Those are all on CodePen. If you guys wanna actually check out the actual code. And then I put up just some simple links. This deck is available, but the pictures won't work. If you are interested, would anyone like that? You never know. I mean, I don't know if people actually care about that or not. Slides.ericar.be. That is the URL. If you wanna check out those links, there's helpful links to learn more about view. It's pretty cool. But check that out. I uploaded that last night, not thinking that people would want my slides. I was like, oh, it's just gonna be all local. It'll be really cool. I don't have to rely on internet connection. And then I was like, well, what if people want the data? Anyway, you can go there and you'll see it, but the pictures won't load. But you can still get to the last slide. So, really slow data here on the wifi. So, any questions? Anything else? That was my pitch. I almost one half hour. So, would you recommend using view with the WordPress back if people were building like a mobile system? Hybrid that you're gonna actually turn into like Naivecov and put on the app store and everything. That I don't know because I'm not sure how it works with compilers, but I bet it would work pretty good. I haven't really worked with them too much, but I know the ones that kinda wrap your HTML and everything into like native Xcode and push it out to the store. I would imagine. I mean, it's super modern. It's a fantastic framework. I'd imagine it would work really well. So, I don't know for sure though. Good question. Would it conflict with any versions of jQuery if I had them both of them? Okay. The question is, will it conflict with jQuery if you have both of them running at the same time? No. Actually, on my NCGA directory, I had to run both. So, they do work hand in hand, jQuery and view. Yes. Let's talk a little back and forth. The question is, with Gutenberg being built in React, will that have any conflict with view? No. As far as on the front end, you're still just receiving data. You know, the view really is just a view layer. So, anything that you're receiving from WordPress is really coming out as data. So, unless you're trying to do like build a plugin with it, there's something on the admin side, possibly. But as far as I can see, there should be no conflict with how Gutenberg's being built and building view into your own theme. But again, I have really not dove into Gutenberg super deep. So, maybe at some point, I don't know, but I doubt it. Especially if you're using, like I said, just on the front end, just the view layer, you should be totally fine. Yes. Yes. Yes, no, the question was, can our clients edit all that golf course data? Absolutely. That's the beauty of it. They can log in right to the back end of, this is basically what it would look like. This would be like Pebble Beach Golf Course, Quail Hollow Golf Course. They can log in and edit that. What I was showing, the JSON object that's returned, that's just how we're getting that data from WordPress. But, yes, it's spinning it out onto an actual .json file. Yes. So, making, that was the goal was to make it so they can edit the back end of those golf courses really easily if anything changed. Yes. Yes. Can you speak to the differences between that? Sure. Sure, sure. The differences, the question was, what are the differences between using WP-HX versus the REST API? WP-HX, in my opinion, and using it for this project was, again, the first thing was you're able to spit out the data that you need. You can build a custom function that runs a custom WP query and returns only the exact data you might need. The REST API, you're gonna have to install another plugin if you wanna get ACF data, Advanced Custom Fields data, or if you have any other kind of data, you might need to manipulate the REST API in order to get the right response you're looking for. So, that's a little bit. Plus, the endpoints for the API, I don't think the WordPress documentation is great yet on how to access those endpoints. Whereas an AJAX function to be the admin AJAX, you can, like I said, I feel like it's slightly more customizable. But, I'm sorry? I'm sorry, but do you have to program everything? No, no, not at all. That's the thing. All depends on what you need. If you just need basic data from your posts, the REST API is a fantastic way to go. And that's how I did my slides here. I used the REST API to spit that information out. Yeah. So, as far as performance-wise, I have yet to actually clock them both and see which one is faster. I would think the REST API should be a little bit faster, but I think doing an AJAX function like that could depend on your server, too. And how big that process is. I know for our golf course process, I had to install a special plugin that took your current or the user's current latitude and longitude and measure it between where the golf course's latitude and longitude was. So that's a pretty advanced algorithm to say, all right, how far am I from you based on your latitude and longitudes? You know, they gotta cover the curve of the earth and all that fun stuff. So, if you're running an algorithm like that, that could be pretty server-intensive. So, but I couldn't do that with the REST API. That's why we had to do that. Any other questions? I was just gonna interject. I would think that the REST API, all else being equal would be slower than WBAJAX because it's running a lot, it's doing a lot more. On the back end to get it. Because it's REST, it's basically the structure of the web and it's more designed for long life, long living. Yeah. You use the REST API for a longer living kind of project. Whereas if you're just doing something that hot, WBAJAX is fine. Yeah. There's a lot of difference between those two. Yeah, so for the camera, basically the sentiment was that the REST API is better for long-term projects because it's probably gonna be more stable, right? Less things could break versus your own custom function where there's potential there. Yep. What's well with WooCommerce? So they're kind of different, but you can build out a custom theme on the front end with Vue.js and have that somehow integrated with WooCommerce, absolutely. We're not using, I use WooCommerce for one of my WordPress websites, yes, for one of my businesses, but on that website, we're not running Vue. But you easily could. You absolutely could. If you want to build some custom functionality in, absolutely, absolutely. And then SEO. That's a whole other ball of worms if you go into building your own custom application with Vue and custom routing, things like that, custom URLs. There are SEO concerns there, but there's ways around it. I don't know all those and I couldn't, that's a whole other class, yes, yes. But if you're using WordPress just as it is, no problem there, yeah, yeah. Okay, cool. Got you guys out 236. Pretty good, I think. You know, now you got time to relax, chill. Yeah. You might have touched on this. Was this slide by any, like, tutorials? Like, how did you learn how to come around? Yes, that is an awesome question. How did I learn Vue.js? I did just learn it myself. I used Linda, had a decent course, but honestly, front end masters, if you guys have ever heard of that website, there's a good tutorial on there by Sarah Drasner and she's fantastic. She's like a developer advocate for Vue.js and she's got, if you just search Sarah Drasner, she's got tons of content out there about Vue and she's fantastic about tutorials. She does a little bit, but it's basically kind of the concepts. She talks more about not specifically WordPress, but as far as, like, actual specifically WordPress, I don't think... You may have a good... I may have to put some stuff out there. Yeah, yeah. There we go. I appreciate it. Any other questions? No? Cool. All right. Thank you all for coming. I appreciate it.