 All right. Good afternoon. Thank you everybody for sticking with me through your food coma After lunch. I really appreciate that. I'm really happy that here at word camp miami we're in control of Our own slides and there's not somebody else controlling our Slides. A few years ago i was giving a Presentation about roman military history to a group of Historians, room full of people who are studying history. Historians are. That's kind of a Dumb thing for me to say. Sorry about that. So giving the presentation and someone else is controlling my Slides. So i get to the point where I'm going to talk about the use of marking stamps in roman Swords and how manufacturers mark swords. And i get to the point, make the point. And all of a sudden i hear someone from the audience Go, word press. Now turn around and look. And there's a giant word press logo on my slide. So if i've been running my own slides, i would have caught that. I had repurposed an old word camp slide for my presentation And had missed the word camp. So in the room of people Studying roman history, at least one other person was in The word press. So that made me feel better. I'm sorry? yeah, 25% of the web. So that percentage has to be roman history. There has to be some kind of roman history websites out there. So my name is kevin stover. I am the lead developer at Wp ninjas. We are the creators of the Ninja forums plugin. We have somewhere around 300,000, 400,000 active installs. We are gaining in popularity, getting bigger. Been around for five years or so. Until recently, this is what ninja forums look like. And if you download the current version of ninja forums, this is what you'll get. It's supposed to be a laser. No, that was bad, bad, wrong button. Cool, cool, cool, cool. Ha, there we go. I will not try to use the laser pointer again because Apparently i don't know how. So this is version 2.9 of ninja Forms. If you download the current version, this is what you'll get. It is a pretty straightforward php html application. When you click on, i wish there was a, ah, there we go. If you click on those tabs, the page reloads and you get a New query string up there telling you what page you're on. Which is probably how, if you have a plugin, that's Probably how you do it. You reload the page and the page changes. If you want to edit a field, you click the arrow and it drops Down a box and lets you make those changes. This drop down is currently being done with jQuery. And when i say jQuery, i mean the worst possible kind of JQuery spaghetti you can imagine. Like mama rosa herself created the jQuery spaghetti. It's terrible. It's terrible, terrible, terrible. But until recently, that's how, or currently, we haven't released it yet. Before version 3.0 ninja forms, that's how it functions. And the major part of that was that we weren't building it With javascript first in mind. So we built this php application. And yeah, i guess people are going to have to open that and have to type in it. So i guess we're going to have to do something. So we get on google and type jQuery hide content. JQuery show content. So until we started this process Of converting about eight months ago, that was the limit of my Javascript experience. I was no where near a javascript developer. And i'm still probably no where near a javascript developer. In fact, i feel a little bad being on this panel. Because i don't consider myself a javascript developer. And this is what ninja forms looks like now. So in addition to the ui overhaul, it is a completely backbone Underscore driven application. When you click on the tabs at the top, Instead of reloading the page, backbone changes your current State and re-renders the view and changes where you are. If you click on a field to edit it, a drawer slides open from the Right, and you can make all your changes. But again, none of that is reloading anything. And i feel a little bit better about this code because it's Not jQuery spaghetti. So that makes me feel good. So that's ninja forms 3.0. That's kind of where we are now. And i'm going to step back over the next few minutes here And talk to you about some of the things we experienced getting there. So this has taken us around eight months or so to accomplish. So i'll talk about a little bit about how we got there and some Of the things that we encountered. So the why do this? Why rewrite ninja forms as a backbone application? Well, the first thing is all in jQuery spaghetti, and alive. The current version of ninja forms front-end calculations is About 500 lines of heavily indented really bad jQuery spaghetti. So bad, in fact, that i refuse to troubleshoot it. When there are bugs, i tell people, just wait until 3.0, it'll all be fixed. That's how bad this jQuery spaghetti is. So when it comes to writing bad jQuery spaghetti, i'm the Chiefest of sinners. I have done a bad job, and i'm Trying to repent. I'm trying to do better. So the first reason to rewrite ninja forms as a backbone Application is that we had a lot of just really difficult to Track down code. And when you're being used on About 300,000 sites, people are going to find bugs and things Are going to come up. And if you can't easily track that Down, your life is going to be bad. You're going to be a very sad person if you can't track That down. We also have a really Complex user interface. So we used jQuery in my previous Example. We used jQuery to do all this, but That was a really bad idea. Because that means that we're Rewriting a lot of these views and these interfaces, these Components to use some react terminology. These components, we're rewriting them over and over And over again. So it's really inefficient and Relatively bad. So we have a really complex user interface. I might be the odd duck out here, but if you don't have a Really complex user interface, you probably don't need a jQuery Library or framework to do that. If you're just changing One or two things on your page, then you might not need This, but we have a really complex user interface. We also had the goal of separating our processing From our views and our display. So in the old example, right, This is all put together with php. So if i wanted to change the Way that one of these things looked, i'm opening a php file And i'm editing a php file. Which means that i run the Risk of severely screwing something up. Especially, again, because it's not written with that kind Of use case in mind. So this is all, you know, open php, Write your html, close php. Which is terrible. You shouldn't do that. So we wanted to separate, we wanted To separate those things. We wanted to separate our Processing from our display. So in the current version, or The new version, rather, i'm sorry, of ninja forms, and The new version, all that php handles is the processing. Everything that happens here just consumes json, and it spits Json back out. So what did we use to do this? What are the tools that we used to do this? Well, some of these have been spoken about a little bit. So we used require js. When we first started, require Js is a lot like browserify, which was talked about earlier. It's a way that you can write your code, and it's really Difficult for me to talk with two things in my hand. Got to have my hand free to wave. So if you build things with Required js, you can build them in different modules. It's the amd pattern. And every module can have its own Distinct concern. So you have a module that's Just responsible for changing specific parts of data. And that prevents a lot of pollution, and it prevents you From accessing things in places that you shouldn't. Required js has some funky things with wordpress, and we'll Talk about that in just a few minutes. Currently, we use gulp, which is a lot like grunt, which I talked about earlier, with something called almond. And if you want the details of that, talk to me later. We can get on that. We chose to use backbone and Underscore. And the main reason we chose About yonder underscore is that we have to have Compatibility. We get in trouble when we push Updates that aren't supported by php version 5.2. So compatibility for us is a big, big deal. That is the cheapest concern. Our main concern is not how Fast does this render. If your chief concern is how Fast does this render, backbone and underscore is Probably not your solution. You might want to look at React or something like that. Backbone and underscore, as has Been said several times today, are both included with wordpress, So you can accuse them and you can be sure that all the People who use your product are using the same version of Backbone and the same version of underscore. We have another product out there that uses a popular Library for use for select drop downs and changing select Drop downs. And we have all kinds of Problems with it because advanced custom fields and a few other Popular plugins use that same library but we use a different Version and we use the newest version and we get so many Support tickets just for that one issue. So using backbone and underscore gives us the best chance that What we're writing isn't going to conflict with anything else. And that's our chiefest concern. I don't think when you're Choosing your, to go back to what zack talked about a little Bit, when you're choosing your framework, you shouldn't Choose it based on what's cool. I mean, not that i would Know anything from what's cool. But you shouldn't choose it Based on just this is the coolest thing going, this is New. You should use it based on what Your actual use case is and what are your primary concerns. We also use marionette which is an add-on library for backbone And it gives you some cool stuff like nested views which zack Mentioned. It also gives you specific views for Collections. So if you're using backbone models to Store your data and using backbone collections to store Groups of data, marionette has collection views that will Automatically loop over that collection and render every one Of those for you. So in our case, i need to click Her again. You can't have it both ways. In our example, here, this entire group of fields is a Collection view. And each row is a view. Well, a sub-view. So marionette makes it easy to Build this because you just say, here's my child view. This is what i want you to use to render it. And then you create A collection view and you just pass it your collection and it Calls that child view for every thing in the collection. So it makes it really easy if you're using backbone, marionette Makes it really easy to make those kinds of complicated nested Views. Also, it lets you make, it Gives you layout views. So this entire screen is a view And then it's chopped up into smaller views. So the menu bar is a view. Each one of the menu items is a View. The title is a view. The controls are a view. And backbone or marionette, Rather, lets you break those down in a way that vanilla Backbone doesn't. So marionette, if you're going to use Backbone in underscore, marionette is a really good Choice at on library for making those complex things. And then finally there's radio, which i think zack Mentioned also. So backbone radio is a Method that lets your modules communicate with each other. So if you're building discrete modules, they have to have a Way to communicate. And radio is a message bus that Let's that happen. It's a pub sub model if that Means anything to you. It might not. It might not. All right. So what are some of the things that we ran across in WordPress that you need to kind of be aware of if you're Writing these js applications inside of WordPress. In our case, we're doing it inside the admin as well as the Front end. The first one, if you have any Plug-ins out there or if you're using any plug-ins, you Probably run across really silly js errors, right? And so really poorly coded plug-ins can mess up your JavaScript. So somebody can install a Plug-in that uses really crappy js or maybe they Include their own version of jQuery that's like five Years old and that can mess up your stuff. So WordPress is an open environment, right? It's the wild west out there. People are installing plug-ins From everywhere, right? So you have to be aware when you're Writing your JavaScript code that that's an issue. So WordPress is just completely open and people can do those bad things. The other issue that we ran into was using required js with WordPress and this is something that had i been a JavaScript developer, i probably would have found really Quickly but because i'm not and i searched for required js in WordPress and google and google told me nothing. There was no answer. I couldn't find it. Earlier today, camden mentioned using a shim, right? Creating a shim if you were here for that. He mentioned returning the on-page version of backbone And underscore as a shim. Well, that's what i wound up Doing with required js, only i didn't know it was called a shim. And i didn't know what i was looking for. So you're going to run into those kinds of things with these Frameworks and WordPress because it's new, right? People haven't been doing this for a long time. I was hoping someone would scream romans but nobody screamed romans. It used to be extensible. So in our example, we need other Plug-ins to be able to modify what we're doing. So we have about 46 add-ons for our plug-in and some of those Modify the way the builder looks. And we needed something that Was going to be completely open and extensible, hence the Legos. Something that's open and Extensible and for us, backbone and underscore Fit that better than react did. Because i can overwrite templates. So, for example, some of our extensions, like multi-part forms, Will actually completely change the way this builder looks. And with backbone, that's easy because i can pass it a different View and say, okay, instead of using that view, use this view. So it's really extensible. That was one of the things that We really liked about those choices. Some more romans. Anybody tell me what monument that is? Anybody? No? Okay. This is trajan's column and it's a bunch of soldiers working Together to build a wall. We have about seven to 12 third Party developers that develop for ninja forms and we sell Their stuff in our marketplace but we didn't build it, right? And we're helping these developers learn javascript with us. And so that was a challenge if you, if your product connects With any other developers, if you have other developers who are Also using your products, keep in mind that we're all at a Different place in our javascript journey, right? Everybody knows a different amount about javascript. So for us, it's been a challenge working with those Developers and trying to figure out the best ways to Help them learn javascript in our system. So as a wordpress developer, there are certain things that Might be a hindrance to you if you're just coming straight Into javascript because i know they were for me and some of The other php developers that i have talked to. The first is the idea of a stateless system versus a Stateful system, right? if you're a php developer, when You're writing php, it's going to start at the top and It's going to go to the bottom. Done, right? So i'm not going to drop the mic because that would be rude. But the server drops the mic and it's done, right? In javascript, the objects always exist. So you can create the object and that object will be there Unless you destroy it for you to call back again, depending On scope, talk to nizir. If you want to know about Scope, talk to nizir, he's the man he'll talk to. But those objects are persistent, right? There's a state that you can call. Kyle, who is dutifully Taking notes, our senior developer is a php man, and he Has recently been learning javascript as well. And this has tripped him up a couple times and trying to Figure out, well, do i need to go and call to get this data Because i don't have it versus, oh, i can just get that object Because that object is still there, right? So if you're coming at javascript from strictly a Service-side language like php, that might be odd. And it might take some getting used to in the writing code That there is a state that you can rely on. There weren't a lot of plug-in examples as i started this. So i couldn't google, like, how do you write a wordpress Backbone app in the admin? Like, that wasn't a thing, i could google it, but google Wasn't telling me anything. So as you create stuff, share it. Like, as you learn stuff about using wordpress, or using Javascript frameworks and libraries in wordpress, share that. Share that data. Because there's always going to be Someone out there who's looking for that information. And it can be hard to find. So if you're a wordpress developer, Connect with all the people in this room, because everybody in This room is trying to learn, if you are. There weren't a lot of js wordpress-specific resources Either. So when you're looking for stuff, You'll have to kind of expand your search phrases, right? Maybe i'm just bad at searching. You have to kind of expand Those, because there's not a lot of wordpress-specific stuff For javascript. And that can be a downside, right? That can be a downside to learning the language. Sorry, one second. There was no water. There was only sierra mist, which drives my throat out a bit Quicker, i think. There is, but it's been opened. And i don't think there's much out of it, but i'm kind of, I can't do that. It feels like a sign-field episode, but i Can't do that. All right, so those are some of the Disadvantages that you might have faced coming into this. And some of the things that i found, because again, before Eight months ago, i was not a javascript developer. But there's hope, right? We are the smartest developers, right? You're supposed to say yes and non. Yeah, there we go. It's the end of the day. I know, i'm sorry. But i say that in jest, but in reality, you're all working in A really open-source environment where lots of things can go wrong, But somehow we all figure out ways for them not to go wrong. You know what i mean? Like wordpress has a lot of areas in Which things can break, because you could use any number of Plug-ins or themes or whatever, and everybody kind of Makes that work, right? So i say that sort of in jest, but We're not too bad. The second thing is wordpress itself Is event-driven, right? So wordpress uses actions and filters, And if you're coming at javascript from a wordpress Background, those things should seem like event-driven Javascript should seem pretty familiar to you, because Wordpress utilizes those exact same ideas, that exact same Architecture, right? So you have events that fire wordpress, You hook into that event, and when that event happens, your Code runs, and that's how javascript works, right? So the user does this, and then this happens. The user does this and this. So it's the same. That's an advantage over perhaps other php framework or Other cms that aren't event-driven. So if you're a wordpress developer, you have that event-driven Idea already kind of ingrained in you. You can also get started really quickly. I mean, i started this Eight months ago and was able to write away, because backbone And underscore are in wordpress, i was able to very quickly Get up and running and start writing backbone code, start Writing underscore code, because it's right there. So it's really easy to get started, and it's really easy To take off there. And finally, there is the Community aspect. So, again, everybody in this Room, everybody is trying to learn javascript. We're all at different places in that journey, right? We're all at different places and learning, but everyone Here is trying to learn. And so as you learn, share that With somebody else, and if you have questions, ask Someone who knows more than you, right? That's probably not me, but find somebody else. Just kidding. So the community has always been One of wordpress' biggest assets, right? So utilize that in your learning of javascript. Earlier today, josh put up a picture of his dog, a Gratuitous picture of his dog, right? in the hopes that he would Garner people's approval. i'm going to see his dog wrapped In a blanket, and i'm going to raise him a cute little baby, My cute little baby in her smashing pumpkin shirt. Wait, to close, i'm going to close with an excerpt from One of my daughter's favorite books, which i think is apropos What we're doing. It is called the pout pout fish In the big, big, dark. i forgot the book, so my wife took A picture and sent it to me on my iphone. The whole gang gathered, feeling glorious and proud. They swam in a circle as they sang out loud. The ocean is wide and the ocean is deep, but friends Help friends, that's a promise we'll keep. We're bigger, yes, bigger, always big, big, bigger. Bigger than the javascript. Thank you. I guess i have time for questions if anybody has any. There we go. Yes, sir. Woken in my life. Right. That's really tough. The question is, if you have a Plug-in and someone else breaks something with javascript Like in queuing their own jQuery stuff, how do you mitigate Against that or prevent that as a plug-in author? And if you find the answer to that, please tell me. The problem is that there's literally nothing as a plug-in Author that i can do to keep someone else from queuing Whatever they want. So even if i could check for What they're doing, there's no guarantee that my plug-in would run Before their plug-in ran. So if their plug-in, If their plug-in name started with something that came after in In the library, like in the alphabet, then their stuff's Going to run after hours. The only thing that we can Really do is reach out to the people who are doing those Things incorrectly and ask them to correct them. But from our perspective, all we can do is use what Wordpress includes in core and then admonish everybody else to do The same thing. If anybody else has a better answer Than that, i would love to hear it. But i don't think there's Anything that we can do. I'm sorry. Maybe? Yeah. There we go. The problem with that is that you can't, while usually Plug-ins load from alphabetical, that's not guaranteed. So plug-ins can load, but even plug-ins loading, they could Still hook into an earlier hook than we use and do funky things. So, yeah, unfortunately. Anybody else? Yes, sir. Yeah, as a user, you could, If they enqueue it using wp and q, you could de-queue it. So if you want to get together later, we can talk about how you Might do that. The issue would be if they just Used a script tag, then, yeah. Cool times. Anybody else? Okay, cool. Thank you guys so much. I appreciate it.