How Remix and Prisma Make Frontend Devs Fullstack

Welcome everybody. Thank you so much for joining me here today at RemixConf. I'm super excited to be talking here and I know that the speaker lineup is super cool and there's a lot of cool talks going on and a lot of exciting stuff being said. So I really appreciate you taking the time to stop by and listen to what I have to say about Remix and Prisma. It's super exciting for me to be talking here about this because I use Remix and Prisma on a daily basis. I get to work with these two technologies a lot and I've actually really enjoyed it and I've had a lot of cool findings. So I'm super excited to be able to talk about some of the stuff that I've been learning today. And as the title suggests and as you may have guessed, what I'm really going to be talking about is how Remix and Prisma allow front-end developers to become sort of like full stack developers. They get to be able to work in all different parts of the stack together without having to learn all of the nitty gritty, like really hard details of working in the database layer or the API layer, where you may be used to only working in the front-end layer. Remix and Prisma together allow you to do this easily and it sort of blurs the lines between the different stacks. So that's what this talk is going to be focused on. But before I actually get into some of the nitty gritty of that, let's introduce myself a little bit. I am Sabin Adams. I'm a developer advocate at Prisma. So I get to play with Prisma on a daily basis and I've gotten to work a lot with it using Remix as well. So I've got to play around quite a bit with this stack and I've really enjoyed it and I'm super excited to be sharing what I've found. If you want to shoot me a message or ask me a question about this talk or about anything in general, whether it be Remix or Prisma, feel free to shoot me a message to my Twitter at SabinTheDev. I answer my DMs and I'll be monitoring those very closely so you can expect a response from me as soon as I can get to it. But yeah, let's jump right in. The first thing I've got here is just a very simple statement, Remix loves Prisma. And the statement goes the other way around too, Prisma loves Remix. Our two products are very, very focused on the exact same goal, which is providing a good developer experience. Without that, we would have no mission. Our mission is to allow developers to jump into their product idea and just immediately start developing without any of those rough patches in the beginning where you're trying to get things up and running, set things up, figure out your data model, all of that stuff. Our goal as our individual products, Remix and Prisma, is to make that process very easy for you and allow you to jump in and start building your products, building your software as soon as you can without having to worry about those things. So that's our goals. Remix and Prisma allow you to do this. And when you put those two together, they allow you to do a lot more a lot quicker. And so that's what we're really going to be talking about today. And actually near the end of this talk, I'll actually be jumping into a demo where I'm going to be showing you some of these little tricks and showing you how to set up a project with Remix and Prisma. But before we do that, let's take a step back and actually think about what it means to be a front-end developer, what it means to be a back-end developer, a database developer, and then what a full-stack developer is and where their role comes in and what actually they're responsible for. Just thought we could get some context into what we're dealing with here. So the very first one is a front-end developer. And front-end developers on a very high level are focused on user interactions. They're focused on things like the visuals of your website, the user's experience as they're using your website, and interacting with the APIs that maybe a back-end developer or a full-stack developer has built that sort of allow you to grab data from your database and spit it out onto the UI. And of course, when I'm talking through the different responsibilities of these different types of developers, these are going to be very high level. This isn't an exhaustive list and it's not the same everywhere. So if you're a front-end developer and you're thinking, oh, wow, I do a little bit more than that, maybe I should be paid more. That's something that you could definitely talk to your manager about. But this is just my high-level overview of what these positions are focused on. So this is a front-end developer. Now let's look at a back-end developer. Now, again, on a very high level, back-end developers are focused on building out business logic. They're focused on building out the things that make your application or your piece of software actually do what it's supposed to functionally. It's not so much what the user sees but what happens when the user maybe clicks a button or what happens when a user saves something. That's what happens and that's what you're working on when you're a back-end developer. So you're working on business logic, you're working on persisting data into your database. So within the API or back-end layer, you're going to receive some data and then you're going to need to save that somewhere. So you'll probably save that into a database. You're also focused on and responsible for the security of your application. As data flows in and out of your application, you need to know how to do this securely, how to keep your users' data secure. And then you're also responsible for exposing data. So building out APIs, building out endpoints, building out just infrastructures that allow some sort of consumer to consume your data, to grab data from your resource. So that's a high-level overview of a back-end developer. And then finally we have the database developer. And this may be a database admin, it may be a specific position within your company, but often there is a developer focused on the database. And what these developers do is they focus on modeling the data. So coming up with the data model that fits your business's needs. They focus on maybe schema migrations. So taking your database schema and your data model from point A to point B in a smooth way without breaking anything. And then also performance. And this may come in the form of putting into place indexes, writing queries in a way that's more performant, just to make sure your application is working at the highest speed it can. So that is also a high-level overview of a database developer or DBA's responsibilities. And if you take a look at all of these, that's a lot of stuff to do. You're reporting about a whole bunch of different things. And there's even within the individual sections front-end, back-end, and database developers, there's different niches in those sections that really do take a long time to learn. And honestly, you can never really learn all of it. There's so much to learn. There's so much to do. So many different responsibilities. That's why we've split up these positions into different areas, so that people can focus on individual pieces and do the best they can on those pieces. So we've got this context now of the differences between a full stack developer, front-end developer, back-end developer, and a database developer. And the conclusion we've come to is that that's a lot. There's a lot of stuff to do, a lot of responsibilities to worry about. And what I'm going to be showing you now is how Remix and Prisma actually make this a little bit easier. They allow you to be a full stack developer without having to really worry about all of these individual responsibilities, or at least not directly worry about them. So let's just take a look here at how Remix helps in this. What Remix gives you is a great framework to make the front-end and back-end pieces seamless. As I mentioned before, it sort of blurs the lines of what the front-end and the back-end even is. And it does this using things such as loader and action functions, which are functions within your templating page that actually get bundled separately using this auto-code splitting, which is the next point there, from your front-end code and handle these back-end interactions with your database or with however you're retrieving data. This is essentially your back-end code, but it's written in the same language and in the same place as your front-end code. So in a nutshell, that's how Remix helps you become more of a front-end and back-end developer, a full stack developer, is it allows you to write this code in one place using one language with one organization pattern. And then Prisma helps you by giving you a set of tools to make interacting with and managing your database easy. So where Remix is focused on the writing code for the front-end and the back-end and getting those two pieces together, Prisma is really focused on getting your interactions between your back-end and your database easy and even the management of your database. So it does this by allowing you to easily build out schema migrations. So if you need to take your database from point A to point B, as far as its schema is concerned, Prisma has tools to help you do this easily and lets you know if something's going to go wrong or if you need to make some changes before you can actually apply this database change. It also gives you a modeling language to help make data modeling a lot easier. It gives you a fully type-safe database client to allow you to interact with your data in an easy way within your applications code. And then it also gives you a set of types based on your database model or your database schema. And this is super useful. This point here is very cool because these types are based off of your database and they can be used in your back-end code, but also because you're using Remix and your back-end and your front-end are so intertwined like this, these types can actually be used across your full stack. And this gives you really, really easy access to building a fully type-safe application just because you're using Remix and Prisma. So not only do you get this great developer experience where you're moving from sort of a front-end to a full stack role when you're working with Remix and Prisma, but it also makes it easier to do these things because it gives you these nice set of toolings and nice types to work with across the entire stack to make your life even that much easier. So these two technologies really are really good for each other. They merge together pretty much perfectly. They give you a good set of tooling to build out your applications. And what we're going to do next is we're actually going to build one out. And this application is going to be very simple. It's not going to be the prettiest application, but what I'm wanting to show here is how you can actually use these technologies to work across the full stack and build out a fully functional application really quickly and very easily. So let's go ahead and jump right into the demo and see what we've got. So to start things off, what we're going to need to do is we're going to actually need to start up a Remix application. So that's what we're going to do before we get into the details of what we're actually building here. And to do that, you can just run npx create-remix at latest. And this is enough to set you up with your Remix application. So this already gives you a full stack application that's ready to run. So I'll just go through the defaults here. I'll get just the basics, Remix App Server. I'm going to use TypeScript, and I'll let it install the npm packages right away. And I'm going to cd into my-remix-app. That's the app I just created. And I'll pop it open in my editor. And what we're going to see here is a basic Remix app. If you aren't familiar with Remix and how it has its folders and files organized, feel free to check out the docs. I'm sure a lot of people are talking about it in the various talks today. So definitely check those out. But what we're going to do first is we're going to install Prisma. So we're going to do npm i prisma. And this is just going to install the Prisma CLI tool so that we can get going with Prisma. And now that that's installed, we'll initialize it. So npx prisma init. And I'm going to say we want the data source provider to be SQLite. And this is just saying that we want to set up Prisma in our application and that we want to use SQLite as our database. So what it did is it built out a simple little schema.prisma file. This is where we're going to model out our database tables and the various pieces of our database. And so the first thing that I'm going to do is I'm going to change this URL here to be file dev.db. And this is just pointing to where we want to save our SQLite database file. And once we actually start storing some data and building out our model. And for the database model itself, what this application is going to do is it's simply going to list a list of users onto a page. So it's going to be really simple. We're not going to do any data storing or deleting. We're simply just going to seed a database with some data and spit it out onto a page. So I'm going to do a model and name it user. And this user is going to have an ID that will be a string. And this is the primary key. And then we're going to say that it should default to a CUID. So it's going to give me a random ID every time a new user is created. And then the second thing is just a name. Let's have a name. And then let's also have a nickname here. This will be a string as well. So this right here is our very simple data model. We're going to have one database table called user. And it's going to have these three columns in it. And now that we've done that, this takes care of our data modeling step, which was one of the things you'd have to worry about if you were a database administrator. The next thing that we're going to do is we're going to actually apply this data model to our database using a migration. So we're going to do npx prisma migrate dev. And we'll name this migration init because this is the very first migration that we've applied. And what this does is it creates a SQL file for us with our migration. So this is creating our database table. And then it actually applies it. And then what it did after that is it actually generated Prisma Client for us as well. It says that right here. This is the type safe database client that allows us to actually query our database from our application code. And because it did that, let's go ahead and actually make use of it. So in here, we're going to create a new file. And I'm actually going to do this in the app folder. And it's going to be called db.ts. And in this db.ts file, I'm actually just going to paste in a little snippet, and I'm going to walk through what it's doing. So what we're doing here is we're importing the Prisma Client constructor. So this is going to build our Prisma Client instance for us. I'm also declaring a global variable called underscore underscore Prisma. And the reason I'm doing this is so that when we work in a live reload environment, because we are in development mode when we run this, it's not going to create new Prisma Client instances and exhaust the resources on our database by creating too many connections. It's going to say that it already knows that there's a Prisma, so it's not going to create a new one. So that's what we're doing here. And what we can do next is we can actually seed our database. To do that, I'm going to go into the Prisma folder, create a file named seed.ts. I'll also import Prisma Client here from at Prisma slash client. And then on the next line, I'll create a new constant called Prisma, and it's going to equal a new Prisma Client. Next, we'll add a function here called async function main. And this function is going to simply create some data for us. So we'll await Prisma dot. We see this nice autocomplete. Here we can use the user and we're going to create a user. And to do this, we want to give it some data. So we're going to give a name. I'll do Sabin Adams and nickname. I'll just do Sabin the world. And then I'll go ahead and copy this a couple of times. And let's just do two and three. That way we know that they're different. That's not very creative, but at least it can show that this is going to work. So lastly, we need to call this. And then we can go into package.json. And this is where we're going to configure how to run the seed script. So we'll create a Prisma key here. We'll add a seed to it. And then let's just do ts node Prisma slash seed.ts. And in order to do this, we're going to need to install ts node. So I'll open a terminal and do, let's see, npm i ts node. So we've got that installed. Now we should be able to save this and run the command npx prisma db seed. And this should run our seed script. And now we've got data in our database. At this point, we can actually create a loader function in Remix. So we'll do an export const loader. And that's going to be a function that's going to return some data. And what is going to end up returning is some JSON from Remix run node. And this JSON is going to be the results from our Prisma query. So let's import our Prisma instance from our db file that we created. And we're going to say const users equals await Prisma dot user dot find many. This is going to get every single user that we have. And then we need to make sure to have this be an async function. And then we're going to return that as JSON. The next thing we want to do is we want to actually get this data. So this is the backend code here, but we want to get it to our front end. So we're going to use this loader data by doing const data equals use loader data. And I think this should be actually users. And then what this is going to be, we could set up the type of this and it's going to be the type of our loader function. So this loader function is going to return a list of users and it gets this user type from Prisma. And so now we know that from here, this will actually be, let's do users like this. Yeah. So now we know that we have this users object and that it's going to be a list of users. And the last thing we can do just to actually finish this up and spit this out is we can build out our list. So we're going to do users dot map, and we're going to say, we're going to get a user from each of these. And this is simply going to be an LI. And within this LI tag, we're going to put out the, let's do the name. So we're going to do user dot, and you can see we get nice IntelliSense here because we get those types and we'll do a P tag under that as well with the nickname. And I think this is going to complain at us as long as we don't have a key. So I'll add a key as well. So there we go. If I run this npm run dev, we should see that we get a server running on local host. And if I pull this over here, there we go. We've got our data. So we now have a full stack application and it was really simple to set up. We set up our database with a migration. We set up our full stack application with our backend code. And then we also got our front end code. And as a bonus, we got end to end type safety as well because we are using Prisma and because these, the front end and the backend code is in the same file, it's really easy to set this up. So I want to thank you again for joining me today, and I hope this was useful to you. And I hope it showed you a little bit of how easy it is to set up this full stack application and to work on all different areas of the stack using Remix and Prisma. This was a very high level overview. There's only so much you can fit into 20 minutes, but if you do want to look in a little bit more detail, I have a series that I've written here that goes into using Remix and Prisma together specifically with a MongoDB. And this will go over an in-depth sort of overview of how to build a full application using Remix and Prisma. So if you go to this link here, it should take you to the series I've written. But thank you so much for joining me and I hope you have a great rest of your conference. Bye. Hey, how's it going? Great, great. How are you doing? Good. Thank you so much for that talk. That was really wonderful. First, we want to switch over to Slido and see the results of the question that you asked. So we said, have you used Prisma before? Yes or no. And it looks like 73% of our audience has used Prisma before. That's a big number. That's pretty awesome. Nice. I love to see that. That's awesome. I know. I love to see that too. That's pretty amazing. And then we have a question too that we asked the audience in the beginning and we're also asking every speaker. So what is your favorite Remix feature? Yeah, I feel like it's a very typical feature that uses my favorite, but just the loaders and actions, just the way they're right there next to your code. I love it so much. It just, it makes things so easy. I completely agree with that too. I love that it uses the platform APIs too. So like you kind of get familiar more with working with the web by using Remix and I love the loaders and the actions for that. Yeah, yeah, absolutely. It reminds me back when I did cold fusion development as when I was growing up in my career. And it reminds me of that because all of your code was using web standards and it was like all together. It's just very nice. Yes, absolutely. And in my introduction, I kind of like said, what is an ORM? Like, do we know what an ORM is? And I said an object relational mapper, but I don't know that that really explains it to me. Can you explain it a little better? What Prisma really does? Yeah, yeah. So, so an ORM in a general sense is an abstraction over the database that allows you to basically map your models in your database or your schema to like JavaScript or JSON models in your applications code. And the cool part about it is that it doesn't require you to actually use the underlying databases language because they're typically hard to learn and they differ from database to database. It unifies it into one language like JavaScript in Prisma's case, where you can interact with your database without having to have that specific knowledge. Yeah, that, that makes a little more sense. And that actually brings up something else that I have used Prisma before when it was integrated with the K-pop stack from Netlify and it uses Superbase and Prisma as like an ORM layer to use JavaScript to interact with the database. And then I was going through the jokes tutorial on the remix site and it uses, I believe SQL light as the database. And it was very seamless for me to just write my JavaScript code that went to both databases and it worked and it was the same exact code. Just, just kind of crazy. Yeah. Yeah. We've, we've seen people even at Prisma develop an application with one database and then decide way after the fact, you know what, maybe I want to use a SQL instead of Postgres or something like MySQL and they'll just switch the flag in their schema and it just works. So it's nice for experimenting. Yeah. That is mind boggling too, that it can just flip those. And is there anything that it doesn't work with, I guess? Well, any type of database? Yeah, there's always going to be, there's, there's always going to be some database specific like data types or maybe specific functions that they have within each database that we support through specific attributes in Prisma that may not work when you switch the flag. However, the Prisma VS code extension is going to point that out and not allow you to generate Prisma until you fix those things. Okay. So that kind of answers a little bit of another question I have it like, what problems does Prisma solve, but are there other benefits to Prisma or anything else that like stands out to you as like developer experience or something that is really a good feature and a reason to use Prisma? Yeah, absolutely. I think, I mean, as the website says, and as pretty much any speaker about Prisma will say, the type safety that it offers is like first class. There's a lot of ORMs out there that do offer type safety, but they don't offer it to the degree that we do. Usually the ORMs will have like a class that represents each model in your database. And when you query the database, you get a representation of that class back. However, with Prisma, the types are generated based off of the actual query you run. So, you know, for a fact that the type is going to be modeled off of exactly what you got back from the database. So that, that's a huge help. And until you actually use it in an application, that may be a little bit confusing, but once you actually get this going in a larger application, it's ridiculously helpful. I think that is true. Like type safety is nice to have. And when it's integrated and done for you and done in a really good way, I think that's great. I've had issues with TypeScript before where like your types don't automatically generate. And so if you can have type safety out of the box, and I think that's amazing. So, do I need to know databases well to get into full stack development then to get back to kind of your talk and like what that was about? Yeah, I would say, I would say you don't. I think a good understanding of what a database does and how to interact manually with the underlying database is a good thing. But I think especially when you're just getting started, it's not necessary at all. If you're using something like Prisma, you can build your queries using just the language that you're already learning JavaScript. And then if you want to dig in and see what's going on under the hood, there's logging where you can actually spit out the queries and see what it's doing. So you could tweak those into raw queries if you really need to. So it might almost even help you learn the database language where you could write your language that you already know JavaScript and then spit out those queries and see what it's writing. And you can learn like how to write the query in the database. Yeah, yeah, for sure. I mean, even with my own personal journey, that's how I learned to get into databases was I was using ORM and ColdFusion and I was looking at the logs and tweaking queries. And it just kind of helps you build up that initial knowledge that you need to understand. That's awesome. OK, Chris from the audience says, in your experience, how do more traditional back end developers perceive this? Having Prisma in something like Remix where the lines are much more blurred? I would say a traditional back end developer would definitely welcome this, specifically because of the type safety that we mentioned and not having to have that specific knowledge about each underlying database, but also just because it it allows for your entire project to have a little bit more synergy when you're using the migration tool that Prisma offers when you're using the Prisma client. When you put all these things together, you get a nice developer experience that just for the most part is smooth sailing, I think. Awesome. Yeah, that's a great answer. OK, Vladimir says, does Prisma offer a way to handle updates to the model where a type of a column changes and you have to manipulate that data that was already in the column you're changing? For example, you switch something from a string to a number and you need to decide what to be, what the new values will be. Gotcha, so that would be something similar to like a data migration and we don't like within the Prisma ecosystem, we don't actually support this. There's guides and tutorials on how to get around this, but as we handle more of the schema migration, we aren't supporting that yet. It's on the roadmap. It's something that we've talked about and we're looking into, but at the moment, no, you cannot actually change the data along with your migration. OK, so you you set up, I'm trying to see if I understand this, you set up your schema and you have your data kind of structure and you can't actually change that with Prisma. Is that what you're saying? So you can change the schema, so you can change the database structure, the columns, the tables, but the data within those columns and tables, that's something that's outside of Prisma for now. OK, perfect. That makes sense. All right, let's get back to the questions about the talk. How does developing a full stack app with Remix differ from a traditional app with a separate front and back end? Yeah, so so this is a question that I've gotten a lot and there are huge differences. I think a lot of people who've used Remix will know, but people just coming in, it can be kind of confusing. The difference here is that with the traditional application, you would have your front end and your back end. You would develop those separately and then the two would communicate to each other, which is great. That's what we've done for a long time. But with Remix, it's a different paradigm and sort of a mind shift to where all of that is in one location. And you can think of each file in your or basically each route with your front end also has an API route that goes along with it. So it requires you to sort of think a little bit more about how you're structuring these things when you have parent components with children components and you have maybe loaders in each of those. You have to think about when those loaders are going to be firing off. So it is a little bit of a shift in mindset, but for the most part, it's a little bit simpler because now you're worrying about one place instead. I think that makes a lot of sense because of the way that Remix handles the routing and each route is kind of its own thing. It needs to load its own state. It needs to load the data for that route specifically, and that could be on a page with other things. So you have to kind of think about it a little differently, but yeah, yeah. All right. Well, I don't see any more questions from the audience and it looks like we're just about out of time. So thank you. Thank you so much for joining us and for answering all of these questions. And that was amazing and enjoy the rest of the conference. Awesome. Yeah. Thank you so much. This was very fun. Yeah. Thank you. Nice to have you.