|
| 1 | +--- |
| 2 | +title: "The first framework that lets you visualize your React/NodeJS app's code" |
| 3 | +authors: [vinny] |
| 4 | +image: /img/wasp-studio/baby-sleep-tracker-studio.png |
| 5 | +tags: [react, nodejs] |
| 6 | +--- |
| 7 | + |
| 8 | +import ImgWithCaption from './components/ImgWithCaption' |
| 9 | + |
| 10 | +<ImgWithCaption |
| 11 | + alt="Wasp Studio screenshot, baby sleep tracker" |
| 12 | + source="img/wasp-studio/baby-sleep-tracker-studio.png" |
| 13 | +/> |
| 14 | + |
| 15 | +## Visualize the Prize |
| 16 | + |
| 17 | +Imagine you’re working on your full-stack app, and you want to implement a new feature. It’s a complicated one, so you whip out a pen and paper, or head over to [tldraw](https://www.tldraw.com/), and start drawing a diagram of what your app currently looks like, from database, to server, and on over to the client. |
| 18 | + |
| 19 | +But how cool would it be if you had a **tool that visualized your entire full-stack app for you**? And what if that tool had the potential to do greater things, like instantly add useful functionality for you across your entire stack, or be paired with AI and Large Language Models for code generation? |
| 20 | + |
| 21 | +Well, that idea is already a reality, and it’s called `wasp studio`. Check it out here: |
| 22 | + |
| 23 | +<div className='video-container'> |
| 24 | + <iframe src="https://www.youtube.com/embed/SIAhAvDEoMw?si=5hOEvsQ2P6uCTUPn" frameborder="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> |
| 25 | +</div> |
| 26 | + |
| 27 | +## Wasp Studio is the Name |
| 28 | + |
| 29 | +First off, [Wasp](https://github.com/wasp-lang/wasp) is a full-stack React, NodeJS, and Prisma framework with superpowers. It just crossed [10,000 stars on GitHub](https://github.com/wasp-lang/wasp), and it has been used to create over 50,000 projects. |
| 30 | + |
| 31 | +Why is it special? It uses a config file and its own compiler to manage a bunch of features for you, like auth, cron jobs, routes, and email sending, saving you tons of time and letting you focus on the fun stuff. |
| 32 | + |
| 33 | +<ImgWithCaption |
| 34 | + alt="Wasp how-it-works diagram" |
| 35 | + source="img/wasp-studio/wasp-diagram.png" |
| 36 | +/> |
| 37 | + |
| 38 | +This combination of [Wasp’s central config file](/docs), which acts as a set of instructions for the app, and compiler also allow Wasp to do a bunch of complex and interesting tasks for you via one-line commands, such as: |
| 39 | + |
| 40 | +- full-stack deployments → `wasp deploy` |
| 41 | +- starting a development database with Docker → `wasp start db` |
| 42 | +- scaffold entire example apps, such as a SaaS starter → `wasp new` |
| 43 | +- giving you a visual schematic of your entire full-stack app → `wasp studio` |
| 44 | + |
| 45 | +If you wanna try them out yourself all you have to do is: |
| 46 | + |
| 47 | +1. [install Wasp](/docs/quick-start) with `curl -sSL https://get.wasp-lang.dev/installer.sh | sh` |
| 48 | +2. scaffold a new To Do app in TypeScript with `wasp new -t todo-ts` |
| 49 | +3. then to get the visualizer as in the screenshot below, run `wasp studio` |
| 50 | + |
| 51 | +<ImgWithCaption |
| 52 | + alt="Baby Sleep Tracker in Wasp Studio" |
| 53 | + source="img/wasp-studio/baby-tracker-full.png" |
| 54 | +/> |
| 55 | + |
| 56 | +Let’s break down what we’re seeing here real quick: |
| 57 | + |
| 58 | +- Our main App component in the middle in blue shows the app’s name, database we’re using, and its Auth method |
| 59 | +- Entities to the left in yellow show us which database models we’ve defined |
| 60 | +- Actions and Queries to the far left in red and green show us our server operations that act on our database entities |
| 61 | +- Routes and Pages on the right show us where our React components live and if they require authorization or not (denoted by 🔒) |
| 62 | + |
| 63 | +And if you’re wondering what this might look like with a more complex app, here’s what it looks like when run against [Open SaaS - our free, open-source SaaS boilerplate starter](https://github.com/wasp-lang/open-saas). |
| 64 | + |
| 65 | +<ImgWithCaption |
| 66 | + alt="Open SaaS in Wasp Studio" |
| 67 | + source="img/wasp-studio/opensaas-studio.png" |
| 68 | +/> |
| 69 | + |
| 70 | +What’s great about this is that we have an overview of all our database entities and which server functions (aka “operations”) they depend on. In the top left of the picture above, you’ll even see a cron job, `dailyStatsJob`, which runs every hour (`0 * * * *`). |
| 71 | + |
| 72 | +This, for example, makes developing backend logic a breeze, especially if you’re not a seasoned backend developer. Consider that the code that gets you there is as simple as this: |
| 73 | + |
| 74 | +```c |
| 75 | +job dailyStatsJob { |
| 76 | + executor: PgBoss, |
| 77 | + perform: { |
| 78 | + fn: import { calculateDailyStats } from "@src/calculateDailyStats" |
| 79 | + }, |
| 80 | + schedule: { |
| 81 | + cron: "0 * * * *" |
| 82 | + }, |
| 83 | + entities: [User, DailyStats, Logs, PageViewSource] |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +Yep, that’s all it takes for you to get asynchronous jobs on your server. Now your `calculateDailyStats` function will run every hour — no third party services needed 🙂 |
| 88 | + |
| 89 | +## Is this a Party Trick!? |
| 90 | + |
| 91 | +Ok. You might be thinking, the visualizer is cool, but does it actually serve a purpose or is it just a nice “party trick”? And to be honest, *for now* it is a party trick. |
| 92 | + |
| 93 | +But it’s a party trick with **a lot of potential** up its sleeve. Let me explain. |
| 94 | + |
| 95 | +<ImgWithCaption |
| 96 | + alt="You got potential, kid." |
| 97 | + source="img/wasp-studio/potential.gif" |
| 98 | +/> |
| 99 | + |
| 100 | +Of course, you can use it in its current form to get a better perspective of your app, or maybe plan some new features, but in the future you will be able to use it to do a lot more, such as: |
| 101 | + |
| 102 | +- add new auth methods with a few clicks |
| 103 | +- quickly scaffold functional client-side components with server operations |
| 104 | +- instantly add new full-stack functionality to your entire app, like Stripe payments |
| 105 | +- collaborate easily with Large Language Models (LLMs) to generate features on-the-fly! |
| 106 | + |
| 107 | +Again, this is all possible because of the central configuration file which acts as a set of “instructions” for your app. With this file Wasp literally knows how your app is built, so it can easily display your app to you in visual form. It also makes it a lot easier to build new parts of your app for you in exciting new ways. |
| 108 | + |
| 109 | +Take a look at another snippet from a Wasp config file below. This is all it takes to get full-stack auth for your web app! That’s because the Wasp compiler is managing that boilerplate code for you. |
| 110 | + |
| 111 | +```c |
| 112 | +app todoVisualize { |
| 113 | + title: "todo-visualize", |
| 114 | + |
| 115 | + auth: { |
| 116 | + userEntity: User, |
| 117 | + methods: { |
| 118 | + usernameAndPassword: {}, |
| 119 | + google: {}, |
| 120 | + }, |
| 121 | + } |
| 122 | +} |
| 123 | + |
| 124 | +entity User {=psl |
| 125 | + id Int @id @default(autoincrement()) |
| 126 | + tasks Task[] |
| 127 | +psl=} |
| 128 | +``` |
| 129 | +# A Picture is Worth a Thousand Tokens |
| 130 | +
|
| 131 | +Now that we know a bit about how Wasp works, let’s dive deeper into the potential of Wasp and `wasp studio` in combination with LLMs as a future use case. |
| 132 | +
|
| 133 | +Currently one of the biggest constraints to AI-assisted code generation is context. By now, we all know that LLMs like to hallucinate, [but they also have a pretty bad “memory”](https://glazkov.com/2023/05/18/ai-developer-experience-asymptotes/). So, if you were to try and get them to build features for your app, to make sure that the new feature works with it, you have to constantly “remind” them of how the app works, its structure, and dependencies. |
| 134 | +
|
| 135 | +But with Wasp’s config file, which is essentially just a higher-level abstraction of a full-stack app and its features, we give the LLM the context it needs to successfully build new features for the app at hand. |
| 136 | +
|
| 137 | +<ImgWithCaption |
| 138 | + alt="PG tweet" |
| 139 | + source="img/wasp-studio/pg-tweet.png" |
| 140 | +/> |
| 141 | +
|
| 142 | +And this works really well because we don’t only give the LLM the context it needs, but Wasp’s compiler also takes on the responsibility of writing most of the boilerplate for us to begin with (thanks, pal), giving the LLM the simpler tasks of writing, e.g.: |
| 143 | +
|
| 144 | +- modifications to the Wasp config file |
| 145 | +- functions to be run on the server |
| 146 | +- React components that use Wasp code |
| 147 | +
|
| 148 | +In this sense, the LLM has to hold a lot less in context and can be forgiven for its bad memory, because Wasp is the one making sure everything stays nicely glued together! |
| 149 | +
|
| 150 | +To further bring the point home, let’s take a look again at that Auth code that we introduced above: |
| 151 | +
|
| 152 | +```c |
| 153 | +auth: { |
| 154 | + userEntity: User, |
| 155 | + methods: { |
| 156 | + usernameAndPassword: {}, |
| 157 | + google: {}, |
| 158 | + }, |
| 159 | +``` |
| 160 | + |
| 161 | +Consider that this code gives auth across your entire stack. So, not only do you get all the auth logic generated and managed for you on the server, but [you even get UI components and auth hooks](/docs/auth/ui) made available to you on the client! |
| 162 | + |
| 163 | +<ImgWithCaption |
| 164 | + alt="Wasp Auth UI" |
| 165 | + source="img/wasp-studio/wasp-auth-ui.gif" |
| 166 | +/> |
| 167 | + |
| 168 | +On the other hand, without the abstractions that Wasp gives us, we end up relying on the LLM, with it’s bad memory and tendency to hallucinate, to write a bunch of boilerplate for us over and over again like this JWT middleware pictured below: |
| 169 | + |
| 170 | +<ImgWithCaption |
| 171 | + alt="Auth without Wasp" |
| 172 | + source="img/wasp-studio/auth-node.png" |
| 173 | +/> |
| 174 | + |
| 175 | +And LLMs are pretty good at coding boilerplatey, repetitive tasks in isolation. But expecting them to do it as part of a cohesive full-stack app means that we have a ton more surface area for exposure to possible errors. |
| 176 | + |
| 177 | +With Wasp, on the other hand, **it’s just a few lines of code**. If it’s easy for humans to write, it’s also super easy for an LLM to write. |
| 178 | + |
| 179 | +By the way, not only does this save us a lot of headache, it also can save us a lot of money too, as [AI-generated Wasp apps use ~10-40x less tokens (i.e. input and output text) than comparable tools](/blog/2023/07/17/how-we-built-gpt-web-app-generator), so they generate code at a fraction of the price. |
| 180 | + |
| 181 | +## Helping the Computers Help Us |
| 182 | + |
| 183 | +As technologies continue to improve, programming will become more accessible to users with less expert knowledge because more of that expert knowledge will be embedded in our tools. |
| 184 | + |
| 185 | +But that means we will need abstractions that allow for us, the humans, to work easily with these tools. |
| 186 | + |
| 187 | +Like the LLM example above, we can build tools that get AIs to write all the boilerplate for us over and over again, but the question is, *should* we be letting them do that when they *could* be doing other more useful things? LLMs are great at producing a wealth of new ideas quickly. Why not build tools that let AIs help us in this regard? |
| 188 | + |
| 189 | +That’s exactly what we have planned for the future of `wasp studio`. A visual interface that allows you to piece together new features of your app, with or without the help of LLMs, and then A/B test those different ideas quickly. |
| 190 | + |
| 191 | +<div className='video-container'> |
| 192 | + <iframe src="https://www.youtube.com/embed/ERwtJtNQL28?si=1QtV3DnfQCHjRQrK" frameborder="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> |
| 193 | +</div> |
| 194 | + |
| 195 | +Not only that, but we also then have an abstraction at our disposal that allows for easy collaboration with users who are less technically inclined. With the help of such tools, even your Product Manager could get in on the fun and start building new features for the developers to sign off on. |
| 196 | + |
| 197 | +What’s so powerful about Wasp and its feature set, is that we get code that’s **simpler to read, debug, and maintain,** for both people and machines. Coupled with a visual interface, we will be able to quickly iterate on new features across the entire stack, using it as a planning and orchestration tool ourselves, or as a way to more easily debug and oversee the work an LLM might be doing for us. |
| 198 | + |
| 199 | +This is a pretty exciting look at the future of web development and with these new tools will come lots of new ways to utilize them. |
| 200 | + |
| 201 | +What are some ways that you think a tool like `wasp studio` could be used? What other developments in the realm of AI x Human collaboration can you imagine are coming soon? |
0 commit comments