The Full-stack Framework of the Future is a DSL

Rate this content
Bookmark

With all the web framework options available in popular programming languages today, why would anyone want to create a new Domain-Specific Language (DSL) for building full-stack web apps? In this talk, we will cover our rationale for deciding to do so, why DSLs are a compelling option, their pros and cons, and what it has enabled us to build for full-stack JavaScript devs so far. Additionally, we will cover some of the ups and downs of open source devtool development from our nearly three-year journey since Y Combinator (YC)

This talk has been presented at Node Congress 2024, check out the latest edition of this JavaScript Conference.

FAQ

Wasp is a relatively new full stack web app framework for React, Node.js, and Prisma. It uses a domain-specific language (DSL) to simplify web development by allowing developers to define high-level descriptions of their apps.

Vince is part of the founding team at Wasp and is responsible for developer relations.

A DSL, or domain-specific language, is a specialized programming language designed to be used in a specific domain. It allows developers to specify what they want without needing to describe how it should be done. Examples of DSLs include SQL, regex, and JSX.

Wasp leverages existing web development technologies such as React, Node.js, and Prisma. Its DSL acts as the glue that brings these technologies together in a more efficient way, allowing developers to focus on defining high-level descriptions of their apps.

Wasp offers a variety of features including full stack authentication, client routing, a standalone Express.js server, a Postgres database, cron jobs, and more. It allows for high-level definitions in its DSL, which simplifies the development process.

A DSL is beneficial for web development because it allows developers to specify what they want rather than how to implement it. This can save time and reduce complexity. DSLs are also specialized, making them more efficient for their specific domains and easier to maintain over time.

Wasp allows for high-level definitions of authentication methods in its DSL. For example, developers can specify GitHub social authentication or simple username and password login, and Wasp will handle the implementation details.

Yes, Wasp provides an experimental feature that allows you to visualize your entire app. This feature showcases the power of using a DSL by displaying the entire app structure from backend to routes and pages.

OpenSaaS is a free, open-source SaaS template that comes with features like Stripe subscriptions and AWS S3 file uploading. Mage is an AI agent that generates a full stack app prototype based on a simple prompt, leveraging the power of Wasp's DSL.

The web framework of the future might be a DSL because DSLs allow developers to specify what they want without needing to describe how it should be done. This can save time, reduce complexity, and make code easier to understand and maintain. DSLs also age well and can integrate easily with AI coding assistants.

Vince Canger
Vince Canger
21 min
04 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The future of web frameworks will be a DSL, simplifying development and allowing for clear instructions for AI collaboration. DSLs like SQL and JSX have value in building better web apps. Wasp is a powerful full-stack web app framework that eliminates the need for writing backend code. It offers features like cron jobs, type safety, and email sending. Wasp also has projects like OpenSaaS and Mage that provide production-ready templates and AI-generated prototypes.

1. The Future of Web Frameworks

Short description:

Hey, everyone, my name is Vince. Today, I'm here to claim that the web framework of the future will be a DSL. Let's enlist the help of Keanu Reeves and Miki Roark to understand the difference between SQL and jQuery. SQL is a DSL, and jQuery isn't. Now, let's start with a short exercise to put things into perspective. We'll imagine building a full-stack web app and plan a to-do list app in pseudocode.

Hey, everyone, my name is Vince. I'm part of the founding team at Wasp. I'm responsible for developer relations there, and I'm here today to make the claim that the web framework of the future will be a DSL. But before we begin talking about DSLs or why you should even care about them, I'd like to enlist the help of two of my good pals here, Keanu Reeves and Miki Roark.

Now, they're going to help us figure out an important difference between SQL and jQuery. You're probably thinking, okay, that's easy. The obvious answer is that SQL is a database language, while jQuery is a front-end library. But I'm talking about something a little more specific than that. Let's look, for example, at the difference between 2006 and 2023. Keanu Reeves there, he's still looking humble, adaptable, moisturized. He's ready to take on any new role. And he's probably just about as popular as he was when he started his career. And in that sense, he's got a lot in common with SQL. On the other hand, Miki has more in common with jQuery. And that's unfortunate because it seems like both of them have their best years behind them.

You might be thinking, what the hell does this actually have to do with a presentation about DSLs and web frameworks? Well, the simple point is, is that SQL is a DSL, and jQuery isn't. We'll go deeper into this point later, but until then, just keep this comparison in the back of your mind. Because first, we're going to start with a short exercise to put some things into perspective. And it's a pretty simple exercise. We're just going to imagine we're in the planning phase of building a full-stack web app. We could use literally any app as an example, but this is basically my brain whenever I have to think about a demo app to build. So we're going to switch to a code editor and start planning out our to-do list app in some pseudocode.

2. Planning the To-Do List App

Short description:

Here's a plan. Let's define a class called to-do list. We need a title and a model called task with an ID and a description. We'll relate tasks to the user and define a user model with an ID and tasks property. We'll also define task endpoints for essential CRUD operations. For the client, we need a root component, import a React page, and name it main page.tsx.

All right, so here's a plan. And we could choose any kind of syntax we want. And I'm going to just make up some pseudocode that's similar to JavaScript or JSON or something.

So let's define a class, and we'll call it to-do list. And then let's think about what kind of things. I mean, we're planning an app here. So what kind of things do we need to take note of?

And I guess the first obvious thing is a title. We can call it to-do list app. Very imaginative. And the next thing might be, since it's a to-do list app, we need to define some database models, right? Let's define a model called task. And models usually have an ID, and we'll just make that an integer. And a to-do list task will have some kind of description, right? Like mow the lawn, do the laundry. So that'll be a string. And we want to relate these tasks to the user. So we'll put a user ID property here and relate it to a user model and their ID.

Okay. Now that we have that out of the way, let's do the user model as well. And of course, we'll also give an ID, integer, and let's just keep it simple. We'll do a property called tasks, which is an array of related tasks that they've defined. Okay. And since this is for a full stack app, we need to define some endpoints for our task, right? So we'll call that task endpoints. And yeah, this is a simple app. And so we basically need our essential CRUD endpoints. So we've got, you know, get all or fetch all. We want to create a task, and maybe we want to update a task, right? Cool. We also want to consider the client.

So we need a root component, maybe. So let's say client root. And yeah, this is a simple app. So we'll just import a React page there, and we'll just call it main page.tsx.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

Workshops on related topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs