Domain-Specific Languages (DSLs) are designed to solve specific problems within an application development domain. DSLs are different from general-purpose languages (GPLs), which are more versatile solutions and solve complex problems in several domains. C#, Java, C++, and Python are examples of general-purpose languages. A DSL focuses on addressing specific challenges faced in a domain. Hypertext Markup Language (HTML) is an example of a DSL. HTML is used to create web pages. Wasp is another, more recent example of DSL used for building full-stack web applications.
Web development is a fast-paced, constantly evolving domain with many new tools and packages popping up all the time. To build a fully functional web application, developers spend time switching between different libraries/frameworks, setting-up deployment configs, and configuring boilerplate. This prolongs the time to get from building to production. Wasp abstracts away these complexities and provides efficient ways for developers to build full-stack web applications.
This article will introduce you to Wasp, an open-source declarative domain-specific language for building and deploying full-stack web applications.
By the end of this article, you will have a good understanding of domain-specific languages and will have learned how Wasp can help you build full-stack web applications efficiently.
What is Wasp?
Wasp is a domain-specific language for building full-stack web applications with less code. It abstracts away the complexities of connecting the frontend to the backend, minimizes boilerplate code, and has zero deployment configs. Wasp was created with Haskell, a functional programming language based on mathematical functions. Wasp lets you develop full-stack web applications using React, Node.js, and PrismaDB (PostgreSQL).
There are a lot of intricacies involved in setting up a full-stack application: boilerplates, connecting the client to the server, authentication, deployment configs, data model, routing, database management, etc. These processes are repetitive and time-consuming. They eat deep into development time and prolong the time to get from code to production. Wasp takes care of these intricacies for you so that you can focus more on implementing the details of your application using modern technologies, e.g. React and Node.js (the idea is to support more stacks in the future). The goal of Wasp is to separate web application specifications from their implementation. You specify your application features and concepts in the Wasp language and then carry out implementation details in a familiar stack: React, Node, and PrismaDB.
The Wasp language is straightforward, readable, and has syntax resembling JSON. The description of your application features is written in Wasp and sits inside main.wasp. The implementation of your application is written in React and Node.js. Wasp plans to be stack agnostic in the future, that is, you will have the flexibility to choose the framework you want to build your application with.
Wasp features and how they cater to developers’ needs
Wasp is a relatively new open-source technology, but features are rolling out regularly. Wasp is currently in Beta with features for building full-stack web applications faster and better. The following features are available in Wasp.
React, Node, and PrismaDB In a single project
The fundamental characteristic of Wasp is that it allows you to build your application using modern and familiar technologies. It lets you build with React, Node, and PrismaDB all in one project. Your application features and concepts, such as title, routes, authentication, data model, database schema, etc. are written inside main.wasp. Both client-side and server-side code is written inside their respective directories provided by Wasp. The .wasp, React, and Node.js code is compiled into React and Node.js by the Wasp compiler.
The default database in a Wasp project in the development environment is SQLite. However, to move to a production environment, it’s best to change to PostgreSQL. Your database schema, called entities in Wasp, is defined inside the main.wasp file using the Wasp language. Wasp uses the Prisma Schema Language (PSL) to define entities to structure your database.
Let’s define a database schema in Wasp.
main.waspentity Roaster {=psl
id Int @id @default(autoincrement())
name String
isPresent Boolean @default(false)
psl=}Authentication
Authentication is straightforward in Wasp. Username/password, Google, and GitHub are the authentication methods currently supported by Wasp – other authentication methods will be added in the future. Because the main idea of Wasp is to take care of the complexities of building a web app for you, authentication takes only a few lines of code.
main.waspapp TestApp{
wasp: {
version: "^0.8.0"
},
title: "Test App",
auth: {
userEntity: User,
externalAuthEntity: SocialLogin,
methods: {
google: {}
},
onAuthFailedRedirectTo: "/login"
},
}These few lines of code carry out authentication via Google. GitHub and username/password can also be used for authentication. onAuthFailedRedirectTo specifies that the user be redirected to the /login page if authentication fails.
Native support for optimistic updates
Optimistic updates allow you to reflect changes to the UI while waiting for the server’s confirmation. Let’s take Twitter or Facebook as an example. When a user likes a post, the action is sent to the server. The server then registers it to the database. A response is sent to the client to update the UI. What happens when the user has a slow internet connection? It will take a longer time for the UI to reflect the “like.” These social apps use optimistic updates to update the UI without waiting for the server’s response. Most times, the server returns a successful response, but if it doesn’t (rarely), changes to the UI are automatically rolled back.
Wasp has a built-in optimistic updates feature. A step-by-step process on how optimistic updates work using the “like post” function as an example is shown below:
- A user clicks the “like” button on a post
- The client sends the request to the server.
- The UI is updated to reflect the like without waiting for confirmation from the server.
- Everything usually goes fine, but on the rare occasion that the server returns “unsuccessful,” the UI update is automatically rolled back.
TypeScript support
Wasp has built-in support for TypeScript. Developers who prefer to build with TypeScript (rather than JavaScript) can do so in Wasp. Interestingly, developers can use TypeScript on the client side and JavaScript on the server side or vice versa. Wasp lets you mix and match with no configuration. You could write a file in TypeScript and another in JavaScript. There are no constraints on how to use TypeScript in Wasp.
TailwindCSS support
TailwindCSS is supported in Wasp for styling your web application. By adding two files: tailwind.config.cjs and postcss.config.cjs inside the root of your application, you are ready to style your application with TailwindCSS. Wasp also lets you use plain CSS if that’s your preferred way of styling.
Language Server Protocol (LSP) for VS Code
Wasp LSP on VS Code helps you build Wasp applications better by providing IntelliSense, code snippets, auto-completion, syntax highlighting, and error reporting.
Wasp Command Line Interface
The Wasp CLI lets you use commands inside the terminal to set up and build your Wasp project. The following are some Wasp commands:
wasp new test-project: this command creates a new Wasp project with the name test-project.wasp version: this shows the version of Wasp your application is running on.wasp start: runs Wasp in development mode.
The great thing about Wasp is that it takes care of the complex processes in developing a full-stack application from building to deployment for you. It does the hard work for you under the hood. You can deploy your finished Wasp application to Fly.io with just one command:
wasp deploy fly launch test-project amsThis command deploys your application test-project to Fly.io. The ams stands for Amsterdam, Netherlands: the region your app deploys to.
Developer support: Wasp community
Wasp has an active community of developers building web applications using Wasp on discord. The community is available to help solve any issues you might encounter while building a Wasp application. Since Wasp is open-source, you can also contribute to the project and provide feedback to the team.
Can DSLs become the future of web development?
Domain-specific languages like JSX, Liquid HTML, and CSS have been playing a part in the web development domain for a long time. It is not farfetched to say that DSLs will be a huge part of the future of web development. Web developers are faced with many problems that only micro languages can solve. The reality is that industry experts will continue deriving DSLs (micro languages) from GPLs to solve problems encountered when building modern web applications.
Summary
Wasp enables developers to build full-stack web applications efficiently and with less code. It takes care of the complexities like connecting the client to the server, database model, authentication, database management, boilerplate, environment, and configs so that you can focus more on the implementation of details using React and Node.
Wasp has great documentation to get you started with building full-stack web applications. Want to see a working repository with a Wasp application? Check out this Note App built with Wasp.
