DXOS todo list
Basic todo list, but the data is saved locally
- Close the tab
- Re-open - still there!
Works offline
- Turn off internet
- Add some tasks
Syncs across tabs
- Open new tab, add some stuff

Following the local-first principles...

But not "local-only"

Share the space with the iPhone
Connect from iPhone
Add a task on desktop
Add a task on iPhone
Disconnect wifi on iPhone
- Add a task on iPhone
- Rename a task on iPhone
- Lower keyboard
Add two tasks on Desktop
- Check off the task that was completed on iPhone
Reconnect the wifi - wait for sync
Add one more task on Desktop

Apps are interoperable

I'm now pulling up an entirely different application - dxos-kanban.netlify.app
- show "tasks.dxos.org"
- open split view
- type in dxos-kanban.netlify.app
Tasks are now represented as Kanban items
- Remove a few tasks from Tasks
- Create a new Card in Done state in Kanban
- Check off some tasks in Tasks
Notice how Kanban can have more information that's not viewable in Tasks
- Create something in "doing"
- Interoperability creates the opportunity for apps to focus on what they each do best

Users own their data

DevTools - identity is baked into the core of DXOS
Users have a private key associated with them
- Show the Identity in the identity tab
Linked to other devices through public-private key encryption
- Network tab - this is my iPhone - it's still connected
  - No server!
    - p2p connections over WebRTC
- Show Feeds for each device
Show objects in the object browser
- Single data substrate shared across all apps
How it works

Opener demos to grab attention

multiplayer: collaboration on a task list
- invite flows - device join from mobile?
- it's p2p - turn off the network in devtools and demonstrate sync
cross-app interop: Todo to Kanban
- your data is in your own vault
- devtools: browse the objects
another app working on the same data: CLI todo list
- CLI device join flow
- if you want to build CLI tools, we have a TypeScript SDK as well

Apps get quite small.

Auth is largely handled
No API layer
No state management
No backend or server is needed*

Most of what you're left with is "view" code - a bunch of React components with a few queries and mutations of the ECHO database.

*you need a signaling server for WebRTC and a server to initially deliver the app assets (HTML, CSS, JavaScript)

Unfortunately, you still have all of the cruft of deploying an app: tsconfig and bundlers and deployment and such.

What if you could just take the component, the interesting bits?

Another thing we noticed, it would be nice to be able to drag and drop between applications, show them next to each other in different "windows" or areas of the screen, etc.

Browsers are great, but they're missing some affordances.

So we built something we're calling Composer.

Composer is a universal application host where developers can remix any surface on the screen via plugins.

We took the apps and put them all inside one place that's designed from the ground up to be remixable.

Composer is built on top of three core concepts that I'm going to demonstrate to you:

Plugins (for everything)
Surfaces (for everywhere)
Drag-n-drop (between everywhere)

What does Composer look like? Well, you've been looking at it the whole time.

Zoom out to 67%
Open sidebar
Fold "Personal Space"

This presentation was built in what we call a "Stack" - a re-orderable list of objects in the system.

Re-order "Today" and "DXOS is local-first"
Edit "Today" to "Today's Talk"

This stack contains a bunch of markdown documents. I can view them and edit them in the Stack, or as a Slide, or even as a Document using the built-in Markdown Editor.

Open a split view to the right
Open "Today's Talk" as a Document
Append "Composer" to "What we're building next"

These are three different Plugins in Composer:

Stack
Markdown
Presenter

But they all interoperate over the same objects.

Really important thing in Composer is Plugins follow an Inversion of Control pattern.

Stack doesn't actually know anything at all about Markdown documents.
The Markdown plugin tells Stack how to present a doc in a stack.
Nor does Presenter speak Markdown.
Markdown tells Presenter how to render itself in a presentation.

We do this through one of the other key principles of Composer: Surfaces. Literally everything is a Surface that's created by plugins and plugins can "provide" surfaces to other Plugins.

The left sidebar is a surface created by a plugin called Split View
The right section is a surface called "main"

The final core concept is Drag-n-drop

You should be able to drag and drop everything everywhere that makes sense.
Demo 1: dragging from search and from sidebar into a grid
- remember that all of these are just surfaces, b/c inversion of control
Demo 2: dragging sketches, tables,
Demo 3: early experiments with OpenAI
- Early

Local-first Web Dev Talk Track

Interactive graph

On this page

Local-first Web Dev Talk Track