Meet Wasp: a new programming language for developing full-stack web apps with less code.
Wasp is a simple declarative language that makes developing web apps easy while still allowing you to use the latest technologies like React, Node.js, and Prisma.
In this post, we will share with you why we believe Wasp could be a big thing for web development, how it works, where we are right now, and what is the plan for the future!
Why Wasp?
You know how to use React, know your way around HTML/CSS/…, know how to write business logic on the backend (e.g. in Node), but when you want to build an actual web app and deploy it for others to use, you drown in all the details and extra work — responsive UI, proper error handling, security, building, deployment, authentication, managing server state on the client, managing database, different environments, ….
Jose Aguinaga described in a fun way the unexpected complexity of web app development in his blog post “How it feels to learn JavaScript in 2016”, which still feels relevant 6 years later.
We are building Wasp because even though we are both experienced developers and have worked on multiple complex web apps in various technologies (JQuery -> Backbone -> Angular -> React, own scripts / makefile -> Grunt -> Gulp -> Webpack, PHP -> Java -> Node.js, …), we still feel building web apps is harder than it should be, due to a lot of boilerplate and repetitive work involved in the process.
The main insight for us was that while the tech stack keeps advancing rapidly, the core requirements of the apps are mostly remaining the same (auth, routing, data model CRUD, ACL, …).
That is why almost 2 years ago we started thinking about separating web app specification (what it should do) from its implementation (how it should do it).
This led us to the idea of extracting common web app features and concepts into a special specification language (Wasp), while the implementation details are still described via a modern stack (right now React, Node.js, Prisma).
Our vision with Wasp is to create a powerful but simple language where you can describe your web app as humanly as possible. We want to make the top of that iceberg on the image above as pleasant as possible while making the bottom part much smaller.
In such language, with just a few words, you can specify pages and their routes, specify which type of authentication you want, define basic entities/data models, describe basic data flow, choose where you want to deploy, implement specific details in React/Node, and let Wasp take care of connecting it all, building it and deploying it.
Example of wasp code describing part of a simple full-stack web app:
app todoApp {
title: "ToDo App" /* visible in tab */
}
route "/" -> page Main
page Main {
component: import Main from "@ext/Main.js" /* Import your React code. */
}
auth { /* full-stack auth out-of-the-box */
userEntity: User,
methods: [ EmailAndPassword ],
}
entity User {=psl
id Int @id @default(autoincrement())
email String @unique
password String
psl=}
Check here for the complete example.
Why a language (DSL), aren’t frameworks solving this already?
Frameworks (like e.g. Ruby on Rails or Meteor) are a big inspiration to us. However, we want to take things one step further — by designing a language specialized for the domain of web apps (a DSL) we can get rid of a lot of boilerplate and provide a cleaner & simpler developer experience.
On the other hand, we are not trying to replace everything with Wasp nor think that would make sense — just the opposite, Wasp acts as a “glue” between your React and Node.js code, saving you from the grunt work while allowing you to keep the flexibility of writing your own code. The majority of the code is still being written in React and Node.js, with Wasp serving as the backbone of your whole application.
Another benefit of a DSL is that it allows Wasp to understand the web app’s requirements during the build time and reason about it before generating the final code, and this is what we are especially excited about.
For example, when generating code to be deployed to production, it could pick the most appropriate architecture based on its understanding of the web app and deploy it to serverless or another type of architecture (or even a combination). Another example would be reusing your data model logic through all the parts of the stack while defining it just once in Wasp.
DSL opens the potential for optimizations, static analysis, extensibility, and unparalleled ergonomics.
How does it work?
Wasp compiler compiles the .wasp/React/Node.js source code into just React/Node.js target code.
Currently, Wasp supports only Javascript, but we plan to add Typescript soon.
Technical note: Wasp compiler is implemented in Haskell.
While right now only React and Node.js are supported, we plan to support multiple other technologies in the future.
Generated code is human readable and can easily be inspected and even ejected if Wasp becomes too limiting. If not ejecting, there is no need for you to ever look at the generated code — it is generated by Wasp in the background.
Wasp is used via wasp CLI - to run a Wasp project in development, all you need to do is run wasp start.
Where is Wasp now and where is it going?
Our big vision is to move as much of the web app domain knowledge as possible into the Wasp language itself, giving Wasp more power and flexibility.
Ultimately, since Wasp would have such a deep understanding of the web app’s requirements, we could generate a visual editor on top of it — allowing non-developers to participate in development alongside developers.
Also, Wasp wouldn’t be tied to the specific technology but rather support multiple technologies (React/Angular/…, Node/Go/…**.
Wasp is currently in Alpha and some features are still rough or missing, there are things we haven’t solved yet and others that will probably change as we progress, but you can try it out and build and deploy web apps!
What Wasp currently supports:
✅ full-stack auth (email & password)
✅ pages & routing
✅ blurs the line between client & server — define your server actions and queries and call them directly in your client code (RPC)!
✅ smart caching of server actions and queries (automatic cache invalidation)
✅ entity (data model) definition with Prisma.io
✅ ACL on frontend
✅ importing NPM dependencies
What is coming:
⏳ ACL on the backend
⏳ one-click deployment
⏳ more auth methods (Google, Linkedin, …**
⏳ tighter integration of entities with other features
⏳ themes and layouts
⏳ support for explicitly defined server API
⏳ inline JS — the ability to mix JS code with Wasp code!
⏳ Typescript support
⏳ server-side rendering
⏳ Visual Editor
⏳ support for different languages on the backend
⏳ richer wasp language with better tooling
You can check out our repo and give it a try at https://wasp-lang.dev/docs -> we are always looking for feedback and suggestions on how to shape Wasp!
We also have a community on Discord, where we chat about Wasp-related stuff — join us to see what we are up to, share your opinions or get help with your Wasp project.
Top comments (13)
Great vision, super cool idea! Reminds me of the "4GL" concept of yesteryear, or maybe of Model Driven Development, but better (probably) ... I do think many people tried to develop something like this, no doubt there have been numerous attempts - I hope this time the idea will succeed and "fly" :)
Thanks a lot for your support, really appreciate it! :) Yeah, this is definitely something a lot of developers are thinking about and would like to have, and this promise has materialised in many more or less successful forms (e.g. Ruby on Rails when there were no SPAs) over the years. We're also very excited about this and think now is the best time ever to achieve, given all the awesome and mature technologies we can build on top of (React, Node, Prisma, ...).
If you want to give it a try check out our Alpha Testing Program: wasp-lang.notion.site/Wasp-Alpha-T...
Yeah I'd like to ...
And the concept is super promising, sort of a high level declarative language which hides away all of those tedious details. which are essentially the same anyway from project to project - with the goal to be able to focus on the unique business requirements of an app, rather than spending time on boiler plate and reinventing the wheel.
This is sort of the "holy grail" of software/app/web development, and it has been attempted numerous times, but ulitmately none of those efforts really took off ... curious to see if this time around it could be a different story.
So what if I'd want to use, let's say, Vue instead of React - does the language support that, and if so, how? I also see new 'frameworks' popping up that are built on top of React, such as Remix which is now really getting popular - how difficult (or easy) would it be to integrate or support that?
Yes, that is exactly what we are thinking with Wasp! Right now, in Alpha, Wasp supports only React and Node.js + Prisma. Our goal is to add support for Typescript next and then bring it with that stack to the stable 1.0. With that in place, we plan to look into adding support for more FE libs (probably Vue) and also BE (e.g. Python).
Next/Remix is also a great point - we're looking into how to integrate it best - either by supporting them within Wasp or by replicating pieces of functionality they offer (e.g. SSR). That's still something we're not yet totally clear about, depending on what kind of DX we can offer with each approach.
Re difficulties of integrating with different languages/libraries - Wasp DSL is built in a way which makes it absolutely possible, but it is definitely a lot of work. In the beginning we will probably implement support for each independently, and then see if we can recognize common patterns we can extract.
Ideally, you should try to make this stuff pluggable, allowing "third party" devs to develop 'plugins' for those other languages or frameworks, WITHOUT having to touch the core of Wasp - which means you wouldn't need to do all of this work yourself ...
But, I understand that that's easier said than done - you may need to implement some of these yourself first, in order to gain an understanding on how a "plugin" system might work :)
That is exactly what we were envisioning! We imagined a plugin/module system where developers could themselves implement certain integrations & features. We could expose Wasp AST (data structure that emerges after the initial parsing) so they could modify and expand it.
It's still very high-level thinking, but we also described it in bit more details in this issue on Wasp repo: github.com/wasp-lang/wasp/issues/227
Sounds like a great system! Have you thought about compiling to webassembly? I'd also love to see it using Vue and Svelt.
If you could make a system that was agnostic of the end language, in that you could change a variable in the config and it compiled to Vue instead of React, or perhaps even wasm. That would be truly amazing!
Thanks a lot Pete! Yes, the overarching and long-term goal is to make Wasp as stack-agnostic as possible. That way we could also soften the common "new tech" syndrom that happens every few years and then we all have to re-learn the latest stack. Ideally you'd be able to choose whether you want to use React/Vue/Svelte, and possibly also combine different langs in some parts (e.g. if you have some ML library in Python you want to use).
We're still at the beginning, but very excited about all the posibilities! :) If you want to join the party, check out our Alpha Testing Program we're running currently - would be awesome to get your input! : wasp-lang.notion.site/Wasp-Alpha-T...
Great idea, I am tired of writing all the boilerplate, with this we can all focus on what matters the business logic
In that case -- we're more than happy to invite you to become our alpha-tester :)
wasp-lang.notion.site/Wasp-Alpha-T...
Not production ready according to the deploying docs. I'm interested in where it will go, specifically hoping for better docs and TypeScript support.
thanks for the comment! We expected to move to Beta in a couple of months, and support for TS is one of the main next features we're working on :)
What is your stack atm, anything specific you'd like to build?
Great tool. Wasp, language for developing full-stack Javascript web apps. Nice information.