How Remix and Prisma Make Frontend Devs Fullstack

Rate this content
Bookmark

Remix gives developers the power to write their frontend and backend code in one unified location and language, which drops the fullstack barrier significantly for frontend devs and newer developers. The remaining piece, however, is the database. Throw Prisma into the mix and you've got a powerful fullstack experience with a very low learning curve. In this talk, we'll take a look at the amazing developer experience you get when you combine the two.

22 min
18 Nov, 2022

AI Generated Video Summary

Remix and Prisma enable front-end developers to become full-stack developers by working across different parts of the stack without diving into complexities. They provide a great framework for writing code and interacting with databases, making it easier to be a full-stack developer. Prisma's ORM allows mapping database models to JavaScript or JSON models. Developing a full stack app with Remix requires structuring components and loaders differently, but simplifies development by focusing on one place.

1. Introduction to Remix and Prisma

Short description:

Welcome to RemixConf! Today, I'll be talking about how Remix and Prisma enable front-end developers to become full-stack developers. These technologies allow you to work across different parts of the stack without diving into all the complexities of the database and API layers. Let me introduce myself. I'm Saban Adams, a developer advocate at Prisma. Feel free to reach out to me on Twitter @SabanTheDev if you have any questions or want to discuss Remix or Prisma.

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 Saban 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 SabanTheDev. 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.

2. The Synergy of Remix and Prisma

Short description:

Remix and Prisma are focused on providing a good developer experience, allowing you to start building your software quickly. In this talk, I'll demonstrate some tricks and show you how to set up a project with Remix and Prisma.

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.

3. Roles and Responsibilities

Short description:

Let's understand the roles and responsibilities of front-end developers, back-end developers, and database developers. Front-end developers focus on user interactions, visuals, and working with APIs. Back-end developers handle business logic, data persistence, security, and data exposure through APIs. Database developers focus on data modeling, schema migration, and performance optimization. Each role has its own niche and requires continuous learning.

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 so we can 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 up business logic. You're focused on building up 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 gonna 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 backend 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' needs. They focus on maybe schema migration, 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.

4. Benefits of Remix and Prisma

Short description:

Remix and Prisma make it easier to be a full-stack developer by providing a great framework for writing code and interacting with databases. Remix blurs the lines between front-end and back-end, allowing you to write code in one place with one language. Prisma offers tools for managing databases, including schema migrations, a modeling language, and a type-safe database client. These technologies work together seamlessly, providing a good set of tools for building applications across the full stack.

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, a front-end developer, a 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 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. 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 is 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 application's 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 backend code, but also because you're using Remix, and your backend and your frontend 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 frontend 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.

5. Setting Up Remix and Prisma

Short description:

Let's jump right into the demo and see what we've got. To start, run npx create-remix at latest to set up your remix application. This gives you a ready-to-run full stack application. Install Prisma with npm i Prisma and initialize it with npx Prisma init, specifying SQLite as the data source provider. This sets up Prisma in your application and creates a schema file for modeling your database tables. Change the URL in the schema file to point to the desired location for the SQLite database file. The application will list users on a page without any data storing or deleting.

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 dash remix dash 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 dot 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 dot 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.

6. Seeding the Database and Applying the Data Model

Short description:

We're going to seed a database with user data and apply the data model using a migration. This generates a SQL file and a Prisma client for querying the database. In the db.ts file, we import the Prisma client constructor and declare a global variable to prevent creating multiple client instances. We can then seed the database by creating a seed.ts file.

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 mpx 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 __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.

7. Importing Prisma Client and Seeding the Database

Short description:

In this part, we import the Prisma client and create a function called main to create some data. We configure the seed script in package.json and install ts-node. Running npx prisma db seed populates the database. We then create a loader function in Remix that returns JSON from the Prisma query, fetching all users.

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 auto-complete 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. Then I'll go ahead and copy this a couple 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. There, 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 cons 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 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.

8. Displaying Data and Conclusion

Short description:

We need to make sure to have this as an async function and return it as JSON. Then, we want to get the data from the backend to the frontend. We use the loader data to get a list of users, and then we build out our list by mapping through the users and displaying their name and nickname. Running npm run dev will start the server and display the data. Setting up a full stack application with Remix and Prisma is simple and provides end-to-end type safety. Thank you for joining me today!

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 frontend. 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 setup our database with a migration, we set up our full stack application with our backend code. And then we also got our frontend code. And as a bonus, we got end to end type safety as well because we are using Prisma and because the frontend 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.

9. Remix and Prisma Series

Short description:

If you want to learn more about using Remix and Prisma together with MongoDB, I have written a series that provides an in-depth overview of building a full application. Check out the link for more details. Thank you for joining me, and enjoy the rest of the conference!

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 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 makes things so easy. I completely agree with that, too. I love that it uses the platform APIs, too. So 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, absolutely. It reminds me back when I did cold fusion development 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 all together.

10. Explanation of Prisma's ORM

Short description:

An ORM is an abstraction over the database that allows you to map your models in the database to JavaScript or JSON models in your application's code. It unifies the database interaction into one language, like JavaScript in Prisma's case.

It's just very nice. Yes, absolutely, and in my introduction I kind of like said, what is an ORM? 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, 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 application's code. And the cool part about it is that it doesn't require you to actually use the underlying database's 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.

11. Prisma Integration and Benefits

Short description:

I have used Prisma before with KpopStack from Netlify, seamlessly writing JavaScript code that worked with both Supabase and Prisma. You can switch databases by flipping a flag in the schema. Prisma offers first-class type safety, generating types based on the actual query. You don't need to know databases well to use Prisma, as you can build queries using JavaScript and use logging to see what's happening under the hood.

Yeah, 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 KpopStack from Netlify, and it uses Supabase 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, SQLite 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, which was just kind of crazy.

Yeah, yeah, 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 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, yeah, there's always going to be, 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 at 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, the type is going to be modeled off of exactly what you got back from the database. So 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 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.

QnA

Prisma's Impact on Backend Developers

Short description:

You can learn how to write queries in the database using ORM and ColdFusion. Traditional backend developers perceive Prisma in Remix positively due to type safety and a smoother developer experience. Prisma does not currently offer a way to handle updates to the model where the type of a column changes. While you can change the database structure with Prisma, manipulating data within columns and tables is currently outside of Prisma's capabilities.

And you can learn 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. Okay. Chris from the audience says, in your experience, how do more traditional backend developers perceive this? Having Prisma in something like Remix, where the lines are much more blurred.

I would say a traditional backend 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 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 for the most part, is smooth sailing, I think.

Awesome. Yeah. That's a great answer. Okay. 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 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.

Okay. So 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 could 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. Okay, perfect. That makes sense.

Developing a Full Stack App with Remix

Short description:

Developing a full stack app with Remix differs from a traditional app with separate front and back ends. In a traditional app, the front end and back end are developed separately and communicate with each other. With Remix, everything is in one location, and each front-end file or route has an associated API route. This requires more consideration for structuring components and loaders. However, it simplifies development by focusing on one place. Remix's routing system treats each route as its own entity, loading its own state and specific data. This requires a different mindset compared to traditional apps.

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 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 a 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.

Right, 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. That was amazing and enjoy the rest of the conference. Awesome. Yeah. Thank you so much. This was very fun. Yeah. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts