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.

This talk has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.

FAQ

The main topic of the talk at RemixConf is how Remix and Prisma enable front-end developers to become full-stack developers by allowing them to work across different parts of the stack without needing to learn the intricate details of the database or API layers.

The speaker at RemixConf is Saban Adams, a developer advocate at Prisma.

You can contact Saban Adams by sending a message to his Twitter handle, @SabanTheDev. He answers his DMs and monitors them closely.

Remix and Prisma aim to provide a good developer experience by allowing developers to quickly start building their products without worrying about initial setup and configuration. They make it easy to work across the full stack.

Front-end developers focus on user interactions, visuals of the website, user experience, and interacting with APIs to display data on the UI.

Back-end developers focus on building business logic, persisting data into the database, ensuring application security, and exposing data through APIs and endpoints.

Database developers focus on data modeling, schema migrations, and optimizing performance through indexing and efficient query writing.

Remix provides a framework that blurs the lines between front-end and back-end development, while Prisma offers tools for easy database interaction and management. Together, they allow developers to work across the full stack using one language and organization pattern.

You can build full-stack applications that are type-safe and easy to set up, allowing for quick development of functional applications with integrated front-end and back-end code.

Prisma offers type-safe database interactions, schema migrations, and a modeling language that makes data modeling easier. It allows developers to interact with the database using JavaScript, reducing the need for specialized database knowledge.

Sabin Adams
Sabin Adams
22 min
18 Nov, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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.

QnA

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.

Workshops on related topic

Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
WorkshopFree
Kent C. Dodds
Kent C. Dodds
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
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
Workshop
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.