1. 2

Hey there, Founder of digitally induced here. Happy to share what’ve been working on with Thin Backend over the last months. Thin is a version of the IHP Framework, designed to be used by frontend developers. Instead of building APIs with low-level fetch calls, we provide high-level APIs like createRecord('tasks', { title: 'Hello World' }, updateRecord(..) and deleteRecord(..) to update your database. 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 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

To simplify state management (which is typically hard and lot’s of boilerplate), we provide realtime APIs so that all app state is always in sync with the actual database. Previously your react app might have been rendered from the redux state, now it’s rendered directly from the server state.

Thin actually makes the new database records etc. 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.

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

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>
}

The Schema Designer and the migration tools make it really easy to get going with a project.

Internally Thin is built with Haskell and powered by IHP DataSync (https://ihp.digitallyinduced.com/Guide/realtime-spas.html).

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

Happy to hear everyone’s feedback! :)

  1.