English versionEN

Exploring Modern Databases in React Applications

Traditional databases often hinder React developers' workflow. New approaches, including serverless solutions, are revolutionizing data handling in React apps. This talk explores how modern database paradigms enable end-to-end type safety, create ergonomic workflows, and support rapid iteration. Learn how these next-gen databases integrate with React to simplify development and boost productivity, helping you build more efficient and performant applications.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

Modern database trends include serverless databases, AI-focused databases, branching, multimodal databases, and good type safety with developer experience tools like Prisma and Drizzle.

The development ecosystem has evolved with JavaScript developers writing server code, making React a full-stack framework. This change was facilitated by technologies like Node.js, Next.js with API routes, and serverless databases.

AI in databases allows for deeper searches using vector databases or vector indexes. This enables searching broader terms and is optimized in databases like Pinecone, ChromaDB, and those using PGVector extensions.

Branching allows developers to create a copy of a database schema for each feature branch, facilitating preview deployments and integration with platforms like GitHub and hosting solutions like Vercel.

Multimodal databases, like SurrealDB, allow storing different kinds of data (key-value, document, relational) in one database, offering flexibility in data querying and storage.

Type safety ensures that data types in the database are properly reflected in server or front-end code, reducing errors and facilitating safe data manipulation. Tools like Prisma and Drizzle provide this feature through automatic type inference.

Graph relational databases, like EdgeDB, simplify querying relations by combining SQL and GraphQL concepts, allowing for easier querying of data with complex relationships.

AI enhances vector databases by optimizing them for AI-specific tasks, allowing deeper and more relevant searches on unstructured data. This is achieved through databases strictly focused on AI or regular databases with added AI functionalities.

When selecting a modern database, consider factors like scalability, AI capabilities, type safety, ease of integration, and the specific needs of your project, such as data-intensiveness or real-time requirements.

Serverless databases abstract complex tasks and offer benefits like autoscaling, full maintenance, and built-in security features. Examples include Superbase, Firebase, AWS Aurora, and PlanetScale.

database

Aleksandra Sikora

31 min

25 Oct, 2024

Comments

Video Summary and Transcription

I'm going to be talking about modern databases in the React ecosystem. The development work used to be simple, with front-end and backend developers working separately. However, with the rise of Node.js and full stack frameworks like Next.js, the ecosystem has evolved. Now, front-end developers are often writing back-end code, and databases have become a crucial component. In this talk, we'll explore the modern solutions and their strengths when it comes to databases. We'll discuss the changes in the databases world and how React and other frameworks have made accessing databases easier. Serverless databases simplify the complexity of managing databases, but there are considerations like vendor lock-in and limited customization options. AI databases with vector functionality provide deeper searches on unstructured data. Multimodal databases like SurrealDB allow for different kinds of data in one storage. Tools like Prisma, Drizzle, and EdgeDB provide good type safety and ease of use. EdgeDB is a graph relational database that combines SQL and GraphQL, making querying relations easier. Database selection is not permanent, and it's important to consider user needs and stay informed about modern trends. Early adoption of cutting-edge databases comes with risks, but also full-time support. Using the best tool for the job is crucial, and trying new tricks for specific data is recommended.

Available in Español: Explorando Bases de Datos Modernas en Aplicaciones React

Video transcription and chapters available for users with access.

Available in other languages:

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

TypeScript and the Database: Who Owns the Types?

TypeScript Congress 2022

27 min

TypeScript and the Database: Who Owns the Types?

Top Content

Matteo Collina

Author of Pino & Fastify, Platformatic.dev Co-Founder & CTO

Welcome to a talk on Object-Relational Mapping (ORM) and its potential pitfalls. The speaker discusses issues with modals and the MVC pattern, as well as the benefits of structuring code around system features instead. They introduce PlatformaticDB as a solution for easy backend development, showcasing its deployment and testing capabilities. The talk also covers integrating with Next.js, writing custom SQL queries, and the speaker's plans for future support and database compatibility.

node.js database react orm

Database Access on the Edge with Cloudflare Workers & Prisma

Node Congress 2022

31 min

Database Access on the Edge with Cloudflare Workers & Prisma

Alex Ruheni

Developer Advocate at Prisma

This Talk discusses database access on the edge with CloudFlare workers and the challenges of serverless platforms. It explores solutions for database access, including CloudFlare-specific solutions and using Prisma data proxy. The Prisma toolkit and demo are showcased, demonstrating how to convert an application to use a database. The process of setting up Prisma Data Platform and deploying the application to CloudFlare workers is explained. The Talk concludes with insights on database usage and the differences between serverless, CDN, and the Edge.

node.js database cloudflare prisma

Bring AI-Based Search to Your Web App

JSNation 2023

31 min

Bring AI-Based Search to Your Web App

Sebastian Witalec

Head of Developer Relations at Weaviate

The Talk discusses the use of machine learning in search engines, specifically focusing on semantic search and vector embeddings. It explores the integration of JavaScript and machine learning models, using Weaviate as an open-source vector database. The Talk demonstrates how to connect to Weaviate, query data, and perform machine learning queries. It also highlights the benefits of Weaviate, such as its superior developer experience and performance. Additionally, the Talk addresses customization options, data privacy concerns, and the varying effectiveness of different machine learning models.

database artificial intelligence

Remix Persistence With DynamoDB

Remix Conf Europe 2022

41 min

Remix Persistence With DynamoDB

Brian LeRoux

Architect (arc.codes) Maintainer, Enhance Contributor, an AWS Serverless Hero

DynamoDB is a next-generation key-value database that is low-latency, scalable, and easy to use. It offers advantages such as local development options, a generous free tier, and fast performance. Common misconceptions about DynamoDB being expensive or hard to learn are debunked. The Talk covers topics like basic modeling, separating concerns, working with DynamoDB in Remix, and building a DynamoDB client. Overall, DynamoDB is a powerful database that integrates well with Remix and provides efficient data access patterns.

remix javascript database

Local-First Software With ElectricSQL

React Advanced 2023

29 min

Local-First Software With ElectricSQL

Watch video: Local-First Software With ElectricSQL

James Arthur

ElectricSQL

Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.

case study database builders and founders

Workshops on related topic

How to Solve Real-World Problems with Remix

Remix Conf Europe 2022

195 min

How to Solve Real-World Problems with Remix

Featured Workshop

Michael Carter

- 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

remix validation database error monitoring

Relational Database Modeling for GraphQL

GraphQL Galaxy 2020

106 min

Relational Database Modeling for GraphQL

Top Content

WorkshopFree

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

database graphql

Scaling up Your Database With ReadySet

Node Congress 2023

33 min

Scaling up Your Database With ReadySet

WorkshopFree

2 authors

The database can be one of the hardest parts of a web app to scale. Many projects end up using ad-hoc caching systems that are complex, error-prone, and expensive to build. What if you could drop in a ready-built caching system to enable better throughput and latency with no code changes to your application?
Join developers Aspen Smith and Nick Marino to see how you can change one line of config in your app and use ReadySet to scale up your query performance by orders of magnitude today.

database

Build a Full Stack React Native App with Oracle 23ai

React Summit 2024

37 min

Build a Full Stack React Native App with Oracle 23ai

WorkshopFree

Doug Drechsel

In this workshop, you will set up a local full-stack environment and create a React Native Mobile app that runs against that stack.
Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and run a Walking History React Native mobile app against the stack
Walking History is a React Native application that allows you to walk around New York City (or simulate that in a device emulator) and it tells you about the closest attraction or point of interest.  

database react native fullstack

Building a Realtime App with Remix and Supabase

Remix Conf Europe 2022

156 min

Building a Realtime App with Remix and Supabase

Workshop

Jon Meyers

Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!

remix database authentication

Building a GraphQL-native serverless backend with Fauna

GraphQL Galaxy 2021

143 min

Building a GraphQL-native serverless backend with Fauna

WorkshopFree

2 authors

Welcome to Fauna! This workshop helps GraphQL developers build performant applications with Fauna that scale to any size userbase. You start with the basics, using only the GraphQL playground in the Fauna dashboard, then build a complete full-stack application with Next.js, adding functionality as you go along.

In the first section, Getting started with Fauna, you learn how Fauna automatically creates queries, mutations, and other resources based on your GraphQL schema. You learn how to accomplish common tasks with GraphQL, how to use the Fauna Query Language (FQL) to perform more advanced tasks.

In the second section, Building with Fauna, you learn how Fauna automatically creates queries, mutations, and other resources based on your GraphQL schema. You learn how to accomplish common tasks with GraphQL, how to use the Fauna Query Language (FQL) to perform more advanced tasks.

database graphql serverless backend