Local-First Software With ElectricSQL

Rate this content
Bookmark

Local-first is a new paradigm for developing apps, where your components talk to a local embedded database and you get instant reactivity, multi-user sync and conflict-free offline support built in. ElectricSQL is a new, open-source, platform for local-first development from the inventors of CRDTs. This talk introduces local-first development and shows how you can develop real-world local-first apps today with React + ElectricSQL.

James Arthur
James Arthur
29 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to LocalFirst Software

Short description:

Hi. My name is James Arthur. I am the CEO and one of the co-founders of Electric SQL. Today I'm going to talk about local first software and how you can build it using Electric React. In traditional software development, the user's request is sent to the server over the network, and the server responds with the result. However, with LocalFirst software, the database is moved into the local application, allowing for instant display of data to the user. This pattern offers zero latency and offline functionality, as well as giving users ownership of their data.

Hi. My name is James Arthur. I am the CEO and one of the co-founders of Electric SQL. And today I'm going to talk about local first software and how you can build it using Electric React.

So just to jump in, so this is a rather simplified diagram of, I guess, old-fashioned software development. So it's showing a cloud first kind of architecture. The user comes along, clicks the button, there's some kind of request gets sent to the server over the network. The server then responds to the result. This could be like a whole page request. It could be Ajax. And then you display the results to the user.

And if you contrast that with LocalFirst software, with LocalFirst, you move the database or store into the local application, the user clicks the button, it goes straight to the local database, and it's instantly displayed to the user, and then data syncs over the network in the background. So that's kind of what we're talking about as a pattern. And just as a quick orientation in terms of code. So this is an example react component that's set up to work in a LocalFirst way. So you have this add function is a callback handler, that's bound to a click event. You call this create method, and it writes directly to a local embedded database, in this case an SQLite database. You can then query that local database directly in the app code, and typically you have like a live or reactive pattern where you're then binding the query results to a react state variable. So that's sort of an orientation to what we're talking about.

2. Benefits of Local-First Pattern

Short description:

Local-first is a pattern that eliminates the reliance on the network for application interactions, providing zero latency and offline functionality. Users have ownership of their data, and applications can function even when the back end is down. This pattern simplifies data synchronization and enables real-time multi-user sync. Modern applications, such as Figma and Linear, are built on this pattern to deliver a superior user experience.

So why is local first a good pattern or a good idea? If you come back to this simple diagram again, with this cloud-first pattern you basically have the network on the interaction path, so your availability and your latency is slightly just at the whim of the user's network connection. It's very important to engineer high reliability, like you need the server online to serve the requests, so you sort of push these like high number of nines, and it's very expensive to do that kind of reliability engineering. If stuff takes a while over the network, the user's sat there waiting on a loading spinner, they're waiting for stuff to load.

As a developer, because you're writing code that moves data back and forth across the network, you have to write a load of stuff to handle network errors and failure scenarios, and also because the data tends to be stored in the cloud, it's sort of ripe for what you have today around models where companies offer products to get user data to then exploit the data and analyze and sell it. Those are a bunch of the challenges with this traditional cloud-first approach.

With local-first, what you get is... Rather, obviously, because you move the local database into the application, you don't have the network on the interaction path, you get zero latency. Applications basically default to working so they work offline even when the network is down, they work even when the back-end is down. You have this first copy of the data inside the local application, so users actually own their data. Because you have this kind of zero latency, as soon as a user does something, it's displayed instantly. You have this kind of like quality of kind of instant reactivity and sort of instant feel to the applications. Because the data syncs in the background over active-active replication, you get this natural real-time multi-user sync. It also in many cases simplifies operating the software because you move the way in which you're moving data back and forward across the network away from a whole set of different APIs and microservices to just a standardized replication protocol. And it means that also the back end just doesn't need to be engineered to such high levels of reliability, because the applications can function even if the back end is down. So that's a sort of introduction to kind of generally kind of why local first, and I think if you look at a lot of kind of modern applications that have been disrupting their sector or kind of building out the sort of best possible user experience, they are now being built on this pattern, right.

So why do you need to kind of platform to build on this pattern? And the answer is that, like if you look at those apps like Figma and linear, like they famously have to spend millions of dollars engineering in order to be able to build applications to that kind of grade or quality of experience. And it's because of this fundamental complexity that you get once you combine the way in which you achieve the sort of instant modern feel with this built in multi-user collaboration. So with this kind of a local first pattern, you get this kind of instant reactivity by doing this local right to a database and then syncing in the background.

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 Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Workshops on related topic

How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
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
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
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
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
Scaling up Your Database With ReadySet
Node Congress 2023Node Congress 2023
33 min
Scaling up Your Database With ReadySet
WorkshopFree
Aspen Smith
Nick Marino
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.