I Tried Wasp, A DSL For Modern Web Applications

I got special access to the Alpha release of the language, so I did what every curious programmer would do…

You know those weekends when you somehow turn into Superman and do so many more things than you ever thought you could? Occasionally, I get a weekend like that, and last weekend was one of them. Between going to the dentist, picking up some more LEGO, ordering some video-shooting gear, writing a buffer of articles, I even managed to sit down and keep my promise to the Wasp team, and try out their language.

What the heck is Wasp?

Look, I know, I feel your pain. There are so many languages, frameworks, and libraries popping up all over the place, it’s becoming exhausting, especially if you’re on the web. Every so often, I, myself, feel like I should have stuck to the Android or Apple space and saved myself a lot of head-ache over the years. But here we are, 10 years into a predominantly web development career, and aspects of it still get me excited, so naturally Wasp, just like Pyscript a couple of months ago, piqued my interest.

I will not go into details about Wasp itself. The Wasp Lang team does a much better job at it than I ever could. They’re here on Medium, and this is the article that started it all for me. According to the Wasp team:

Wasp is a programming language for building full-stack web applications. That means Wasp takes care of all three major parts of a web application: client (front-end), server (back-end) and deployment. — wasp-lang.dev

What you’re essentially getting is a DSL, a domain-specific language. If you’re not familiar with them, I’ll mention just a couple, and you’ll realise you’ve already been using some of them. By far the most popular and famous DSL is HTML, followed by perhaps SQL and MATLAB. Wasp comes in — the way I understand it — as a DSL that combines the traditional domains of web development into just one, but does so in a way that allows you to still use your favourite front-end libraries, such as React, for instance. That’s clearly visible in this code snippet:

import createTask from '@wasp/actions/createTask'
import updateTask from '@wasp/actions/updateTask'
import logout from '@wasp/auth/logout.js'
import Clocks from './Clocks'


const MainPage = () => {
    const { data: tasks, isFetching, error } = useQuery(getTasks)

    return (
        <div>
            <NewTaskForm />

            {tasks && <TasksList tasks={tasks} />}

            {isFetching && 'Fetching...'}
            {error && 'Error: ' + error}
            <div> <Clocks /> </div>
            <button onClick={logout}> Logout </button>
        </div>
    )
}

I am more than able to use React and other third-party libraries just as I would normally do. If you’ve written React code before, this will be self-explanatory.

But let’s not jump ahead of ourselves…

The 30-minute impression ride

If you do sign up for the alpha testing, you’ll be given a very handy and surprisingly accurate tutorial to build a To-do app. See? See? I told you, To-do apps are still a great way to learn programming! The Wasp app you’ll be building, is, for all intents and purposes, a fully functioning app with all the basic bells and whistles it needs.

The tutorial claims you’ll need roughly 30 minutes to build the entire app, and I can actually confirm that to be the case. It took me about 45 minutes, as I also got distracted by a couple of other things, and played around with the code a bit. Of course, if you’re going to type out all the React code, you might find spending more than an hour on the code, and that’s important to note, as in real life we do tend to type most of the code, and not have snippets provided. The reason I only typed the Wasp code by hand, was because I spend hours almost every day writing React, that’s not what I was interested in learning. The Wasp code, though, I highly encourage you to type by hand. Which brings me to my next point — syntax.

I can’t entirely decide whether I like or not the syntax. It certainly has personality as it resembles an actual wasp {= your code =}, like in this Prisma snippet for example:

entity User {=psl
    id          Int     @id @default(autoincrement())
    email       String  @unique
    password    String
    tasks       Task[]
psl=}

It takes a bit of getting used to, that’s all I’m saying. IDEs or at least WebStorm doesn’t yet know what to do with .wasp files, but that’s understandable, so syntax detection and highlighting is non-existent.

The tutorial will walk you through several core topics such as basic CRUD, authentication and external dependencies, at the end of which you get a pretty impressive little application that you basically generated for the most part through a configuration file — your main.wasp. If you want to check some of the code out, it’s all public on GitHub. What’s even more intriguing is their Medium clone written with Wasp, so if you would like to get a deep dive, that’s probably an even better repo to check out.

The main positive take-away from my perspective has to be the fact that once it clicks how the entire thing works, Wasp starts making sense. Declare actions and entities in your Wasp config file, slap some UI onto it, and you’re done. Adding login and signup becomes impressively effortless, and once you look at your finished app, you can see how easily reusable your code becomes for many other projects in the future.

In web development, the devil’s always in the details, but with Wasp, that feels like less of a case. Once you get the pattern, you’re pretty much set.

I will say this, though. There are a couple of things you’ll either have to get used to or live with. Working with a semi-generated application is not everyone’s cup of tea, but if you like control, and like that control to be in the code, Wasp is a promising new tool for many developers.

Additionally, there’s also Prisma.db you may or may not like. I can’t say I am a fan of it, but that’s potentially because I used it very little in the past. Don’t let that deter you from trying Wasp. If anything, it’s a nice intro into Prisma as well.

Finally, you may want to note that not everything you do in the app supports live-reload. This is not necessarily a Wasp issue, though, but rather Webpack. Removing or adding files in my case typically required a restart of the app with wasp start. A couple more commands you’ll be using a lot are wasp db migrate-dev and wasp db studio.

It’s about more than just swag!

Spoiler alert, if you sign up for the Alpha test, you’ll be promised some Wasp swag. I suppose that’s to thank people for their time. I’ll be honest, though, I would have done it without the swag as well. The only reason I filled in my address to receive it, was so that I could show it off to other people and start the conversation and give the Wasp team a lift in their efforts to make this a popular tool for more and more developers out there.

Will I become a Wasp zealot and evangelist? Not in the way you’d expect. As I have stated before, I do not believe in religiously adopting anything in software development.

Just like I see Pyscript, I also see Wasp as another potentially great tool for the right job in the right context. The way I would summarise Wasp in its current state…

Wasp is a bit of a mindfuck when you’re used to coding web apps in a distinct front-end, back-end, infrastructure kind of way. It both abstracts away a lot, while still keeping you in control.

Should you try Wasp? Abso-feckin-lutely, yes. Should you adopt Wasp for all your web app projects going forward? Of course not. You’re still a software engineer, and part of your job is to use the right languages, frameworks, and libraries for the projects you’re building. Wasp is not a no-code solution, it’s not for static and presentational websites, and it’s most definitely not a Swiss army-knife language.

Wasp is another very promising new wrench in your toolbox. Use it wisely.

Attila Vago — Software Engineer improving the world one line of code at a time. Cool nerd since forever, writer of codes and blogs. Web accessibility advocate, Lego fan, vinyl record collector. Loves craft beer!