Exploring Wasp: A New Approach to Full-Stack Development
Written on
Chapter 1: An Introduction to Wasp
Recently, I had the unique opportunity to gain early access to the Alpha version of Wasp, a domain-specific language designed for building full-stack web applications. Naturally, as a curious developer, I couldn't resist diving in.
These weekends when you feel superhuman and accomplish more than you imagined are rare. I had one of those weekends recently, where I managed to visit the dentist, gather more LEGO, acquire video equipment, write several articles, and, importantly, test Wasp's capabilities.
What is Wasp?
I completely understand the confusion; the tech landscape is flooded with new languages, frameworks, and libraries, making it overwhelming for web developers. There are times when I ponder whether sticking to mobile development would have simplified my journey. Yet, after a decade in web development, I still find excitement in it, which is why Wasp caught my eye, similar to my recent interest in PyScript.
In terms of functionality, Wasp simplifies the development process by integrating all critical components of web applications: the client side, server side, and deployment. According to the Wasp team, it is a DSL aimed at streamlining full-stack web development, allowing you to use familiar front-end libraries like React alongside it.
Take a look at 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>
)
}
As you can see, integrating React and other libraries remains straightforward. If you have experience with React, this should feel familiar.
The Experience of Building a To-Do App
Upon joining the alpha testing, you’ll receive a detailed and effective tutorial for creating a To-do app. It’s true—To-do applications are still excellent for honing programming skills! The app built through Wasp is fully functional and equipped with essential features.
To-do Apps: A Timeless Learning Tool
To-do apps may seem basic, but they provide countless learning opportunities.
The tutorial estimates around 30 minutes to complete the app, and I found that to be relatively accurate, taking about 45 minutes due to some distractions and my experimentation with the code. If you plan to write all the React code yourself, expect to spend more than an hour, but I encourage you to hand-type the Wasp code for better learning.
The syntax of Wasp is distinctive and may take some getting used to. It has a unique charm, resembling a wasp in its structure. Here's an example:
entity User {
id Int @id @default(autoincrement())
email String @unique
password String
tasks Task[]
}
At present, IDEs like WebStorm lack support for .wasp files, which means syntax highlighting may be absent. The tutorial covers essential topics like CRUD operations, authentication, and using external dependencies. By the end, you’ll have a solid application generated primarily through your configuration file—main.wasp. The source code is accessible on GitHub, and their Medium clone built with Wasp is an excellent resource for deeper exploration.
The beauty of Wasp lies in its ability to streamline the development process. Once the structure is clear, you can efficiently declare actions and entities in your configuration, layer on UI components, and voilà! Adding authentication features becomes remarkably simple, and you’ll see how reusable your code can be across different projects.
In web development, details often prove challenging, but Wasp simplifies this. Once the pattern clicks, you’re well on your way.
However, be prepared for some adjustments. Working with semi-generated applications may not suit everyone, particularly those who prefer more direct control over their code. Also, while Prisma.db is integrated, it may not resonate with everyone, especially if you're not already familiar with it.
Do keep in mind that not all actions in the app support live reloading. This isn’t a flaw specific to Wasp; it’s more about Webpack's behavior. Modifying files often necessitates restarting the app with wasp start. You’ll frequently use commands like wasp db migrate-dev and wasp db studio.
A Little Extra: Swag and More
As a bonus for participating in the Alpha test, you might receive some Wasp merchandise. While it’s a nice gesture, I would have joined the testing regardless, primarily to engage with the community and support the Wasp team in their mission to enhance developer tools.
Will I become a fervent advocate for Wasp? Not in the conventional sense. I view Wasp, much like PyScript, as a valuable tool for specific contexts.
Wasp: A Tool for the Right Moment
Wasp represents a shift in how we approach web development, merging front-end and back-end in a novel way. It abstracts certain complexities while granting you control over your code.
Should you give Wasp a try? Absolutely! Should it become your go-to for every web application? Not necessarily. As a developer, it’s crucial to choose the right tools for your projects. Wasp isn’t a no-code solution or a one-size-fits-all language; rather, it’s another promising tool to add to your arsenal.
Happy coding!
Attila Vago — A Software Engineer on a mission to improve the digital landscape. A lifelong tech enthusiast, passionate writer, advocate for web accessibility, LEGO aficionado, vinyl record lover, and craft beer enthusiast.