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)

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.

Available in Español

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.

3. Using Wasp DSL for Building Apps

Short description:

We can define GitHub social auth for user authentication. Wasp allows us to define our app using a DSL similar to the pseudocode we wrote. It leverages existing web dev technologies like React, Node.js, and Prisma. Wasp acts as a glue to bring these technologies together in a more efficient way. The Wasp compiler generates a full featured and production ready app with full stack auth, client routes, a standalone Express.js server, Postgres database, and more. DSLs are specific languages meant to be used in a single domain, like full stack web apps.

And maybe we can give it the root of, let's say, client root. And that'll be the client root. And then we want to authenticate people, right? We want to authenticate users so that their tasks are associated with that user. And so we'll go ahead, and since this is a developer-facing demo, let's just say we want GitHub social auth. That's the only auth we want.

Alright, cool. So here we've got a pretty simple plan for an app written out in this pseudocode. And the thing that I'd like to point out is, how cool would this be if this were actually working code? What if we could just really define things this way, like auth, for example, and get full stack GitHub auth, right? We would have client components generated for us, like the GitHub auth button, login button, to the server functions we need to authenticate users on the server, and even the database models.

Well, it turns out that we actually can do this, and we have. This is what we've done with Wasp. And here's what that todo app we just described actually does look like with Wasp. It's done using syntax that's pretty similar to the pseudocode we just wrote. And this is achievable because we've implemented a DSL in Wasp. Now, you might be thinking, oh no, OK, here's another framework we have to learn, a bunch of new technologies out the window again. Why can't you just leave what isn't broken alone? But the goal with Wasp isn't really to reinvent the wheel here, just to improve upon it, kind of like Dwight says.

We already have some really great web dev technologies at our disposal, like React, Node.js, and Prisma. And these are exactly the technologies that Wasp leverages in its framework. So Wasp DSL simply acts as the glue that brings all these together in a more efficient way. Along with your React, Node.js, and Prisma business logic, we define a high-level description of our app in very similar syntax to our pseudocode there, which is in the Wasp config file. And then this all goes into our compiler, which is an approach that's unique to Wasp, and it spits out the whole project frontend, backend, and deployment code for us. So you actually get a full featured and production ready app with full stack auth, client routes, a standalone Express.js server, Postgres database, Cron jobs, bunch of other stuff. In the future, we even plan to support different stacks and different architectures even. Before we explain more about Wasp, let's get back to DSLs and talk a bit more about them. So if we think back to our little planning example there and the pseudocode that we wrote, we were basically inventing our own little language there. But this is a very, very specific kind of language.

You can't use it to do all the things a general purpose language like C or a language like even JavaScript can. It's only meant to do a single thing. In fact, it's so specific that it's meant to be used in only one domain, like full stack web apps in this case. And that's what a DSL is. It's a domain specific language.

4. The Value of DSLs in Web Development

Short description:

Regex, SQL, and JSX are examples of DSLs. DSLs allow us to just say what we want, without having to specify every little detail of how it should happen. With DSLs, we can get back the desired result without worrying about the implementation. DSLs like SQL can perform complex search algorithms and optimize queries for speed. JSX simplifies specifying how things should happen. Despite existing libraries and frameworks, DSLs have value in building better web apps.

Wasp is just one of many DSLs though. And as developers, we're already familiar with quite a few of them. You're probably familiar with this bad boy here. This is regex and it's checking for an email address format. So regex is a DSL. SQL, as I mentioned in the beginning of the presentation, is also a DSL. These days, we're more likely writing it in the form of an ORM like Prisma or SQLite, something like that. But it's still with us after all these years, just like our good friend, Keanu. So SQL is a DSL.

Or this obvious example from the world of React is JSX, which is also a DSL. Okay, so we've established what a DSL is and that you actually use them quite often. But why? Why would we want to create a new specialized language that only works for a very specific thing, instead of just using those general programming languages that can do all that stuff and more? Well, just like Dwight says, we believe that improvement is possible, at least in the case of building better web apps. Do we really need to be specifying, for example, auth, routing, CRUD operations, and all these things over and over again? No. With DSLs, you can just say what you want and it happens. So let's see how.

Here's our regex example from before. We just said what we want here. We don't really care how it's being validated or in which order, what the mechanisms are. We just say what we want and we get back the result that we're looking for. So if we weren't using regex in this case, and rather just plain JavaScript, for example, then you'd have to write something like this, right? And this is what the how might look like, rather than the what. You have to specify every little detail of the check, it's long and it's pretty tedious. SQL is also a very interesting example. Again, this is the what. You just have to specify what you want and you don't care how you get it. On the other hand, in the background is the how. So SQL is a DSL and you just have to say what you want and all this happens. Not only is the SQL query engine performing the correct search algorithms for you, but it also knows how to optimize your query for speed, which is pretty amazing. It's able to pack all that knowledge and process into such a short command. And although this is a simple JSX example, we can imagine how messy this would get with a more complex example, right? So JSX is saving us from having to specify exactly how things should happen. So why do we need a DSL for web dev, though? I mean, we've got tons of libraries, lots of frameworks that can do all this stuff without a DSL already.

5. The Power of DSLs in Web Development

Short description:

DSLs let us say what we want, not how. Good DSLs are tied to the domain and age well. DSLs provide clear instructions for AI collaboration, making code easier to understand and maintain for both humans and AI. Web development is a perfect candidate for using a DSL.

Do we really, really need this? Plus, you might be thinking next year, AI will be able to take care of all that boilerplate for us, right? So what's the point? Well, even with all that, this is a Google search I did yesterday. And despite all the advancements we've made in web dev, it almost seems to be getting more convoluted than easier, right? This is a sentiment we hear devs express quite often. So there's a lot that can still be done.

Why then would DSLs be the possible solution to all this web dev messiness? Let's go over three reasons why. So the first reason is pretty much just a summary of what we've covered. DSLs let us say what we want, not how. And they can do this because they're specialized, because they're focused on that one domain and they're not focused on the implementation. For reason two, good DSLs are like Keanu, they age really well, right? And that's because they are tied to the domain again, which is that problem and not the implementation or the solution. For the third reason, let's turn to another friend of ours, Paul Graham, founder of YCombinator. And I'm just going to read this tweet for you. I expected technology to make programming less laborious as it does to most things. But I have to admit, I expected it to happen by programmers switching to more powerful languages, rather than continuing to write programs full of boilerplate, but having AIs generate most of it. So Paul's right there, right? We're entering an era where AIs will be our coding assistants, and we need abstractions that allow us to collaborate easily with them. DSLs give them, the AIs or the LLMs, a clear set of instructions and path towards development, while giving us something that's easy to read and maintain. This is where DSLs really shine and maybe currently overlooked. So we could say that a good DSL is an ideal abstraction for AI, but that's missing the bigger picture, actually. The point is that whatever benefits humans will also benefit AI. So reason number three could be best put this way. It allows both people and AI to use higher level abstractions and requires them to have less expert knowledge. Why's that? That's because this expert knowledge is embedded in the DSL, kind of like the SQL example we saw. This means that we get code that's easier to understand and maintain for both people and AI.

So as an example, let's just imagine a full stack app generated in JavaScript versus a DSL. The DSL code, excuse me, for auth would look something kind of like this, or actually like this, because this is actual WASP auth code. On the other hand, the boilerplate ExpressJS code for authenticating a user would look something like this. And it seems obvious which one would be easier to write, debug, maintain, regardless of AI or human. So to sum up, web development has a lot of room for improvement, and you often know what you want, but you have to spend a lot of time describing how it should be done. Meanwhile, the perspective of the user, the main parts and concepts of web apps have remained the same for a long time, but the technologies we use to implement them continuously change. Therefore, the solution space is changing pretty fast, but the problem space doesn't. So all this makes web development a perfect candidate for using a DSL. And this is exactly the problem WASP solves.

6. The Strengths of a DSL in Action

Short description:

WASP is a powerful full stack web app framework with over 14,000 stars and 40,000 apps created. Users praise WASP's simplicity and ability to capture full stack engineering tasks. The DSL in WASP allows you to define endpoints, database models, and authentication with ease, eliminating the need for writing backend code. Let's see it in action.

It saves us from spending so much time on the how, and by letting us just tell it what we want and getting that in return. So as I've mentioned before, that WASP is a relatively new full stack web app framework for React, Node.js and Prisma. And we've already amassed over 14,000 stars on our two main open source repos. And you can see the star history here. A lot has come pretty recently, but regardless, we've had over 40,000 apps created using WASP and lots of happy users pouring into Discord and places like that, where they're leaving testimonials kind of like this, where I'll highlight this one part here, where this user said, in my opinion, WASP is as game changing for me as React has been many years back. WASP's simplicity and how well the DSL captures most full stack engineering tasks is pure genius. So you see a user realizing that this ability to say what instead of how is really powerful. So let's go back now to that to-do app we started imagining and show off some of the strengths of a DSL in action.

All right. So you'll see here that back in the plan, if I just quickly scan back or switch back between the WASP config file and the plan, you'll notice a lot of similarities there. So that was deliberate. I deliberately wrote the pseudocode in a fashion that's similar to WASP so that you would get the idea here is that you can really do things like this. Define GitHub auth and you get full stack auth as simple as writing GitHub, for example. Let's go through the main.wasp file real quick and see what else we've got. We've got that client route there. We've got, again, our database models like a task and a user. And we can get all of our endpoints there by just defining CRUD and linking it to the database model or entity that we want. And we've just gone ahead and told it we want get all, create, update and delete operations. So those will always be associated with the task entity. And we actually don't have to write any back end code because this will take care of all of it for us. Besides that, we've got our roots in a similar fashion to how it was done in the plan or the pseudocode. But we can do other things like we can say we want this to be a... Only authenticated users can get to this route, right? To this route route. So that will take care of client-side authentication for us as well. So cool. Let's switch over to the browser now and let's see this. So we've actually got this app running and so let's kind of see it in action. So here it is. Here's the login page. And you can see we don't need to find GitHub Auth.

7. Adding a Username and Password Login Method

Short description:

We've added a simple username and password login method. Tasks are persisting to a database and going through the Express.js server. Wasp offers cron jobs, full stack type safety, and email sending. Wasp also understands your entire app, with a visualization of the whole app from back end to routes and pages.

So we've got the GitHub Auth button there. But maybe I want to make a change. Maybe I want to add a simple username and password login method. And once the app recompiles, we should see on the front end the sign-in form pop up. And there we go.

We've got it. I mean, I've already logged in. So I'll just go ahead and log in with that username and password. And you see I've already populated it with some to-dos. And I could say like, today I want to present at Node Congress. And yeah, just to check that these are actually persisting to a database and going through the Express.js server, let's switch to the Database Studio. And there we go. Right. So if I refresh that, we can see our new task that we just entered there, present at Node Congress. And let me just go ahead, and I'll delete it from there. And we'll go back to our app. And yeah, it's gone. So cool.

That's pretty much how Wasp works in a nutshell. And you can do so much more. You've got cron jobs. You've got full stack type safety. And you've also got email sending. And all these things that are taken care of via the config file and via the DSL in Wasp. Another really cool thing that we can do, because we have this config file and this DSL, is that Wasp understands your entire app. And we have a little experimental feature like this one, where we've actually got a visualization of the whole app. And this is just the beginning, because you can do a lot of things with stuff like this. But this shows you the power, again, of DSLs to do interesting things. So here you can see the whole app from back end up to the routes and pages. And you can see, right, that main page is authenticated.

8. Exploring OpenSaaS and Mage

Short description:

The app uses an SQLite database instead of Postgres. It has GitHub Auth and user and task entities. Wasp offers two cool projects: OpenSaaS, a production-ready open-source SaaS template, and Mage, an AI agent for generating app prototypes based on prompts.

The app is using an SQLite database instead of Postgres, which you could also use. And it's got a GitHub Auth and a user and a task entity. So that's a pretty cool, extra nice feature about using a DSL. Cool.

And if you want to get started with Wasp, we also have two cool projects that might pique your curiosity a bit more than just a to-do app. And those are OpenSaaS and Mage. And OpenSaaS is a production-ready, completely free open-source SaaS template, whereas Mage is an AI agent that will generate a full stack app prototype for you based on a simple prompt.

So like I said, OpenSaaS is a free open-source SaaS template. And it's on par with some of those paid SaaS boilerplates you've probably seen. It comes with Stripe subscriptions, Admin Dashboard, Plausible or Google Analytics, AWS S3 file uploading, OpenAI API examples. Plus it's fully documented, and we support any questions and users in our Discord. So that's really cool. If you're interested in that, want to build a SaaS.

Or Mage, on the other hand, leverages the power of our Wasp DSL config file and uses it like a set of instructions to help guide the LLM or the AI towards building full-featured prototypes. So yes, it is another AI coding assistant, but it's leveraging the power of the DSL here. And you've already seen how powerful DSL can be on its own. So we think there's a lot of potential here for Wasp in this space. So if you want to try UseMage out, it's usemage.ai, and it'll give you a zip file of the code base that you can download and try out locally.

Or if you've got Wasp installed or you install Wasp, you can just run the wasp new command and you can choose between these starter templates. And OpenSaaS and Mage, otherwise known as AI Generated here, number four, are included. So that's another cool way that you can get access to these templates. So with that, thank you so much for listening to our presentation on why the web framework of the future will be a DSL. If you scan the QR code, it'll take you to our GitHub repo. So check us out. And if you want any updates on our progress, please follow us at wasplang on X. Thanks so much.

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 new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
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
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
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
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

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.
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop