 How come that intro didn't include your yo-yo skills? It can't walk and chew gum at the same time. So, as the gentleman said, my name's Cory Moss. I've been developing WordPress for about eight years now. Before that, or including that, I was focused on building SaaS apps. Software as a service, otherwise known as web apps for about 15 years. And I've actually been building websites since, we'll just say the mid-90s and leave it at that. My primary focus these days, aside from contract work, building websites for clients, is a plugin called Kanban for WordPress. You should check it out. So the goal for today, we're going to be talking about why you might build a web app on WordPress. And then we're going to get into some of the common patterns and problems that you might encounter if you're trying to build a web app. My intent here is to address a lot of the common problems and patterns at a very high level. Kind of a mile-wide, inch-deep scenario. So, I'm going to mention a few plugins that I think would help solve these problems or bits of code, that kind of thing. Come find me afterwards if you want to dig into something deep. But for the most part, again, I'm just trying to give you a big picture, show you that it can be done and how it can be done. And then we'll go into some other considerations that you might have of why or why not you should use or should not use WordPress to build web apps. So to get a little context, how many developers have we got in the room? So if I say use a nonce, we all know what I'm talking about, those guys know what I'm talking about, hang out. Yeah, cool. Thank you. All right, so why on earth would you build a web app on WordPress? Matt Mullenweg, our illustrious leader, or one of them anyway. 2013, so now, oh my goodness, five years ago. In the state of the word, talking about different ways of how WordPress was evolving, going from blogging to CMS, introduced the idea of using it even as a web app framework, a framework on which to build web apps. And they got me scratching my head because I had been doing client work for a long time, building websites as we think of them on WordPress, and at nights and weekends, I'm building SaaS apps, and we'll talk a little bit more about that in a sec. For clients, but using every other framework, and just having occurred to me to kind of combine the two. So this talk actually started a little bit, conceptually as a thought experiment, of like, could I do this, and in fact, could I do this without code? And then coincidentally, this is now only a couple of years ago, but wound up getting a client who, without any developer knowledge, not a nerd, not like me, actually found a business case, there's a certain industry that was needed people to fill out forms, and then just needed proof that they'd filled out those forms. GDPR, as we think of it now. But getting consent, that kind of thing. And so he used gravity forms to collect the data, gravity view to display the data, and he was done, and he was selling this successfully, and hired me as a developer to put a few polishing finishes on it, but it was very enlightening to me. So, some very specific reasons why you would use WordPress. So let's start with, you know, what is the SaaS app? What is a web app? For me, my background was, I was in New York, going to a lot of bootstrap, startup, meetups, and encountering people who, again, not nerds, had ideas, because of course we live in the age of, you know, build it, and a month later you'll sell it to Facebook for billions, which sadly I've never seen, but it does happen, presumably. But some people coming to me and saying, I've got an idea for, you know, I want gluten-free people to be able to enter and share recipes, or I want to do time tracking for my company, and these little ideas that would make great web apps, and they'd come to me, and this is kind of, again, where the germination of this talk came from, you've got these ideas, or you've got that uncle who gets drunk at somebody's birthday party, and inevitably goes, I've got a great idea. The best one I was ever pitched was an online graveyard. You would create a page, a memorial, that's not such a bad idea, but basically whenever anybody around you died, you'd create a page for them, that would then live on forever. Okay? He'd had a bit to drink. But on a technical level, some of the reasons why you might use WordPress is that, again, at a high level, it solves a lot of the common problems. When you start thinking about an app, most of us are thinking about, again, who is the audience, or maybe they're dead, but you're not thinking about the same stuff that goes into every app, which is things like user management, log in, log out, and I'll tell you as a person who's been building apps since 2003, I have built a log in, log out. If I never have to build another password reset page in my life, I will die happy. These are just things that every app needs, right? Routing, right? You go to slash contact and it shows a contact us page, which also brings us to displaying content. These are things that WordPress is just naturally good at. Oh, I missed, I always miss this, asterisks are for nerds. So coming back here, common database schema, I'll adjust my glasses here. Common database schema is another great reason if you are a developer, or even if you're not building a web app on WordPress, all your data goes into a database in a logical way. So when you hire me, because you've made your first billion from Facebook, I can come in and go, oh, I understand immediately where all the data is. So some of the business cases of what kind of apps work well on WordPress, and where they don't. Good business cases, things that are web-based, things that are user-based, right? So in developer parlance, we have a phrase called crud, create, retrieve, update, and delete. So it's basically data in, do something with the data, retrieve the data, update the data if it gets out of the data, if they're not dead, and come back to life. You might want to update that. Or maybe just delete it all together. Am I being a little morbid? But some good examples are, if you're familiar with Yelp, leave reviews for restaurants, bars, that kind of thing. Recipe sites, I always like to use that as an example because I've come across it a shocking number of times. I don't know that you could sell it, but they are lots of fun, right? Community sites where you want people to interact with each other. And LMS, learning systems, people take courses and move forward, that kind of thing. The bad use cases. If you've got an idea where you're like, I'm going to move financial information, machine to machine, API, WordPress, not so much. And if you're doing something that requires a lot, a lot of writing, if you open the fire hose of Twitter's API and try to point it into WordPress database, that database is going to fall over dead. And then you can create a page on that web app that's been described. But not such a good idea for building your web app on WordPress. So the examples that I mentioned are something like SendGrid, which is meant for sending transactional emails, or Stripe, which is for moving financial or money back and forth. Things like that. WordPress is probably not the framework for you. So moving on to some basic common patterns of your standard, quote unquote, standard web app. You've got a home page, where you push everybody, and that's usually tied to some other marketing pages, use cases, buy my app, or use my app, or share my app, that kind of thing. Contact us page, your app is broken, or my app goal is not dead. And then where we get into the meat of it, which is you want users to register, and then sometime later, log in again to see the data. They're probably going to see some sort of dashboard. I use dashboards. At least stand by. Technical difficulties. Getting very excited. Sign in. Now there are ways to interact with data, data tied to them. So again, here's your crud. You're probably going to create, you're going to view, retrieve, and I drew a little dotted line up too, because sometimes that view data is public. Again, if you have a recipe site, you want people to be able to find those recipes publicly without necessarily having to sign in. And then the other piece that a lot of us don't think about is basically admin. How are you going to manage users? How are you going to track users? How do your users see what they're creating and all that stuff without signing in and signing out? And this is one of the things that when I was building web apps by hand or using other frameworks, they don't come with an admin necessarily. So I'm still building these extra screens where I'm like, oh, view all users or view all recipes that all users entered. Whereas in WordPress, this might be the thing that we are all the most familiar with, if we're familiar with WordPress at all, you sign in and you see an admin. And you've got, if you're using custom post types or whatever it is, you're seeing the different things, your forms or your customers as users when you sign in. So again, huge win that this is already built into WordPress. To solve each one of these pieces one at a time, talk amongst yourself. Now we'll solve each one of these. So you've got a homepage, marketing pages, highest level. WordPress comes with a beautiful theme, the new theme, 2017, is actually more business oriented than it's ever been where you've got a dedicated homepage rather than it being presented as a blog. So honestly, right out of the box you've got a homepage, tweak it a little bit and there's the homepage for your app. If you want to dig in a little deeper page builders are great. Pippin Williamson who is a thought leader, blogger, prominent personality in the WordPress ecosystem wrote a phenomenal blog post a couple of years, I don't know, 9000 words, 20,000 words, huge book. He basically wrote a book reviewing, I don't know, the top dozen page builders. A couple that I recommend, Beaver Builder, Good Guys, Good Community, Elementor, Huge Community, Divi starts to overlap with page builders, but basically this lets you start with a blank slate and build the homepage the way you envision it, again without having to write code. And then remember, asterisks are for nerds if you do know a little bit of code or a lot of code to spin up a homepage very quickly because again the idea here is you've got an idea, you want to get it out as quickly as possible. There are these front end frameworks libraries, Bootstrap foundation just real quick for spinning up home pages. The next piece, Contact Us every website needs a contact us no code at all, form builders things like Ninja Forms, Gravity Forms great options, nice UI so you're dragging and dropping to create your fields something like Ninja Forms actually comes with it built in when you activate it the first time excuse me, creates a Contact Us page, has all the functionality set up right away to send you an email. One of the things that has been growing to over the last couple years is that there are now a lot of add-ons for these form builders that can add extra functionality and again I'm starting to see more people that are coming closer even to building web apps just with what's built into these form builders so you've got somebody fills out a form and you can basically push them into a sales funnel drip campaigns you're using something like Zapier makes you happier I'll tell you remember how to pronounce it so Zapier basically is a service that you can tie into again just using plugins that can talk to all of these different systems so you can collect an email and then push it into other apps and things like that and then again Asterix is for nerds we introduced this pattern called post back loops so let's talk a little bit about that this is mostly for the nerds or aspiring nerds in the room the rest of you look out the window or something that's true you've got a decent view anyway so a very simple pattern here for building web apps and again this does require some code but it took me a while to kind of distill this down in my head so I like to show it to people in case they haven't quite got a grasp on it because this is so powerful and honestly internally obviously all of WordPress but extremely powerful is you have some sort of form for a user to interact with and forms are crucial for interaction it's how we collect most of the data this is what changed the internet I'm old enough to remember this this changed the internet from read to write because originally you were just reading stuff and you couldn't interact with it and suddenly there were forms and you could so basically getting a form onto a web page somehow whether it's writing HTML or using a form builder or whatever and then that form includes this is where we get a little nerdy WordPress has a function called WP nonce nonce field WP whatever it is nonce field where it adds a little secret key to your form right and then when somebody submits that form and it gets sent to the website you add a little bit of code that listens for that nonce and that's how you know that that form has been submitted you kind of know what data to expect and then you can do something with it again this is writing code but the ability to create a page with a form on it by adding your little nonce you add a little code that listens for that nonce and so you create this cycle where you can collect data do something with it, stick it in the database send an email whatever send them back to that form send them to the output of that form and start all over again and this from an app development standpoint was huge this was basically what I wanted to be using for most of the functionality because again most web apps broadly speaking are collection of data and then displaying of data so this was huge so the post back loop will show that we had a few times later in this talk so ok, moving on to the next piece user registration and login coming back out of Nerdland membership plugins basically what I tell people here is Google WordPress membership plugins it's as simple as that but there are so many of them that it's getting harder and harder to recommend them I mean one is literally called membership restricted content pro as one put out by that guy Pipin that I mentioned S2 members one that I've come across a bunch of times and what this will do is basically take that WordPress user registration form and push it to the front so now you've got what looks more like a web app and less like somebody signing into a WordPress website a lot of these will even include payment options and so if you want to charge for your app five bucks a month whatever it is there's options for that or there's add-ons for that the one piece of advice that I will I will give is please please please it's a little harder when you're not in the US but it's still doable always use Stripe as a payment processor not PayPal then the next option is user registration plugins which are basically include less functionality where it doesn't necessarily include all of the bells and whistles of a full membership suite what this does is again basically just push that the sign up or sign in forms to the front end so that they look a little more consistent with your app again Google WordPress front end either registration or profile one of my absolute favorite things that I stumbled across early on is a lot of people grumble and groan especially developers about social login but the truth is people like my mom who I consider a normal user love social login right one click she's already signed in through Facebook or one click but she's not on Twitter but you get the idea of one click and so there's a plugin that I think is literally called social login but you install this plugin and now users can sign in with one click and when we're talking about MVPs when we're talking about a proof of concept web app you're just trying to get users in you want as little friction as possible so something like social login is a great option then getting back into Nerdspeak you can use there's simple functions built into WordPress to display the login page you can also use a form like we talked about and again that post back loop for signing somebody in and then a new pattern I've been seeing more of is people actually using multi site and so instead of having one WordPress site where different people signing in are created as users they've actually sort of hobbled it together that different people can see a get their own WordPress install and then we need to protect the admin right you don't want anybody to be able to just get in and see these dashboards they need to be able to sign in so again the membership plugins there are plugins that are specifically dedicated to restricting the admin this is usually based on user role and then again three lines of code you can basically create a role based redirect so in a template you can say if you are not a subscriber user whatever redirect them back to the home page same idea protecting specific pages so like that view data tab that I showed you membership plugins again have it built in restricted content plugins have it built in and that same role based redirect now for capturing data you've got again you've got these form builders who are getting easier and easier how do you store all that data well there are plugins that basically will manage creating custom post types which is your object your recipe and then adding custom fields and I'm a big fan of advanced custom fields there are others I should have other names but basically this will let you say so associated with a recipe are ingredients and so that you can have multiple ingredients or you know who wrote this originally or what book could you find this in Betty Crocker whatever and then again we introduce we see again our post back so then displaying data this is an example I mentioned earlier I had a client that was using gravity forms to collect data and there's a sort of a parallel plugin called gravity view that is exactly built for displaying that form data so form viewers are great page builders are surprisingly good at taking data out of the database and displaying it back to you so these days you can actually custom build what you want that dashboard right again when I started this talk a few years ago you were kind of limited on how you could display that data back now you can actually take the advanced custom fields and have that data show right in that page builder layout so it's beautiful it's nicely laid out it's not clunky at all post back loops so just to review real quick you've got a homepage sorry I was trying to state by the mic homepage and other marketing pages page builder themes right contact us use a form builder login registration there are dedicated plugins that will handle user registration and user membership gets you signed into your app so now you can see it and here you can basically build custom pages that are will display data or collect data and again you can use something a form builder or a page builder to accomplish this to display that data back and then those membership plugins or there are other plugins that will let you protect your admin but so that you can sign in and see see how your app is performing see how your users are doing and using it that kind of thing other considerations things that you might fight with and things that you might worry about from a developer standpoint if you do get into writing code to keep things simple every developer I talked a little bit about this yesterday and my other talk every developer, most developers struggle with a thing called not invented here syndrome if I didn't write it it is inferior it is good because I am genius I suffer from this most developers suffer from this we are wrong, there's almost always somebody smarter than we are and what's amazing is we live in this age of github and open source we're these very smart people and the kindness of their hearts have put it all online so for the love of God use it use other people's code when they've solved a problem at least don't write it from scratch and where possible keep it simple stupid or the ban kiss right use themes, use built-in functionality and then where you need to again this very simple pattern of a form to collect data that submits data and you do something with it and that way it just keeps you writing whatever code is possible some development considerations you've got this thing called WPCLI which is like deep nerd where you're in terminal and it looks like you're in the matrix or something right if you know it, great if you don't know it, don't bother learn it later because again our goal here is to spin things up as fast as possible using compilers like grunt, gulp, webpack are great again, sort of the point of this slide I guess is if you already know it great use it because again the point is speed you're just trying to get an idea out into the world as fast as possible so that people will try this thing and tell you that it's genius or terrible and then headless WordPress it doesn't actually show anything but you can use a lot of the code on the back end it tends to speed things up but why have I faded my little reminder to close my eyes for 20 seconds so that I don't get an eye strain you've got to hack yourself it shuts down my computer for 20 seconds so that I stop staring at my screen and take a stretch this is the yoga that we were supposed to do and then deployment this is a tricky one because however you're building your web app code or no code you've got to get it out there and there are a lot of great hosting solutions now that will give you with one click a WordPress install and what I recommend in this scenario where again you're trying to work quickly is just do it all in one place just cowboy it, work on the server these are blasphemous statements I realize from the perspective of a developer but again for the sake of just getting it done do what you've got to do and then there are other solutions like deploy HQ which will take you any local code if you're developing on your local I'm here coding on this website and then I need to push it to the server solutions like that will do it automatically FTP obviously and then plugins like WP Migrate DB Pro that will sync databases because inevitably you build the thing, you get it online and then now because customers are interacting with it you need another staging environment something so that you can make changes without it breaking for your users and that's where syncing starts to become a little tricky and so using a plugin like this to manage it becomes a good option nice to haves again if you're developer supremo then you can get into things like Ajax REST APIs and building things pretty and custom APIs and all that stuff but the truth is and there's so many people with ideas that are like I need the best user experience and I get it and so they want seamless and you click and the page doesn't refresh and it just does funky little things and all that stuff you generally don't need that to prove a business case you're collecting the recipe, you're displaying the recipe that's enough, it doesn't have to fly around the page or be the prettiest to prove the concept save it for version 002 there we go, finishing my talk here once again, I am Corey if you have questions we'll do some now obviously but feel free to email me, I'm kind of an email guy but you can also do that thank you very much