Matija Sosic 1:45
Awesome. Thank you very much, Brian, for the awesome introduction. And yeah, I’m super excited to be here. And you know, just to chat about what WASP is, what DSLs are, how they tie together, you know, how it goes together with web development? So yeah, really appreciate the invitation to come here. And, you know, just chit chat about this. So yeah, you know, just super Shortly, we will see what the DSs are you know, in general, then, you know, why they are cool and important, and how they can be applied to web development. And, you know, kind of the result is worse. So, we will see, what are the pros of this approach and why we are super excited about what we are doing with? So, yeah, to cut everything short, you know, we can just dive into it. So, let’s start with the first question.

Matija Sosic 6:15
So first question, you know, before everything is, you know, what is a DSL, when we started working on Wasp, we opened, you know, we call it hey, this is a DSL for web development, you know, it’s a new language we are working on, but you know, it’s not like a general language, it’s a DSL. So as I think, you know, a fair amount of people, they know what the DSL is, but again, it’s not a common word, you know, like, I know, like JSON or like HTML that everybody who is, you know, in the world of web or development is aware of, so it’s not that common term is expected. And we’re actually getting a lot of questions. You know, I don’t know what the DSL is, why is this helpful? No, how do we even you know, people are just generally kinda, you know, asking, you know, how does a new language fit into into web development. So I think it’s super useful to see, you know, what the DSL is and how it is used the, in all the different domains. So, I think it’s very interesting that you are probably using DSLs every day, even if you weren’t familiar with the term.

Matija Sosic 7:12
So for example, some of the super familiar DSLs ar eHTML, you know, so use HTML for writing your layout in websites, web pages. Then another example, very mainstream is a SQL. So SQL is a DSL and I mean, before we go on, you know, DSL is a domain specific language. So it means it’s a language. But again, it’s not a general programming languages, like C++ or Java, or Python, or JavaScript, which means no, it’s Turing complete, you can do whatever you want with it, you know, you can kind of cover any domain, from databases to, like, police stations, or you know, like any domain, you can cover it with, with Python, of course, but domain specific languages, they’re built for one category one and one purpose only. So it’s typically something you know like, it’s very specialized for something which it does very well. But you can’t use it for anything, everything. So as I said, like, you know, one cool example is HTML, which many of us use every day, similar for SQL or, you know, if using any kind of ORM, it’s called the SQL running underneath that. Then again, CSS, very useful, like little language, DSL, that, you know, we all use very, very, very often. An interesting one is a regex. So regular expressions, although it looks weird, it actually works wonders. And, you know, it can help a lot when you’re kind of trying to design some, you know, validation rules. So, how, how should something look like that also a very good example of a DSL. And yeah, finally, I mean, there is Terraform, the one, you know, the newer ones, which is very helpful when you’re dealing with the deployment, infrastructure and similar. So again, you know, it’s, it’s not like a tool to solve everything. But it actually gives you a very concise way to describe your architecture in a declarative way. So you’ll see more about declarative stuff, but I think, you know, very often, although it doesn’t have to be by nature, but very often DSLs are are declarative, which means they’re kind of super easy to write, super easy to understand. And that’s one of the main benefits, we know why they even exist.

Matija Sosic 9:14
So let’s dive a bit deeper into that. So why why would anyone you know, make a DSL and you can just use JavaScript or Python or C++, so why why do you bother? So here are a couple of main benefits of a DSL. So as I mentioned, since they’re highly specialized, and they cover one specific domain, like SQL or HTML, you’re actually the authors of that language, they can tailor the whole experience the code, they can tailor it only to that specific need. So you know, like, HTML doesn’t have any boilerplate really, you know, it’s only like you have a span span the the devido there is no like extra paranthesis or, and calling functions in JavaScript so similar, is super clean. It’s super clean, you can easily read it, and you know exactly what it does. And you know, in the end, you know, the fun I know the final result of there is less code. know, if you’re just kind of chaining functions in JavaScript, you know, designing, you’re designing your kind of layout tree, you know, which actually kinda is, if you’re using JSX in React, then you know, if you strip down the JSX magics, magic, you will actually do just that, you will, you will call functions in JavaScript, which will build your layout three, so there’s not as nice. So this is also why you know, JSX was emitted in the end, but you still get that feeling of off again, the DSL that you’re that you’re using. So that’s one thing, you know, it is just super tailor super focused. And the end result is, you know, just let’s go easier to read easier to write. On the other hand, what is very interesting with yourself, you know, they, they are pretty much agnostic, they’re much closer to the domain itself, than to, you know, the implementation kind of the workings that are, you know, happening under the hood of that language. So, for example, SQL is a pretty good example, you know, it hasn’t changed that much in the last 30, or even 50 years, you know, like, it has the same structure reads very similarly, of course, there are changes, but you know, much less compared to the maybe some languages, you know, like the move from PHP, Java, PHP, to JavaScript, and new versions, like, you know, you have huge changes here. But you know, on the other on the other hand, you know, SQL is always here, it’s kind of always the same. So this is the main benefit of the DSLs, you know, the more they are kind of tied to the main they’re solving, and they’re not addressing particular implementation details, they will actually stay the same, because you know, the domain changes much slower than the implementation, you know, you have your tables, you have the way you want to get get your data out of the tables. And as long as that’s true, you know, your language is going to stay the same. If not concerned, like, you know, do you use signals? Or do you use hooks? Or do you use something else for that. So that’s one of the big, big benefits, you know, it can be agnostic both to the architecture, infrastructure, implementation language in, which you’re using underneath.

Matija Sosic 12:01
So that’s kind of one of the big, big things. And I mean, this is the last one is actually declared declarative, you know, what I mentioned, like, a very often, domain specific languages are very declarative, which means, you know, they, they even don’t care, maybe for loops, or even variables, you know, it just kinda specification, it reads like, you’re just, you know, like specifying configuration of your infrastructure, or, you know, your calls to database are similar. So that’s kind of something that you’re going to see a bit more later about. But you know, just the fact is, you know, the more language is declarative, and the more similar, you know, to just kind of explaining how something works, and you know, what, rather than how, then it’s going to be easier for, you know, this new generation of solutions, like GPT, you know, because it’s just much less code, and it’s much easier to digest. So, you know, we were, we were testing out Wasp and make this kind of discovery, with GPT. And, you know, even the GPT was not training the Wasp itself, you know, just because Wasp language is so simple, and, you know, so easy to read, almost like English. In fact, it was, it was like a really good result, you could produce more, you know, just more code and needed, let’s call this an input. So you’ll see a bit more about that later. But it’s something that, you know, I thought was just interesting to highlight.

Matija Sosic 13:18
Okay, so now we have seen why these DSLs are a good idea. You know, we can also I think it’s a fair question to see why they might not be a good idea. Because they, you know, there’s always two sides to every coin. So I just wanted to cover that as well. So I mean, one of you know, a big fact here is, you know, you’re developing a new language is sort of, you know, maybe it’s not the new C++ or new JavaScript. But still, it’s a new language, you know, maybe it’s now.tf, or like TerraForm, or dot Vosper, or similar. So that’s a new thing, you know, it means you need a new tooling for it. So there is kind of much more work to get it started off the ground for developers of that language, then, you know, if you if they were just doing kind of library calls to injustice or something similar. So I think that’s one thing to consider. And the main question is easy, you know, is the domain that you are applying that language to? Is it worth it? Is there enough about it that you actually need and I want to address with that language? So and, you know, in the end, I would say if yes, if you know, it can reach a domain, you can address all the problems get to read, get rid of a lot of boilerplate, then you know, it’s worth it’s worth it. And maybe some developers who are developing the language they will have to introduce, you know, they will just have to invest more work into getting all the tooling and everything, you know, just just working, you know, with editors, although it’s becoming easier and easier with introductions of stuff like LSP. And VS code has, like very nice plugin system is similar, but still, it’s more of a considered, you know, than just using existing language. So, but again, I would say that something that every DSL developer has to wait and see, but that’s kind of the the main the main question when deciding should you do a DSL or not?

Matija Sosic 15:01
Okay, awesome. And yeah, I mean, now with that, I would like to go on the use case of Wasp, which is something that, you know, we are building. And you know, kind of explain. I mean, this already gave some motivation, but I would just like to explain, you know, kind of what motivated us to do it, what’s happening right now. And you know why we believe that DSL approach is helpful in the domain of web development? Okay, so let’s get right into it. So first, first of all, you know, why even decided to work on Waspinator new language or for developing full stack web apps. Also, you know, just just to mention that. So my So Mike, my co founder is my, my, my twin brother, actually, Martin. And we are both variables, developers for last 16 years. So I mean, we never considered ourselves to be the developers, like, specifically, you know, we were just kind of the general developers, we were to be, you know, on University, we were doing some machine learning, even like a lot of bioinformatics algorithms are similar. And this is kind of our main interest to kind of do some of these kinds of more, maybe maybe low level stuff. But you know, funnily enough, for every project that we worked on on the side, or a startup, or you’re just helping somebody out, we always naturally had to build out the application. Because you know, that that was mostly the main way of delivering your solution to the end user. So we actually got a lot of exposure to web development. So just remembering now, we started with PHP on the back end, and you’re using that in some framework, like x j. S on the front end, then the kind of progress to jQuery, the Java on the back end, then backbone, then Martin used to work in Palantir, and Google as an intern, so he kind of discovered Angular there. So that was, you know, at the advent of SPA, so we switched to Angular, and node and finally, kind of our stack was react and Node js. So that’s kind of, you know, what we have been using for the last couple of years. So I mean, I just said, all that just to show, you know, that we have gone through a lot of technologies and a lot of stacks, you know, from PERN, MEAN, MERN, and, you know, whatever, LEMP even right, so our main motivation for for Wasp was that we were missing, you know, it actually is, it was kind of hard to move from stack to stack, and, you know, it was happening very fast. So, we will build our project with Angular, for example, you know, we just learned Angular, we know how to use it, we got some best practices, but then, you know, next thing, you know, now React is the hot thing. So you have to leave everything and you know, the client, they don’t want to use Angular anymore, they, you know, they want to use React, because that’s the reason the sexy thing now. So, you know, like, oftentimes, we have to drop what we know, and just go and learn the new latest tech. And, you know, it’s felt like we spent more time on just relearning how to do the same thing.

Matija Sosic 17:44
Now, even just that, you know, because it’s always kind of similar for, you know, this type of, you know, typical sales applications, now, you have your, or you have your resources, you know, there’s some interaction database, you can stay to just floating around. So, you know, we just felt that every time we needed to build a new application from start a new project to be, we were battling a lot of complexity, you know, we had to learn like Redux, then React Query, then then something, so it always felt like, you know, it looks outside the same from the outside, but we always have to figure out the latest technology on how to actually make this happen. So our main motivation was, then you know, like, you know, we see that stuff is changing a lot, and so quickly, and, you know, we told ourselves, like, look, I mean, we feel like this, you know, like, this domain is actually mature enough, that, you know, we can we can see the, the patterns in all kinds of these, you know, sets like applications, there are some common patterns. And we wonder, is it possible to capture these in a more abstract way. So, we don’t ever have to deal with implementing Auth again or implementing kind of this CRUD API, which we have to do every time. So those are the questions we had. And this was the problem, the pain we felt ourselves and wanting to solve. So this is just like a little bit alteration. You know, when we when, when I was kind of trying to discover if other people also feel that pain, it was just enough, you know, to type “why is web dev” in Google, and you will get to know boring, hard, complicated, it’s kinda, you know, like, all developers are fed up with the complexity. So that’s our main motivation for Wasp.

Matija Sosic 19:18
So yeah, I mean, as I mentioned, like, you know, the goals were to write much less boilerplate. You know, as I mentioned, there’s a lot of these kinds of CRUD work that you have to do for every project, you know, like the API sharing state on the front end, the back end, notification and all the typical data resource management, that’s one thing, or the other thing, you know, this is just kind of relearning all the best practices for every new stack. So, I mean, for example, when we started using React, it was popular, of course, it was used, but still, you know, all the best practices haven’t been figured out yet. So even the community wasn’t yet set on what is the best way to do state management or what is the best way to do quantification or something. So, you know, we were spending a lot of time, you know, just, you know, asking questions on StackOverflow forums Googling around, just to discover there actually is no best practice defined yet. So that’s another thing, you know, like, we just want to. So I mean, any framework is opinionated, you know, but we want to be opinionated in a way and you know, say, hey, like, we discovered we do, we did the discovery for you. And, you know, this is the best way to solve x. And, you know, they give you the best practices for all the common things you might think in your application. And that works out of the box. But something that we want for us for ourselves. And, you know, this is also what we wanted to embed in Wasp. And finally, I think the main thing for us was, we did not want to just throw, no throw React and everything else or you know, interaction, say, Hey, we are building a new language, forget everything you knew, now you’re going to do everything it was, because I knew, you know, just wasn’t possible. And you know, React is great at what it does, Node is great at what it does. So our goal was never to replace any of the existing languages. And frameworks, rather, we just wanted to kind of work together with them and you know, take care of the hard parts, the boring parts, and still have developers use their favorite technologies.

Matija Sosic 21:09
So that was, that was our intention from the day from the day zero, you know, we don’t want to reinvent everything, the real from the start, we just want to give you an easy layer to get the best practices out of the box. And you can still write your code in your favorite thing, which is right now react and Node.js. Okay, awesome. So let’s let’s move on. Yeah, state to state as a wasp right now. So we are in beta. We have been in beta since December 2022. And the because a couple of 1000 projects created so far, hundreds, hundreds of unique deployments. And I will also share some examples of applications to production. And also, we just recently had the first startup, which has actually made it worse when even acquired this guy that you know, a big milestone for hospital, actually somebody up startup and somebody acquired it, and they keep working on it the super exciting to see. So I will say though, we are in beta, it’s quite stable. People use it for all kinds of projects, like no MVP is a side projects, SaaS, you know, just difficult SaaS solutions. So you know, I would say don’t use it for some super heavy production yet. But you are free to use it, you know, for your kind of, or personal or kind of, let’s say side project, or you know, even even just to kind of your own business stuff, we are adding more features every day. And we also share a little bit more about that going forward. Awesome. And yeah, just a couple of examples of you know, what kind of application you can build it was. So for example, GPT was very popular lately. So you know, so we had our templates for building your assess, with GPT integration. So here’s here’s one application, which is pretty popular, you know, you just type in your job title company, and upload your CV and, you know, it generates your cover letter for you within GPT. Another one that was like, you know, a bit more enterprise SaaS-y. So it was Asana for lawyers, as the author named it. So pretty much, you know, you can just imagine, like a workflow manager, for for lawyer, lawyer lawyers, you know, we use it in their kind of workflows. So that was pretty cool to see, you know, implemented details, like, you know, a lot of moving parts from calendar, assigning people, file, file, upload to all the stuff that you could imagine, in kinda, let’s say, rich SaaS is actually used here. Also, like another GPT example, you know, helps you find your data helps you apply to the college, find the college grant, and similar. So we have a bunch of these GPT powered solutions lately. But yeah, pretty much, you know, I would say for any, any kind of, you know, SaaS application, so something which is not, you know, pure content like presentational side, so, you know, just maybe your blog, it’s probably, you know, something that, you know, you want to log in, you have some database back resources, and, you know, it’s it can be either like a marketplace, SaaS, so whatever, whatever you can imagine, in terms of this, you know, typical business applications.

Matija Sosic 24:00
Awesome, shortly about the team. So this is going to the team, there is five of us, as I said, like the project was started by me and my twin brother Martin. And then he also got joined by, you know, a couple of great engineers who are, you know, developing a lot of cool features with us every day. shortly about the company, we were started about two years ago with an open source project, and then we were entered by Combinator and got funding with them, and also, you know, go to go to seed round afterwards. So there’s basically you know, what they were giving us what, what is giving us funds to keep working on the horse until we reach 1.0 and start introducing, you know, enterprise features and similar which can be monetized. And yeah, like, we are a small team still, but we have a bunch of contributors. It’s everything is open source. So no, just super exciting to work on this project every day. And yeah, I mean, the, the whole team has experienced this from both small companies and bigger companies like you can see here. So you know, it was just like a very good match of you know, different profiles and Good, just feeds their their knowledge and experiences into into making your boss. Awesome. So now that I have given you an intro, let’s actually have you know a bit of a deep dive in how was work saying, you know how we can help you with the develop development some

Matija Sosic 25:21
Okay, so very shortly what is happening in Wasp, the first step is that you get to describe your high level features. So if your application that in our language was a DSL, and those high level features are, you know, stuff, which is typical, typical for any application, so authentification, routing, you describe your data models, then your queries, actions, you can have as many jobs and now even sending emails WebSockets. So all the typical concepts that you could imagine in the context of a application was probably supported. And if not yet, you know, we will do support in the future. And right now, as I said, Wasp works with React, Node.js, and Prisma. So this is what to use for client, back end, server and database. So you get to write your code in that. And finally, you know, what’s happening under the hood, everything is compiled to pure React and Node.js application. I think we also have a diagram, which should be just showing it here, you will see it later. But yeah, so there is no magic in the end, you know, like when you deploy your application, you just get like a pure React Node.js application. So it can work on any deployment platform. And the performance is, you know, it’s not affected by Wasp in any way. Because the Wasp is just, you know, a compiler, which from your specification, and you know, your Wasp declarations creates the final React and Node.js application. Awesome. So just to show you a bit of, you know, how it looks like, you know, when you use it. So, as I mentioned, you know, wasp is a language, but it’s a very simple one. So you can imagine it, let’s say, like, a bit nicer and smarter. JSON, you know, we just want to say that Wasp is a configuration language, which, you know, in fact, it is. So yeah, I mean, once you happens, you know, you start with saying, you know, I can my app to do app I have is going to have some title. And then for example, you get to define authentication block, you know, just if you want to hear full stack code out of the box. So you can say, hey, I want to Google, I want to have a GitHub username, password, email. And you know, just by defining those couple of things, you get everything sorted out for you both on the back end, front end, even get the like, already ready components for you to plug in, which will be recorded, we are going to see later. So you know, so we just try to make your life as easy as possible with this. And similarly, you just have routing, you can define your pages. And you know, this is interesting. So for example, this is how you plug in into your React code. So you say, Look, I have my page, and you know, like the root component of this page is going to be this component from React. And then basically, you know, you just go to React file and just type your React logic there. So that is the kind of connection you know, you can see, we have the same for front end, and you know, for defining communities and actions or mutations on the back end, so we will see that a bit later. Let’s assume this is now the kind of framework I mean, the workflow, you know how it looks diagram under the hood.

Matija Sosic 28:07
So what’s happening is that you have your Wasp file, which has the basic high level configuration of your web application. And then you have your specific logic, as I mentioned, in JSX, or, you know, TypeScript via TSX what whatever you want to use. So all of that, you know, gets fed into our boss compiler. And what the episode happens under the hood is you get full application in React, Node.js, you can get artifacts for deployment. Of course, you can integrate with Tailwind or anything you know, that you want to use. So you can you can use any NPM package you want. So it’s fully compatible with your kind of typical workflow of web development. So it also works, you know, we have we have our own CLI, which makes things easier. So basically, all you have to do is you know, like, just to run a wasp view, and you immediately create a new project to get everything set up for you. And then you do, you can just run the Wasp start, which will immediately do you know, like, start back end start front end. So it’s only one command to get even even database, even database, we have a kind of command to get that training. So we we take care of all the typical stuff that you will have to do manually if you’re doing you know, typical myrn or birth deck. So CLI is kind of, you know, helpful, it gets you running and kind of covers all the everything you need during development is database migrations, deployment anything. So, as I mentioned, we are using Prisma. I mean, under the hood, I mean, even in front of the hood. So you get you get access to all of the goodies and Prisma. So you can you can just anytime you can run Prisma studio, which was the the studio command and you just get the insight into your local database, how it works, how it looks like you can edit it, so anything that you could do with it, which is you know, quite quite handy when you’re doing kind of debugging, and seeing how things work. So we have been adding a lot of features, especially since beta. So I just kind of wanted to highlight a couple of interesting ones. We’ll do over here because many, many more actually just now. So yeah, I mean, Wasp fully supports TypeScript. This was one of the most sought after features. Since we were in alpha and the beta, we introduced TypeScript. We also have an add support for Tailwind. So you even have like templates, which which get set up for you. Now we also support running cron jobs, or async jobs. It’s a more general term, the Postgres solution, or PG Wasp. And yeah, we have been doing a lot of work on our WAsp language server. So this is the part that was mentioned, you know, when you have your own DSL, you actually have to provide some tooling, you know, to have all the auto completion syntax highlighting. So we have been putting more and more work into this lately, and I think we have come quite far. You can also check it out and see it later in action. And, yeah, that’s it. And yeah, right now, you know, just right now. So what we do every quarter is we do launch week, you, you might have seen kind of this trend, you know, with other dev two companies, and you also adopted it. So every quarter, you know, we’re going to kind of stop release what we have, and do a launch launch week event around it, you know, just highlighting every, every new feature every day. And it’s kind of like a fun event to like, we always write a lot about what do you have to get done talk a lot, right? lots of examples. There’s always some say, Give of a hackathon in the end. So write out the launch week is happening, you know, is just now but you just started yesterday. So I just invite you to join, you know, follow us on what’s playing on Twitter. And you’ll get all the latest updates, seeing what’s new, how you can use it in your, you know, new applications, just get the idea of the features, which are being shipped right now, we have a bunch of swag waiting for you. So there is always opportunity to win some. So that’s also like, extra motivation, the Follow us on the wasplang.

Matija Sosic 31:53
Awesome. And just shortly, before we go into specific example, again, I show you the code, you know, the goals of was playing, you know, short term meter long term. So I mean, lately, kind of, you know, with beta, we are in a pretty, I think we could be covered, let’s say the basics of a framework, so something that you would expect in other frameworks, now, most likely you have it in Wasp. So once we sorted this out with data, we can start with, you know, polishing, let’s say, the whole developer experience, you know, so we are introducing more UI helpers, you know, for example, you will see, like, you get go, you get generating components for authentification. We have templates, you know, you can use to start with weekly, do you want to use GPT template, do you want to use like embeddings, do you know, just typical SaaS, we are trying to provide more and more starter templates for you to get started faster. I mean, midterm, like, we know, what’s going to be happening next, which actually we are doing right now is, you know, like, extending the DSL, the language. So the I mean, the true power of Wasp is, you know, because of the things that DSL understands. So for example, you know, just now we added support for WebSockets, in DSL, in the Wasp. So, you know, it’s actually, again, requires much less code and much less boilerplate to get started. So, you know, we want to put as much stuff in post as possible, you know, and, you know, being valuable in DSL. So that’s something that we are going to be focused on. Especially, I think, especially around data models, because this is one interesting part. And the Wasp is already doing a lot in around reducing this duplication, or, you know, bidding war between the front end back end duplicating state and data models. So we are doing a lot of here, a lot of job for you already here. Nobody we have like our own typesafe RPC. So you don’t have to actually type in all the endpoints and do the do all the API calls. But there is much more we could do, you know, with some validations, you know, with some kinda, you know, we can have, like, some secondary data models that you can use around. So there’s lots of exciting stuff to do here. So that’s something that we’re going to be looking into probably soon. And yeah, I mean, long term, as I mentioned, one of the main benefits of you know, DSLs, like SQL are similar is that they are not married to a specific state or architecture. So this is also something that we are very excited about was, you know, being a solution, which can stand the test of time, you know, it’s so you know, in 10 years, maybe there is going to be like Preact or, you know, whatever is going to be the new framework. But you know, we hope the Wasp part is going to stay the same, you will still have authentication, you will still have your data models, you will still run cron jobs so that’s something you know we want to make was work kinda with all the major both front end and back end frameworks you know, you would even maybe run Python for example on the backend that’s something we have been started exploring so far, but you know, in the in the kind of longer term future and we plan to support let’s say all the major solutions out there like you know, view on the front end for example, and similar so stay tuned for for those updates. We hear many people asking for review. So right now it just to react but you know, it’s actually it’s not it’s not impossible at all to add support for for you. And yes, as I was mentioning some of the latest features, you know, from the from the latest launches, For example, right now, when you define your auth, so you know, I want to work with Google and GitHub and for example, email, vos will automatically generate the very nice for for you, you can just embed it into your react. And that’s it. You know, you can also customize it, of course, with your logo or with your colors and similar. So that’s something I can be using a lot when developing world applications. And we can receive feedback that people like this can be one of the best features to get started on the ground.

Matija Sosic 35:27
And I think one cool part they wanted to highlight to show that kind of auth part in action is that, you know, let’s say your component, your components for dedication is getting, you know, it’s it’s regenerated every time you change it, you know, so for example, let’s say you had only Google though, right? Now, we can only Google as a method. So all you have to do is no just a one line, just say, hey, now, I also want to have GitHub as the dedication method, and what’s going to happen is your you know, basically, your application is going to be updated in the same second, because the post is going to regenerate the code for you, it’s going to see, now you have GitHub that you want to use. So if you’ll update all your components with detail button. So I mean, this is one of the main benefits. So why would you want to use a DSL, because it did, it has that kind of understanding, it sees the changes you’re doing, and it has control over the full state of your application. And it can change stuff instantly for you. So I think, you know, this is not really possible with any other framework out there. And you know, this is going to be kind of the direction in which we are going to be going kinda just to show the value of this. So you know, it’s not scaffolding, it is not just the code that gets spit out, and then you have to maintain it yourself. It is actually just one component, you plug it in, and it gets regenerated live, as you update your code, we will also see it in action, or some and yeah, just to kinda call to call to action, before we go into the code. We are now you know, in our launch week free, and it’s going on, it’s very exciting. So you know, we have a lot of swag to give out. So you know, the best way to show us support is to go to go to GitHub and star our repository on GitHub. That’s kinda you know, the best way in open source route to show your support to kind of show other developers, you care about the product. And you know, you just want to support the team. So you know, if you like the product, if you want to support this, please do that. And the first five people who start us starting starting now, so I’m keeping track of who started so far, they will get some meals this vague of their choice, you can either get a t shirt of this, or the school beanie if you prefer, or your T shirt like mine. So when you start on GitHub, just take a screenshot of kinda, you know, your, your username, on our kind of Stargazer page, and tweet it at wasplang and I’ll see it. So the first five, I’m going to DM for details to get your spec sake of choice. Awesome. I think that was everything I held for the presentation. Now we can dive into the code a bit.

Matija Sosic 38:03
I prepared one application specifically today for showing you how it works. Okay, so let’s actually go first see the application? Yeah. So I called it reflect daily. So just the other day, I saw one, like in a popular, you know, Twitter thread, like seeing how this one kind of guy, you know, he’s, he’s everyday for like, six, last six years, he was, you know, he was kind of filling out his diary, you know, and he was asking, you know, what they did? Well, what they did, right, he was doing a little bit of reflection everyday on what he was doing. With consuming this a bit. Also, it’s going to be more visible. So I like to do a lot. And there were some timeframes around we’re doing the same, but I thought it’d be cool to implement the boss, you know, can have your own reflection application. So that’s what we’re talking about. So as I mentioned, like, you know, the first thing is actually, you know, we have our login screen. And you know, I can show it the code right away to you. Okay, so now we are going into wasp. So I will just give you a short rundown of the code. So this is how the code looks like. I mean, we can even hide those hidden files. So everything you have here is your main dot wasp file, which has this high level information. So we can see here, which was version is being used, we have the title, which shows up in a tab, and similar and for dedication, right now I’m using username and password. So this is the simplest method. You know, it doesn’t it doesn’t require any email or similar. So this is why I chose it. But you know, we could we could easily add other methods as well. Cool. If something fails, you know, just go back to login page login route. Or on the client, we can, you know, we can kind of define the route component. And this is the way to define your NPM dependencies. So whatever you want to use from NPM you can and okay, we don’t have to go through everything right now. I just want to actually show you the auth section. So once you once you can define this old section and you said look, I want to give my users Name and Password method, what’s going to happen is that wasp is go, this went away, coming back. So what’s going to happen is that wasp is going to generate a component for you that you can reuse, by the way. So when we go into the actual panel, external code, like your source code, so we have client code, we have server code, Node js react, and we have a shared folder for anything that you want to share. So let’s go into client. So I have my signup page here and login page. So when we go into for example, login page, all we have all you need to do to actually use this get this nice form you have been seeing right here. So if you want to get this form, all you have to do is import this login form from you know, was bought forms login. And that’s it, you get the form, I use chakra UI here. So this is like a my CSS or like styling framework I was using. So I centered it a bit, but all you have to do is you know, just use the form right here. And you know, you can easily change appearance, for example, you know, if you’d like styling options, so I just, you know, I change the brand color, button text and similar. So that’s pretty handy. And yeah, this is the same signup page like you know, you can sign up proponent you just blogging theme stylee, then that’s it. So that’s it. Let’s now try to get in. I already have an account. So it’s going to work.

Brian Rinaldi 41:26
to see if I remember my password or not. I do nice. So now we have our reflection application. So this is super simple. It’s almost like a To Do app, but you know, like, repurpose the beat for, for for the for these of these purposes. So what’s happening, we have our reflection and every day, you know, at the end of the day, I can go and say okay, let’s see how my day went. And I can choose like, you know, it was minus two minus one or so there is no zero that’s kind of the you know, the trick like you It either has to be like plus one or minus one, like you have to choose what is the good day or bad day and then use that for reflection. So let’s say you know, my day was two. And you know, my vino today was definitely presenting divorce

Matija Sosic 42:14
What could have gone better? I know. Might have, I’m a bit tired. So yeah, I should have slept. Slept. Cool. Okay, good. Now we submitted and it works as expected, you know, we can see our, we can see our new answer here. So that’s it, we can of course, you know, logout you also get like logout kinda function to use from both. But now let’s, let’s look at how this works in code a bit. So again, if we go back to our code, so what’s what’s happening again, you know, kind of, you always start from the high level stuff, you know, which is defining your behavior in the last file. So let’s say, you know, if you want to add the new, new reflection, so you know, we have this, you have our Prisma data model. So this is what I was mentioning, we are using Prisma. Right here. So you know, this is why we have this PSL special tags, which means, you know, the code in between here is going to be Prisma schema language. And this is actually just like the data model in Prisma. So, you know, we define our reflection, we have de rating biggest wins, like, you know, bad thing that happened. And again, like, every every reflection is owned by some user, who has username, password and his own reflections. So that’s cool. And now actually, now we want to create a new reflection. So I said, Okay, I’m going to have an action. So action is like mutation, you know, it’s like, you hear of queries and actions query is something that, you know, reads from the database gives you information. And reflection, like action is something that is, you know, going to change some state, or, you know, like, I don’t launch rockets, like anything, it’s going to, it’s going to kind of be like, you know, changing state of the world. So that, that’s why we are calling it action. So by default, every every action is by default, you know, like, auto, like auto, they get authenticated. So you cannot run it, if you are not telling it user, but I just explicitly, you know, made it here. So you can see the feature, if you want to have like route or you know, like action, which is public, you can just put force here, and it’s going to be accessible to everybody without logging in. So what’s happening here, you know, like, right here, like we are importing our function from node, which is going to be doing the work. And finally, this is actually the cool part. So we are saying, you know, hey, you know, this, this action is going to affect the reflection entity, which means, you know, this reflected this actually is going to change something, you know, with this with this data data model. And that’s interesting, because when you have a query, which says, Hey, I’m reading from reflections, so this is query and this in this case means you know, it’s reading from reflections. It means that once you run this action, and for example, create a new reflection wall automatically knows that this query is going to be invalidated. Like, you know, like you want to you want to display it on the screen, for example, it and you know, the it knows that this query depends on reflection, so it now knows it needs to invalidate the cache. So there’s, you know, that’s why we can immediately when we add a new reflection, I say, hey, all annual reflection, okay, I should have a restart in the fields here. Like, why is going to appear here without any extra work done by us, you know, typically, if you’re using Redux for something, you know, you will have all this kinda boilerplate that you will have to, you know, kind of vibe to, to get this to get this all working. But it was, you know, there is no extra work for you. Because, you know, like, we have this concept baked into the language. So let’s take a look, I have my action. And I have this function in Node, which is doing the work. So if I go to server, because this is a server side function, so source server, and I go to my actions, I mean, we can we can do it have any structure we want, you know, in those in those folders, I just use this for convenience, right. So we have our reflection, okay, cool, we have create reflection. And I mean, right now, here, I’m using TypeScript. So everything is typed. So you know, you have kind of full type safety from across the stack. If you use, you know, TRPC are similar, we actually have our own type safe RPC. And it works in the in the same way. So you know, once you have your data model, reflection or entity, you get it accessible as a type, right here. And also here in once you have a query, or action, you also get it here to import in your TypeScript code. So we can say, okay, cool, I hear my reflection, you know, it has this kind of this type. And here we are doing typical Prisma. You’re just invoking, like, prisma, or M library, but you know, kind of rapidly wrapped into our context. So we’re just saying, Hey, if you know, if this is not authorized, person, you know, they won’t be able to do this. And on the other hand, you can just kind of run Hey, create new new reflection with day because we embed moment and user who is created. So that it’s super simple, I mean, you will probably write something very similar, if you were, you know, doing stuff without words, but it’s very, you know, you get the extra superpowers on top.

Matija Sosic 47:17
The same goes for queries, you know, when you are reading from the database, again, you get everything typed out, or this is get reflections, there is no input, and you know, you get out the list the array of reflections, again, if no user throw error, and then again, you know, calling prismas Qaeda or RAM, you know, get give me give me every, all the stuff from reflections where user is the user that, you know, you came came here came here. And that’s it, you know, then also, once you specify that wasp is automatically going to generate for you, you know, based on this kinda action and clear declaration, you will get immediately functions that you can use on the front end on the client. So that’s the cool part. You know, there is no any API or endpoint definition. You don’t have to do like your own graphQL server or anything. So it’s kind of, you know, RPC, like once you define this function, or sorry, this declaration, and define your server function that we’re going to generate the client function you can use right away again, it’s an extra superpowers. So for example, if we go to our main page right here, you know, so what’s it what’s happening? Okay, I have some auxiliary stuff here, but yeah, on the main page, first thing, you know, you get to call us query. So wasp is using use query under the hood, for kinda for the oldest data activity fetching data. So it is very similar, it is the same interface, we are just making things a bit simpler, you know, we can here handling the keys for you and similar. So yeah, you all you have to call, you just have to import your so I have a bunch of stuff from chakra here. But you just have to import your your query. So I can might get reflections from was curious, get reflections, you know, these just the way you have to type it out. And once you call it in this reactive fashion, you know, it’s going to be fetched, you hear it in your reflections, and then basically, you know, you can just render it. Right here, I have my reflection list, you know, go to reflections, and kind of do the whole the whole thing right? For each one. So that’s it, you get the all the reactivity out of the box. And you know, thanks to this kinda thing I showed you with the cache invalidation. Whenever you change something, a new reflection is automatically reflected reflected on the on the screen, very similar for action. So we have our action, create a new reflection. And again, how we use it. I think we can handle submission right here in our form. So again, all we have to do this time is you know, just call this async operation, provide all the arguments and it’s going to create a new new and can the new raw reflection on the back end. And that’s it. I was no Using kinda some components for styling to make it look nice. But no, it was quite fast to get to get it done. I think maybe one more cool thing that I can show I think we have a bit more of time is sort of let’s say, you know, I just want to run now, let me just go with my terminal right here so you can see it and zoom 18.

Matija Sosic 50:26
Bigger. So all I have to do is, you know, run away sorry, here around the wasp db studio. And it’s going to run the Prisma studio for us. It’s right here. And yeah, I mean, you can even go back so you know, we can see we can see the one user right here. Matija. And if you check out reflections, you know, we hear a bunch of them. Bum Bum Bum Bum bum. I mean also the cool thing is, I mean this is going to user and you know wasp is automatically when you’re doing deification wasp is automatically hashing password for you. So, I mean, this is what this is what I mentioned, you know, in your like your framework providing the best practices for you. So you don’t have to care about the hashing, you know, pick up pick out the kind of most mainstream algorithm way of doing it applying salt and similar. So you know that that’s the benefit of an opinionated web framework. Awesome. And yeah, I think that’s mostly it for what I wanted to show. Let me just check my presentation to finalize things. Thank you, please join our launch week. Number three, follow us on Twitter. And you know, like, the biggest thing for us is, you know, a few stars on GitHub, where we can give you some swag, and that’s going to help us Latino in supporting us supporting our open source project. And yeah, thank you.

Brian Rinaldi 51:51
Thanks. So that was awesome. I will admit, I haven’t had the chance to check out Wasp before, but I was I was, I was really impressed. Actually. No, it’s funny. This couple presentations ago, we had somebody from a framework called streamline that in some ways, and remind me a little bit of like the I mean, they were gearing specifically towards a Python stack. Whereas this is more like a, you know, a JavaScript stack at the moment. But similar in terms of like, just kind of defining what it is you want your need rendered and, you know, in, in a DSL and like, you get it and I think there’s, you know, there’s so many pieces to web development, that’s repetitive, and it’s like, okay, I always have to do this piece.

Matija Sosic 52:43
There’s definitely a trend, I think, you know, towards kind of this unification of stake and simplification.

Brian Rinaldi 52:50
Yeah, yeah, absolutely. So, so I had a couple questions. But if anybody in the audience has questions, just post them in the chat, and I will get around to them. So, so, first of all, I noticed you said right now it doesn’t, it doesn’t specify any UI. It’s only like back end pieces and client side in the client side script that that kind of goes with that. Right, like, so all of the UI aspects like you, you build yourself at the moment, right, other than say, the, the login form? Is there any other like kind of pieces that it will generate for you like that? Yeah, exactly,

Matija Sosic 53:31
exactly. I mean, so I mean, wasp is a full stack framework. So it covers, you know, both client and server and your you can write your React code. But yeah, we started with you having to write everything by yourself, you know, which is kind of typical for any framework. And now we are slowly starting to add more and more premium components for you. So for example, you know, like, we started with a visa application, which was a really common problem to solve. So I think, you know, one of the next things that we’re going to look into is kinda to provide, you know, as much of these kinds of crud UI as possible for your data models, you know, when you have your task, or you have your reflection, you know, we could actually kind of generate, you know, like all the table view, you create view update you like all the typical stuff that you would usually do manually, that something that Wasp could easily generate, and, you know, keep regenerating as you update your data models.

Brian Rinaldi 54:19
Yeah, absolutely. I would say I think, you know, kind of the, the admin side of whatever the site is exactly,

Matija Sosic 54:25
like the admin dashboard. Yeah, exactly. Yeah.

Brian Rinaldi 54:29
Absolutely. Okay. That would, that would be really cool. I mean, you know, it’s just one of those another one of those things that I get developers just, you know, it’s don’t don’t like spending time on those pieces, right. So because, yeah, just simple stuff. And then, okay, so, you know, you use different services, obviously, wherever you deploy, it is going to kind of, there’s costs associated with that, but like, outside of that, I mean, is there any, like, is there any costs associated with with using the free Any work or? Or with anything else currently? I mean, what’s the kind of, obviously your company like? Like, what how is this? What’s the plan for, for Wasp as a as a friendly?

Matija Sosic 55:13
Yeah, exactly. So I mean, right now everything is free everything is open source. So we are fully open source, we intend to stay that way. So I mean, since you’re still in beta naught 1.0, we don’t have any paying products right now. But no, can I, let’s say, you know, I monetization plan is very difficult for any open source companies. So two main ways, you know, will be some kind of hosting deployment solutions. And then on the other side, like possible enterprise features, like more advanced features and similar, so right now we are focusing purely on community getting the product ready, and you know, just getting the feedback loop going and, you know, kind of growing. So there’s the focus, but they’re also aiming for, you know, with good adoption, and kinda like having having the most grown in the community, we will be able to add more stuff, especially, I think, on the deployment and kind of enterprise enterprise video. So

Brian Rinaldi 55:59
yeah, that makes sense. And so So you said currently, it’s it’s react on? Are you thinking like, I’d be able to swap out react for for, you know, various other frameworks, I’ll be able to kind of pick and choose my, my stack a little bit with the, you know, in the

Matija Sosic 56:18
future. Exactly. Exactly. Yeah, this guy, you know, the big vision for Wasp, you know, to be to be the layer, which is not going to lock you into a specific framework, you know, is it view is it react is its Felty, because I think, you know, all of these are great, and, you know, people, people should be able to use them without always reinventing everything that goes in around the budget. So that’s our goal. This is also why we built, you know, was a separate configuration language. So it doesn’t depend on React view or something else. I mean, the behavior I’d be playing around, you know, we’d like running running the backend running Python scripts in the backend. So I think, you know, like there is, there is kind of potential both on the client and server side, or having multiple kinds of targets.

Brian Rinaldi 56:59
Yeah, I mean, this, I think this this idea has been going around a little bit like, your implementation is very different from what I’ve seen before, but like, there was even a blanking on the name of the frame or redwood, Redwood Jas. Exactly, yeah. Similar kind of thing. Like, it’s like, okay, all this these pieces that you have to repeat, that have gotten really complicated, especially with developers having to learn like, Okay, I gotta learn how to how to build the auth with all these different services and how to build you know, interact with the database, you know, yeah, so Exactly. Yeah. Yeah, really, really cool. So, so what what are some of the things like you said, this week, your is your release week or your was TypeScript support? Kind of one of the release features? I mean, is there anything else you can share with us?

Matija Sosic 57:52
Oh, yeah. I mean, there’s, there’s a bunch of stuff, you know, that we have out, I would just say to to quickly, check out the logs, I get your, you know, the most exciting stuff. It’s nice to see, is my screen still being shared? Yep,

Brian Rinaldi 58:03
I can. Okay.

Matija Sosic 58:05
Awesome, awesome. So I can actually just show the show the cool stuff. So types type scripts, we actually released the in beta, but it was, you know, just one of the most sought after features. So this is why I highlighted it, because, first of all JavaScript, everybody wants to TypeScript. And now Now they have it. So this was kind of a huge win for the community. So I mean, right now, I think the one of the big features was, you know, just was here. So we add support for WebSockets. So right now, there is native support for WebSockets invoice, we also added a lot of more crud stuff that you were mentioning. So right now, it’s not about UI, but it’s about generating your logic. You know, for example, when you have your entity for tasks, you know, we can get you like all the typical crud logic functions down for you. It’s still experimental. So not working for all the cases, but that’s something that the saving a lot of time, so we call the COVID. autocrat, you know, because it automatically does the crud for you. So that’s one thing WebSockets okay, just community. And finally on Friday, that’s going to be a big one. It’s going to be vos plus GPT sustained future stay tuned for death. As I was mentioning, like, you know, wasp is naturally a very good target for GPT because it’s short declarative. So it kind of just uses the whole context much more than other your typical code, right? So we can be playing around with it and it works surprisingly well. So we are going to release like an easy way for you to kickstart your application most obligation with VGP

Brian Rinaldi 59:34
Oh, really cool. Okay, so so this is going to be something like, like, just, you know, I just kind of describe what it is. I want Wasp to build me and, and Exactly, exactly, exactly. Order. Nice. Yeah. That’s awesome. That’s really cool. I definitely am interested in checking this out. Because I mean, I’m one of those. Like, who feels like you know, things got complicated when you were describing in the beginning about how, you know how you kind of put it this way. I always felt like like, for instance, with React, it’s like, I know how to do web development. I’ve been doing web development for like, 20 something years, but like, but I don’t always know how to do web development did react way, and feel like I’m constantly having to kind of relearn things myself, just to be like, Okay, this is the way it should be done in React. Another funny thing that struck me, just as a total aside, you know, speaking of being in this industry for a long, long time, and you see, like patterns 20, probably about 20 years ago, a friend and I were talking and he basically had built himself something like this, but we didn’t have like React and all that stuff back then essentially, he had he said, he had a whole, basically a whole DSL, he showed it to me, like he just described out his app, and it would do all this stuff for. So it’s like, you know, everything come comes back around.

Matija Sosic 1:01:02
It’s easy. These No, no, it’s very funny to say, you know, they actually kind of quite often we meet people who are, you know, like, on the side building their own version of us, like, yeah, they say like, no, absolutely no, this so resonates well, with me. I was doing something on the side. It never grew so big. But I actually had a similar idea. And they they show it to us. So no, I think it’s very cool to be a couple of people even join the team on that premise is a similar. So I think is the old idea. It’s not a new idea. But like, it’s the made it into this time. Right.

Brian Rinaldi 1:01:33
Exactly.

Brian Rinaldi 1:01:34
And, you know, in looking back, like 20 years ago, things weren’t that complicated. Right, like, so. I think it wasn’t the need for it wasn’t as dire, right. Like, I think now, this is the kind of thing that developers need, just because of the growing complexity.

Matija Sosic 1:01:52
Exactly. Yeah. Like for ourselves, even like, Ruby on Rails was the golden era of web development. You know, when Ken there was no way to like reach SBA and similar, everything was kind of monolithic. You get everything on the server. No, no state on all the sides. So that that’s kind of the experience you’re trying to recreate with boss right now.

Brian Rinaldi 1:02:12
Yeah, yeah, I remember. I remember when rails came out, it was like, you know, totally revolutionary. Yeah. So you know, granted, when I when I started developing, I literally had one, as an example, I had one screen size we developed for because like everybody had the same size monitor. So yeah, made life easy.