Transcript

Thank you for having me, everyone. And thanks to the invite to speak tonight. And before I forget, massive thank you to the Wasp team, who, without their help, I definitely couldn’t be doing a presentation on their absolutely amazing tool this evening. So for those who haven’t met me before, I’m Cameron. I hang around at these events quite a lot, so you might well have met me. I’m an indie hacker, software engineer. I try and build businesses in my spare time because you couldn’t get enough of coding in the middle of the day. So I do it in the evenings and weekends as well. So make it that way you will.

Today, I’m going to be talking to you about Wasp, which is a tool that allowed me to launch my most recent SaaS in seconds. By seconds, I actually mean six to eight weeks rather than six to eight months. It’s an absolute game changer. And yeah, I hope you enjoy.

So a little bit about me, as I said, I’ve been a software engineer for over five years, self-taught, following a career in technical sales and recruitment, basically spent a long time either selling technical solutions or placing people into jobs and realizing, hey, actually, building this stuff seems a lot more fun. Specialized primarily in the front end, currently work in retail logistics software as my day job. And yeah, as I said, I love shipping businesses alongside the day job. And I’m a huge believer in building in public because I think it keeps you accountable. It allows you to teach other people about what you’ve learned, be taught, and also as well, which is really good for your general personal brand.(…) On the rare occasions where I’m not on a computer, I’m either playing rugby over in Inverleith Park in the Newtown(…) or watching a much higher standard over at Murrayfield. If you want to connect with me, you can do so via the QR code. I have a linktree because I’m very much a micro influencer rather than an influencer. If you don’t know what micro influencer is, you’re going to find out later in this talk. And here’s me in a very odd aspect ratio talking in this very event a few months ago. It looks better on my laptop, I promise.

So what is Wasp?

I don’t remember this because I was leaving primary school, but I’m told this was huge. Ruby on Rails changed the game, and it created some of the biggest startups of the mid to late 2000s. Companies like GitHub, Airbnb, relied on this piece of infrastructure.(…) I don’t think we’ve ever really had that moment for JavaScript. And as you may have guessed, I think we may have by now.(…) So Wasp is an open source, full stack TypeScript framework, basically, it’s React, Node, Postgres, but they’re not just glued together. There’s also one click deployments to fly, but you can deploy wherever you want, wherever you can run a Node server, essentially. You can use Wasp as much or as much as you like, so it’s extensible. You’re not locked into stuff. For example, a lot of people run Superbase as a database rather than using your own database that runs on the Wasp server.

So it comes with several configurations when you load it up about how you want to configure it. So you’ve got your blank, your simple version, your SaaS, which is my favorite, embeddings if it’s an AI application, and the AI-generated one, which is absolute magic because you enter an AI prompt into a terminal, and it tries to make you a SaaS based on those specifications, which is crazy,(…) slightly worrying for the future of my profession. But there it is. The cat’s out of the bag anyway.

So Wasp also includes these lovely things which any SaaS is going to need, so your authentication and therefore authorization,(…) emails, cron jobs, payments via either Stripe or Lemon Squeezy, server actions, and analytics with a variety of providers. These things all have a plug and play setup, so it’s bring your own API keys.

So just to help you have a bit of a visual idea of what the stack actually looks like, we’ve got React, which runs bundled by Vite on the front end, so that’s basically as fast as it gets in terms of the commercial bundling tools, (…) Node.js as the runtime, Postgres, which is the database, and you connect to that using Prisma as your ORM, which if you’re not familiar, basically makes working with your database a much easier and less painful process.

It has one click deployment using fly, so you just deploy via the command line. It’s a simple command, was deploy fly deploy. Bit of a tongue twister, but it’s a simple command.(…) And then you just specify your environment variables after that, and then you’re up and deployed in the cloud. It’s fantastic.

So while the buzz, if you’re pardon the pun, wasp utilizes some of the most popular tools in web development ecosystem. So it’s not that they’re chasing popular things. It’s the fact that most people in here are going to know some wasp, if not all of wasp. So actually, anyone in here with a laptop could probably get up and running with wasp within five to six hours, probably less than that, which is fantastic in the gold standard. And the wasp team’s focus is actually on making this process a bit quicker as well. So with each new release, you need to know less and less wasp specific stuff,(…) which is fantastic.

So it also works very well with AI co-generation as a result of that, because LLMs, obviously, are trained on data. Naturally, the most prominent data online is the most popular web development tools. So of course, the bots are going to be most accurate on that, or at least they’re going to have the most information.(…) So you can easily use co-generation with wasp. You’re not going to have an issue where the bots got no idea what you’re talking about.

It basically handles all the functionality of a SaaS(…) that you would potentially need, because as I said earlier, most SaaS tools have the same few bits functionality that are a pain setup.(…) And what this does is it just allows you to focus on that business value. So if you’re an entrepreneur, wasp is such a clear choice, because you get rid of that first 50 to 100 hours(…) of absolute slog, setting up stuff(…) that every time you set up a business, you have to do. So that’s why it’s so powerful, and you can just focus on the value add. And that’s one of the many reasons why you’re able to release so quick.

And it goes one step further. Most of the full-stack JavaScript frameworks, in that it connects your database, and you get deployments without any kind of lock-in, either hard or soft lock-in.

So I want to give you a bit of a demo. And I’m going to show how you can actually start your next SaaS application quicker than an F1 car can go around Spa, Frank, or Chomp in Belgium. For legal reasons, because I don’t want the Scottish Technology Club to be sued, I’ve actually used the world record from F124 as a video, alongside my terminal, because from what I understand, F1 can be incredibly litigious, and we don’t want the cracking down on us for me showing F1 laps in a technical demo. So here we go.

As you can see, the process is on the left, and this is the F1 lap, if you hadn’t already guessed. This is where I’m entering the WOS configuration. You can see here, I’ve already chosen SaaS. I’m now going into the correct directory for the app.(…) Then from here, I’m starting to HBase. Look how quick that was. It’s already up.

I’m going to open a new tab, and I’m going to migrate, because when you create it, you have a schema using Prisma, which I’ll show you in a minute. And that needs to be accounted for. You need to migrate the database to handle that. So this first migration will take a little while, because you’ve added all a schema.(…) Obviously, this would be quicker if we chose one of the more streamlined configurations. But this is the best configuration, because really, you’re taking an extra two minutes of setup time, and you get tons of stuff out of the box. As you can see, as the car here is getting into the first or second sector,(…) we’re getting there. We’re installing dependencies.

And this isn’t WASPs’ fault. This is just— it’s the internet. It takes time to download stuff.

Maybe if we’re using Bun or Deno, it might be quicker. I don’t know. I’m going to be real. I haven’t tried them. So I can’t tell you that for sure. You can see here that I’m using Node version 18, not 20. So I’m getting shouted out about Lemon Squeezy, but that’s fine, so I’m not using it.(…) So as you can see, though, something I should notice instead of joking about it is that this is just like— it’s a node process, right? Most people in this room will have seen stuff like this before. It’s not anything special. You can see here that we’re doing the Prisma migration now. I think I might have just missed it before. But you could see the new tables being created.

And here we are. We’re running.(…) Before the car has crossed the line, I’ve entered the wrong URL at the top. But it’s fine. We haven’t crossed the line.

(Applause)

And that’s with no custom configuration, nothing like that. I’m not that smart. I’m going to be real with you all. It is just that good. And no, we don’t need to see it another time.

OK. Right. So if you want to scan that QR code, that will take you to the repo. But what I’m going to do is I’m going to give you a whistle stop tour of what we just created. So obviously, that was a recording, but I deliberately haven’t touched what it generated based on, apart from me making a few notes in the sidebar.

By the way, this isn’t what the talk’s about. But sidebar markdown notes is the best VS Code extension.(…) I just stick all my acceptance criteria of my tickets into that. It’s brilliant.

So this is where we define the app. So this is the main.wasp file. So you can see here, this is where we put the script tags. So if you want to put in your analytics, that’s here. On my main app, I’m actually elsewhere, because I’m using post-hog, and it’s done a bit differently. But the cool thing about wasp is you can bring a lot of your own tools.(…) So this is where authentication happens. So we can see here the entity that we’re using as user. We can change that. That’s just how we set it up in the Prisma schema, which I’ll show you in a minute. We can see where emails be sent from. So when you sign up and you get an email, at the moment, it will say from openSaaS app.

But if we change that to Adambjs— oh, live coding, get that. So you can see the email. Obviously, you’d want to change me at example.com, because that would fail.

And you can see where it comes through for all the functions. So that’s how you control that. This is the OAuth provider. So you can uncomment these if you’re using them. So at the moment, they support Google, GitHub, and Discord. You might be able to implement others of your own. These are just the officially supported ones. And these days, users tend to expect OAuth. So it’s handy to have.(…) And then this way, you define where the users will go after either they’ve been rejected or they’ve signed in or whatever.

So if we scroll a bit further down, you can see the database here.(…) The handy thing about the Postgres database is they provide some seed files for you. So if you’re not familiar, that’s basically a function that will populate your database with realistic and useful information. So they do that at a box for you, which is awesome.(…) Here is the email sender. At the moment, it’s dummy. So it’s just running locally. But in my real app, I’m using Mailgun here.(…) So all I did was plug and play my API key. And it will start firing out emails, no pun intended, from Mailgun. And it just works. Honestly, I know I keep saying it just works, but I promise you, it does just work.

So routing works like this. And actually, I believe users react to rooted on under the hood.(…) So you define your routes, and then you define the page component. (…) And you can define paths. Obviously, you can have query params and wildcards and things like that in there. And then these obviously correspond to your actual React components in there. So if we go a bit further down as well, you can see here these actions.

Actions refer to anything that’s not a get request. So your post, your post deletes, your patches. So these are, for example, if we look in here, the update current user. So this is one that comes out of the box. And you can update the user ID. You can send a body of information that corresponds to relational columns. And it will just update it. So again, that shows, as well, you have to be authenticated as well. The one above that, a couple above that, was a query. So that’s a get. And if we look up here, maybe not up there,(…) down here,(…) the get paginated users.(…) Again, this is the sort of code that you’ll be very familiar with if you’ve used Prisma before. This gets back an array of users that’s paginated. So we split them into chunks for performance reasons. So again, it’s a Prisma statement here that you can see. So if you’re unfamiliar with Prisma, that leads me on to my next point. This is where we define our models. So a model basically maps to a table.(…) And then you can have type safe columns in that table. So all sorts as well has IDs,(…) defaults. So for example, UID for ID,(…) my one contribution to WASP code base so far as I changed that from an integer to a UID. So I’ll take the applause later, don’t worry. So that’s how the schema works. So again, you can see some are optional.(…) Some are unique. You can have default values. You can have date times. It’s extremely powerful. And for someone like me who is very front end focused,(…) I find Prisma extremely helpful to actually understand what’s going on in the database because I don’t speak back end naturally. I’m very much someone who relates better to front end. So it’s very helpful for me.

The final thing I want to show you in the code base is this, which is job.(…) So this just refers to a function, but it’s a cron job. So what that does is it uses pgboss, which then kicks off this function.(…) And you express it here. So that’s every hour. But obviously, you can set it to whatever you want. And then that fires this function. So it calculates the daily stats of your SaaS. So it will give you basically a report that likely will be emailed to you as the administrator. So that is your whistle stop tool of Wasp. Obviously, it goes so much deeper than that. And I really encourage people to try it out. So just a few bits about why I chose to use Wasp.

So I am building the money ball for influencer marketing. That probably sounds like madness if you’ve never seen this film. But it’s essentially the idea of these two guys. It wasn’t actually Jonah Hill and Brad Pitt,(…) but the— what’s his name? Billy Bean and Peter Brand had a revolutionized baseball about 20 years ago using their science and statistics. So my whole idea is, why can’t we do the same for the influencer market and find undervalued influencers who are creating amazing content and outperforming their metrics? They’re going to be cheaper to work with, likely more trusted by their audience, and thus have a much better ROI for brands to reach out.(…) So I think no one’s really doing this, certainly not diving deep into the advanced statistics. So I figured, why not try this myself? So that’s what I used to build Wasp. To build micron influencer, I used Wasp. It meant that there was lots of front end, back end, front end interaction. So an ORM was necessary. The schema, I didn’t know what it was going to look like. It was going to change all the time. So again, that was very helpful. I still wanted it to be relational, so it’s got the best of both worlds. I was going to use cron drops all the time, which as I just showed you, is very easy in Wasp. And I needed to implement payments and other major SaaS features without having to think about it too much. And this is what I think, genuinely, after a couple of months of using it, I was shocked. I thought it was going to have much more of a learning curve. It really didn’t. I was comfortable within a few hours. And I launched way quicker than usual without having to pay for a boilerplate code base, which if you’ve been on Twitter in the last 48 hours has been very controversial.

Yeah, I can tell who’s got the Twitter account, or X, as they call it now. So I was easily able to use to add tools without the official support. So in my case, it was post-hoc. And the in-person team are absolutely fantastic and clearly really love what they do and are always there to help you out. But the other thing they’ve done is they’ve trained a bot on their history, on their questions that they get asked, and their GitHub issues, which means if it’s 3 AM and you’ve been smacking your head against the wall so you can’t work something out, you can just tag that bot. And honestly, 85% of the time, it gives you the exact solution that you need, which is absolutely incredible. And for me, just generally as a developer experience thing, I found that roots are easier to track than the file-based routing you get in other frameworks. And it just allowed me to focus on business logic, which is great.

So that takes me towards the end of the talk. But I was actually watching GlasgowJS back the other night. And I watched James’ talk about his experience building a site to help ferries in the Shetlands, I think, and help people basically get a better deal on the ferry. And it was a really great talk. But something he said at the end, I thought was a really good thing to say, is that if you don’t understand everything in this talk, it’s OK.(…) Because I know there might be people earlier in their career. And I personally learned everything I know by just trying to build stuff and trying to solve problems I was facing, either in business or my personal life. And don’t be afraid to do the same. You’re probably not going to do anything too bad, as long as you have AWS spend limits enabled. You’ll be fine. And we learn by trying things out. And you’ll have a brilliant time. And you’ll become a better engineer as a result. And that’s genuinely how I kicked on in my career.(…) Yeah, just a little point from Reid Hoffman is that if you’re not embarrassed by the first version of your product, you’ve launched too late. So if you’ve got that idea, just build it. Just see if people want to use it.(…) Just launch it. Why not? I was embarrassed by V1, a microinfluencer. And now I’ve made three sales. And making internet money is a magical and strange feeling.(…) And I’d recommend it. It’s great.

So if anyone’s got any questions, that, again, in case you somehow missed it, is the QR code to the repo. I genuinely really love this tool. And would highly recommend people try it out. Thanks for listening.

(Applause)