[Music] okay we now come to our last talk for today we have mattia who will be talking about wasp dsl for building web apps with prisma react and node.js so in case you're not familiar mattia holds a masters in computer science from the university of jagrebe in croatia where he's also joining us today from and he's an experienced software engineer with experience in various areas from writing bioinformatics algorithms for gpus to web development and compilers and currently matia is working together with his twin brother so as we mentioned in the beginning three of our speakers today tim alex and matthias they all have twins they're all twins so matia is working with his twin brother martin on wasp and they are y combinator backed and they have the goal of streamlining web app development so without any further delay i bring you matia hey how's it going hey hey hello do you hear me is everything okay yep we can hear you everything is working smoothly okay awesome awesome i thank you daniel very much for the introduction very kind of you you're like said majority of my presentation just give me let me just share the screen did i get the pronunciation of your surname right ah almost almost like it's similar to sausage so close enough uh your u.s people are always having a good laugh with our surname so yeah sharing a screen okay screen number [Music] okay cool some inception and yeah you can see it now i guess yeah all right let's move you to this side okay cool all right the stage is yours yeah and i will just go full screen okay awesome everybody thank you for coming so this is our first time actually presenting boston public so i am excited and yeah let's see how it goes so wasp is a simple language for building web apps 10 times faster and yeah it works with 3x no js and prisma so as daniel kindly said already like he gave a good perspective on our background but i will also give a bit more so the team is currently my brother martin and me we are twin brothers and we are both computer science masters here from zagreb in croatia and during university we were working like in different companies had our internships from google to valentine to new york we were also associates in text stars helped the companies in their batch and we were also both in singapore working on ml algorithms and i was working on gpu algorithms for bioinformatics so it was pretty exciting so we were kind of always more on the deep tech side but kind of whatever we kept doing we always uh actually ended up developing web apps because you know it's always like inevitable part of whatever product so we also had like a lot of experience with building web apps so and i also forgot to mention like we are an open source project so we also have some contributors so it's about like us plus about five to six contributors who are also helping with the code and it helps a lot so why wasp so as i mentioned like the main reason is actually we had a lot of experience with going to various technologies and it's coming like we also had like a lot of frustrations so we started with kinda building our first web application with php and jquery then also on the front end went through angular backbone and now ended up with react and also on the back-end side we use different stuff from php java python and now most likely we have used node so we always kind of felt you know that we were always building somewhat similar products like for the web applications you always have to build a notification routing pages like all that kind of similar stuff and it was pretty like repeating itself but we also always had to relearn the new technology every time we were starting a new project so we felt like that is a lot of work for something which is kind of always similar from the from the outside so this was the main motivation of it wasp and basically we have a we like setters set for ourselves the goal that we want to want to accomplish with wasp and that is we want to make it possible to write less boilerplate code we also want to ensure the best practices and enforce them as much as possible out of the box because like we also found it pretty hard to find the best ways to connect different pieces of stack some sometimes they're even rnt the best practice is defined so there's a lot of work just to figure out what actually is like the good and solid approach for the future and the last part is actually we want to separate as much as possible the specification of the web application this is what i mentioned before what are the requirements like what what we actually want the application to do from the actual implementation so how does how does it do it is it in react or angular what are the details of the implementation so also a bit more about the current status so we released alpha version in the last like this december and now we have more than 100 projects created with wasp and we also have first deployed apps and yeah we have also been backed by y combinator so we have some initial funding which gives us opportunity to work on this full time so we are super excited to see what we get what we can do and yeah we are right now in the batch it lasts for about few more weeks so yeah it's all exciting so also to give it to give you a bit more visual uh timeline on what was going on with wasp so like we started about a year ago and if you can see like this pretty horizontal slope was like the whole part of us working on the prototype like figuring out the features working with other developers like seeing what they want what they need and then basically around december we released wasp alpha and this is when we actually started getting some some serious serious erection and people trying it out using it for their side projects using it on hackathons and then this last part last spike was actually our hackers launch which was also pretty successful and people like were super super positive and gave us a lot of good feedback so very grateful for that awesome so now i can actually talk a bit more about how it works so let's see like just the super basic uh information so i said like it's a programming language but actually it's a dsl so domain specific language it's not like a full touring complete programming language and we don't intend it ever to be so the main idea is for you to describe high-level features in our voice dsl and that is as it said here like on notification routing data models queries actions or mutations they are often called and then so it and then you also write your specific logic like view components in react and then node.js for your queries and database actions and we are now also using prisma for modeling uh data data modeling and all this at the end compiles right now to regular react and node.js application but also the cool thing is actually we can like we have control in what is actually being compiled so we could like also in the future support other technologies and like other architectures so this is also something which is uh interesting potential to give you a bit more of a visual overview how it works so this is actually what i spoke about before oh you can see my mouse that's great so here are those files that there can actually be multiple boss files very soon so here you can define those high-level features which i mentioned before and then actually react files and node files they serve for writing specific logic so and this wasp logic actually is like a glue between the view component your components and your database queries and mutations and what happens like in the in the under the hood is basically our boss compiler takes all of this in and spits out the full co application code in react and node.js so we cover both front-end the back-end and deployment right now we don't have aws deployment but we are like supporting images that can be deployed on heroku or some other similar similar service yeah we're using prisma ford database and i mean the whole idea is that you don't have to touch this generated code ideally you you would never touch it but in the case especially now in this alpha stage if wasp is not flexible enough you can actually take it away and just continue with it it's actually like we put a lot of effort to make it humor readable so people are actually often surprised how readable it is so for now it's it's pretty simple to take it out and continue if in case boss is not yet mature enough for your for your use case cool and yeah this is what what i said so just to give you a bit a little bit of feeling of how how the code works so this is this is definitely the sample of the wasp code so as i said like it's a dsl and in fact it's like a simple configuration language it's similar to json at some point just maybe a bit nicer at the moment so for example you could define like some basic properties of your application this is the example of routing defined here and this is actually like this highlighted green line you can see how you can reference your outside code from in this case from react components and then we also offer authentication support so we have like several methods you can choose which one you want like which data model is going to serve as a principal or a user but we are going to see this all more in the action soon and yeah prisma as i said like is a very good fit for wasp because it's also declarative and the wasp is aiming to be very declarative so we are pretty much now using prisma directly for data modeling so here we just like have our own keyword for entity which prisma is calling the model but like all this inside this parenthesis is actually just psl prisma schema language and then we are using that directly to just forward to prisma to take care of the database so this is super handy and yeah we are happy that prisma is doing all this heavy lifting for for us awesome we have actually quite quickly come to come to the demo so in this demo i will show you so we are going to build a simple to-do application and i will show two use cases now depends on how much time we are going to have but it might be even be enough i'm going to show how we can do the identification in wasp and the second part is going to be more about standard code so we are going to create some tasks and then list them okay cool cool let me now just exit this yep i'll just move this to the left and i i believe you can see my terminal right now okay great so we will just start with creating a new project so actually just to show you first how to matia can you make your font a bit bigger so that the audience can see yes sure let me just see how it is done preferences i guess preferences appearance i think command plus if you're yeah you're on a mac command please should do that command i actually that's a good idea oh awesome wow you're a hacker cool let me just try to my t-max got a bit great okay actually i just have to do it like this okay cool so the first thing we have to do i will just show you how to actually install those so you would just go on our website and copy this curl and if you if you don't believe the curl you can also build it uh yourself so all you have to do is place it in your terminal so in my case uh it's not going to install it because i already have it installed so it's like giving me a warning but in your case everything is just going to work work smoothly cool so we have done this and now similar to like other tools we can just write wasp and we get all the commands to get started so we are going to do most new let's call it let me just check that status okay we are good let's call it to do and now was created for us the the new new project so all we have to do is enter this project so let's see what is in there so here we can see as i said like this main boss file and we already have like scaffolded several files for for us to get started more more more faster so all we have to do is run wasp start and now it's like it's going to take about like 30 seconds because it's doing it for the first time so please bear with me so i mean what is it doing now in the background actually it's running you know npm installed for the first time for both server and the front-end server so this is why it takes a bit but it's going to be much faster once this is done cool i'm doing the meal i prepare you can move this i'm going to prepare my visual studio great yeah so we are there for now directly piping all the output from web application server and backend server here probably going to make it a bit more verbose in non-alpha but for now you get all the information cool so we can also maybe should i also let's see enlarge my code here okay cool so we can see here the main wasp file and let's also share this one now let me try to make it bigger okay let me listen let me know if you want it even bigger and yeah i think in the meanwhile our app was served cool so now we can just go to localhost 3000 and yes we can see it here so here is actually like just starting the page welcome welcome page of the application and you can we can just take it from here so i would now just go back to oops oops sorry for this let's go back to the code and yeah as i said like let's add authentication to the wasp so this is how we are going to do it so we are going to just there is a special command as i show you uh showed you earlier so now we just copy it over here so i don't have to type it okay so basically this block defines how is authentication going to work so it says okay it's going to work like we need to have like an entity called user which is going to serve as a user or principal entity and we are going to support email and password that's a method and in case somebody tries to authenticate and it fails it's going to redirect him to login route which we also don't have yet so we are going to have to make it so let's start actually with creating our user entity or a data model basically so we'll just put it here now as you probably know from using prisma we have to do database migration so i just have this other terminal for that here and the left side is currently crashing because it's complete complaining because we haven't done yet uh the migration but this is going to be fixed soon ah sorry i just so let's do this migration nice so you can probably notice we are still using the older version of christmas so we still have like migrate save and that stuff but we are now actually switching to the newest version so this is soon going to be only only my great death cool so we have we did the migration and then the next part let's go back to the code we also have to add the login and sign up routes so let's just quickly do that let's put it right here so here you can see we have like route for the login which is referencing the login page component and very similar for the sign up referencing signup page component so let's recreate those pages let's go to the login page and let's just copy it over okay so what are we doing here we have a simple functional component which is just putting a login form here and a message in case you are not yet if you don't have an account yet but the cool thing thing is actually here so once you're using uh you defined in wasp you're using authentication uh post is automatically for you providing this form and you can you can import it in this special way when you say add wasp you get access to this vost namespace and the stuff that was already prepared for you so this is actually like comes out of the box and then it's going to be very similar for the signup page just come to it so yeah here it is page let me just if i mess something up no it's good okay great so now we have those two pages so let's see what else is missing and we also have to add yeah i think that is that's pretty much it [Applause] okay great let's see what okay everything seems okay and now let's see how it works okay great it's still the same but now if we go to sign up route yeah we actually have the form which you can use immediately so i'm just going to create an account okay let's sign up oh you're not signed up but we cannot still we cannot see it yet so let's add some more logic so we can actually see who is who is logged in and for data we also have one cool feature so i mean we are building it to the app so let's say we want to hear it protected it's only visible to the users who are logged in and in this main page we are going to have like that all the functionality so what we can do now we can say that that there is alt required to access this page and if you are not authenticated then you cannot access it so and we will also add actually here the sign out functionality so we can try it out okay so this is also a method provided by wasp so we can just import it let's add sign out component nice and we can just here let's see above the logo okay cool so we should now show that we are signed in and give us a way to sign out oh we are missing something which i forgot and this is basically once you've said that authentication is required for a certain page then you immediately get access to the user in this in the box of the page we actually have to use that and so now it works and you can see we are logged in we can log out and in case so i'm now logged out and in case i go now to the home page i will just get redirected back to the login page so this all required thing is working so let's now let's login back and the next thing i wanted to show you is basically how to create tasks and list tasks so let's let's do this now so the next thing we need to do so we are going to have tasks so we need to create a data model for tasks obviously so let's do this to make it simpler we are going to make tasks global so it's not going to be per user but let's say like all the users are editing one global pool of tasks just to make it simpler for now so we need to do another data migration right here mr a and great yeah we have another migration you can also see like all the migrations are actually here in the folder and they get committed as usual to the versioning and now let's continue so now we actually come to the another part of the as i mentioned like crude functionality so we are going to need a way to create a new task so in vos this is done with so-called actions which is like also you also often call mutations but so it's the same thing in this case so we are going to create our own create task action which is going to be responsible for creating new tasks and also like by saying uh this actually defines like which entities is this action creating so this comes helpful for automatic refreshing and cache invalidation later so we'll see how it works cool so let's quickly create an actions file it doesn't have to be actions like it can be any file you want so and now we can just do like a simple function which is doing cool so what are we doing here uh we have a function which takes arguments which which is pretty much provided by you so any argument for like a description of the task is it done or not and context is provided by wasp and so pretty much context contains like all the information you need to work in the actions and queries for example like you get next to the user and you can check if user is signed in or not so you can protect the route and also on the other hand you get access to prisma so this context actually is just a wrapper around prisma so you can call database action to create a new new piece of data okay great we created this so let's see what else do we need now we need to add a way on the front end to do it so let's see that now let's say the simple form let's just put it right here so as you can see this is just like a simple form we are using state here to track the state of the input input field and this is basically just like description and button to submit great so let's also just put it right here okay let's say it's going to be [Applause] and we also have to use just here your states and that's another thing now we also get to import so this kind of similar this like you know and not not having to do api wasp is also doing this magic for you so basically we get this one once we have created this action task we immediately get from internet page support actions we get the words action created task which we can import and immediately use on the front end you can see it's being it's being used here in the submit function of the form and yeah we're just giving description in there and that's going to the database okay great i think that's pretty much it so let's see if it works okay all seems to be compiling uh cool now we can actually create tasks so let's say hello so we cannot see it yet but i can quickly show you actually how it works in the studio which is basically prisma studio which also comes in very nicely for for this need so yeah you can see actually here like we have we have one user which is which is me and we have free tasks which are the ones that we just we just created okay cool yeah so that's it so i think we are pretty short on time so i will not go through the actual creation of like displaying the task but it's pretty similar like you just get to create a query i can just quickly show it here maybe so we will we would also get to creating queries right here and create a query get tasks and then here is the cool thing we actually say hey so this this query is like it depends on these tasks you know task entities so whenever this creates task like it affects an entity it knows it needs to be refreshed and uh to get the latest data and this file so we are using here on the right side we are using use query to ensure this real reactivity in the component in the image we just have like a queries uh file we may where we made a query which is just doing the getting of the tasks and also we can protect it so it's only for authenticated users so yes and i will just go back to the presentation right now let's see here so this was it we be able to do it i showed you odd and i showed you quickly so how to create and list tasks and just to finalize like we have like a lot of stuff in the roadmap and like a lot of things that you would love to do but that kind of still division so for now we are only on javascript but we plan to soon very soon add support for typescript more identification methods that we know also ssr is really important and we also think it makes a lot of sense to add support for serverless because like this would be a really good fit so you could decide like actually what you want and also some teams layouts prototyping features to get you started faster and like crazy crazy vision is actually like support other stacks because like we could do it because we are building this layer of language which can generate the code in different in different languages also it would be cool to be able to mix like your so you know you wouldn't go to you know like js file and then reference it in your boss file you could just directly write it in your pos files like one other cool thing with maybe like a visual editor on top so we could like make some things uh people could directly from browser or somewhere just edit specific parts of the app and yeah like probably what is much needed is like monitoring management performance monitoring this is also what comes like this whole whole stack that's it so how you can get involved you can try wasp out and give us feedback it's super appreciated we have this community about 200 people so it's really good to get your feedback there you can also build your site projects and whatever you have in mind people are using it now for hackathons don't do not use it like for super commercial stuff yet it's in alpha but like people are building stuff with it and like whatever you build and deploy we are going to give you a t-shirt and at the end yeah if you like the product you can just start us on a repository to give a support and join our discord community so yeah that's it thank you very much and we'll be happy to get any questions thank you so much for that that was really cool to see in action i had heard about uh wasp but now we're seeing it in action um and yeah let's uh open up our the q a so if you have any questions feel free to use the chat um something that came to mind uh when you were demoing was the fact that you're defining the uh the database schema essentially using prisma schema but within your wasp uh file i was curious how does that sort of interplay with prisma uh in terms of say syntax highlighting and things like that do you have any thoughts on that exactly exactly i mean as you could see like we actually have a since highlighting in visual studio code my brother had like a lot of fun with making it work it was actually easier than expected but yeah for prisma it wasn't so easy to get it out of the box because obviously we are wrapping some stuff around it so i think it's not working completely yet it's like half working but i think it could even be done because like this prisma is declarative and has like pretty simple rules i think he could just replicate so we don't get it out of the box but we could replicate it for sure and when you create entities that you can then interact with uh via crud operations in the front end do you have the ability to control which fields you can actually modify from the front end like for example in the user entity you know you probably want to hide the password field or you know even in the task entity you might want to have some fields that you're not actually rendering or even sending back to the client how is that kind of a logic defined exactly no good question i mean right now even with the authentication method like when you say like this is going to be email and password we immediately know that you have actually you have to have a password field and wasp is immediately taking care not to send it back to the front end so this is now like pretty rigid in this way but we also plan to add like more roles and access control lists functionalities especially to backend as well so you will be able to say like this field is protected this field should never go to the front end like so all this makes sense and yeah we plan to edit that all right gotcha cool well we have no questions coming in so i'd like to thank you again um and uh you the wasp website can be found at wasp.lang.dev is that the correct url
oh yes yes that's it okay cool so i'll drop that in the chat and uh yeah once again thank you matia thank you for having me all right you
2021-03-21