What is Local-First?

Sandro Maglione

Sandro Maglione

Web development

An app is made by a client that connects to an API (server) that reads the database. Or at least until you learn about local-first ๐Ÿ‘€

I have been in Berlin last week for localfirstconf.

This is how the game changes ๐Ÿ‘‡


Complexity, complexity everywhere

The client calls an API, and as a consequence:

  • Asynchronous request: loading spinner, Suspense, streaming
  • Error handling: anything can (and will) go wrong
  • Schema validation: you send formatted data and get back any ๐Ÿคท๐Ÿผโ€โ™‚๏ธ
  • Sync frontend/backend types: things like OpenAPI or tRCP at least ๐Ÿคฏ

This is the cost of "calling an API" ๐Ÿ’๐Ÿผโ€โ™‚๏ธ

Well, there is an alternative: what if the data is all local? ๐Ÿค”

This is the main change with local-first:

  • Synchronous: app fast without loading states
  • Everything works perfectly even when offline
  • No need to handle network errors
  • Schema and types all inside the same frontend codebase

The cloud owns you

Second problem: data ownership ๐Ÿ‘€

When all the data lives on a remote database you as a user are helpless:

  • If the services shuts down you lose everything
  • If the service leaks you personal data you will never know and cannot stop it
  • Internet connection required at all times

When sharing a file with a friend, why do I need to send a request to a server on the other side of the world when my friend happens to sit right next to me? ๐Ÿ˜‘

I care a lot about privacy. I want the data to live on my device by default, while using the cloud to sync between all my devices.

That's what local-first is about ๐Ÿค

There is more.

Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 700+ readers.

It's a distributed state problem

How does this all work? ๐Ÿค”

It's all a matter of distributed state, end-to-end encryption, and data ownership ๐Ÿ‘จโ€๐Ÿ’ป

This is the flow:

  • Data edited and stored locally by default
  • A Sync Engine connects with other devices to update the state

Now, this brings with it some challenges:

  • How to connect devices? Centralized cloud, peer to peer, bluetooth?
  • How to resolve conflicts? CRDTs, event sourcing?
  • Who owns the data (write/read rights)?
  • How about authentication and verifying identities?
  • What data should be synced? Only the updated parts? Will this be enough?
  • How data migration works? What if the schema changes between devices?
  • How can companies profit when the app is all on your device (software + data)?

Local-first is available today

If this sound promising I will tell you more: you can use it today! ๐Ÿ”ฅ

The community is exploring many different solutions. Here is some libraries you can use to get started:

It's not one size fits all

This sounds great and all, but just like any other technology this should not be applied to everything.

There are some things that work better when living on the cloud:

  • Large LLM models
  • Cron jobs
  • Sending emails
  • Classified data

Last year I shared my vision for 2024: Effect + XState + Local-first

Great to see how these technologies are flourishing as I expected (hoped) ๐Ÿš€

After attending @localfirstconf and @EffectTS_ Days I am even more certain of this prediction ๐Ÿ”œ This is no trend: Local-first architectures powered by Effect will become more and more common very soon ๐Ÿ‘€ The best moment to get involved is now ๐Ÿ”ฅ

Sandro Maglione
Sandro Maglione
@SandroMaglione

Effect + XState + Local First are going to change how you write #typescript code. If you are a web developer you must definitely be aware of these 3 new way of programming that are going to become the standard in Typescript in 2024. @EffectTS_ is a library that exploits theโ€ฆ

21
Reply

See you next ๐Ÿ‘‹

Start here.

Every week I build a new open source project, with a new language or library, and teach you how I did it, what I learned, and how you can do the same. Join me and other 700+ readers.