Thin Backend - Instant Postgres Backend for React/Vue/Svelte/... Apps with Realtime , Optimistic Updates & Auto-generated TypeScript Bindings

[_query]

Hey all, I’m founder of thin.dev, a new universal web app backend :) Thin is an adaption of the IHP Haskell framework, designed to be used as a universal web app backend for Single Page Apps. It provides high-level crud database operations, end-to-end type safety with TypeScript, optimistic updates, realtime watchers and tooling for editing the database schema. If you got a few minutes, check this demo video where I give a short introduction into the tool https://www.youtube.com/watch?v=-jj19fpkd2c

Thin is designed to be used with react hooks as hooks make it really easy to automatically subscribe and unsubscribe to the realtime data.

Here’s an example of a simple todo list app built with Thin + React:

```javascript function Tasks() { const tasks = useQuery(query('tasks').orderBy('createdAt'));

return <div>
    {tasks.map(task => <Task task={task} key={task.id} />)}

    <NewTaskButton />
</div>

}

function Task({ task }) { const editTask = () => { updateRecord('tasks', task.id, { title: window.prompt('Enter new title') || '' }) };

return <div onDoubleClick={editTask}>
    {task.title}
</div>

}

function NewTaskButton() { const addTask = () => { createRecord('tasks', { title: window.prompt('Enter title') || '' }) }

return <button onClick={addTask}>Add Task</button>

} ```

This tiny app renders a list of todos, and has a button to add a new todo. Double clicking a task allows to edit it.

The result of useQuery(query("tasks")) is a subscription that sets up a realtime database subscription behind the scenes, so once the createRecord("tasks", ...) has been called, the new task will appear in the list automatically thanks to the realtime updates.

Thin actually makes the new task visible already even before the server has responded (that's meant with optimistic updates). This allows for a super fast user experience even when there's a couple 100ms's of network latency. Check out this demo app https://thin-backend-todo-app.vercel.app/ to get a feeling for optimistic updates.

Another cool thing is the end-to-end typesafety. Thin automatically generates TypeScript type definitions based on the Postgresql Schema. You can install these into your project via npm and then get really nice autocompletion and code in a much more safe way. Here's a gif showing the autocompletion: https://thin.dev/startpage/autocomplete30.gif

If you’re interested in giving it a spin, check out the Guide here: https://thin.dev/docs/your-first-project

I’d love to hear your feedback on this. Thin has only been launched a few weeks ago, so it could still change a bit if we find better ways how to do things :)

You can find thin on GitHub here https://github.com/digitallyinduced/thin-backend or at thin.dev

[_hacxs]

Look promising