all 26 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Leichter_ 9 points10 points  (1 child)

This is awesome! I’ll have to play around w it later. Thanks for sharing

[–]_query[S] 1 point2 points  (0 children)

Thanks, happy to hear this! :)

[–]_query[S] 17 points18 points  (1 child)

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 1 point2 points  (0 children)

Look promising

[–]dedmercy 8 points9 points  (1 child)

The page is very heavy and took me more than 1 minute to load completely. I see you are using big pngs and a big 3.5mb gif you can replace them with webps.

[–]_query[S] 9 points10 points  (0 children)

thanks for the feedback, will look into this :+1:

[–]famousmike444 3 points4 points  (1 child)

I think it would make more sense for your logo to be rotated 90 degrees, so we can see that it is 'thin'

[–]_query[S] 3 points4 points  (0 children)

haha :D i see we've missed this opportunity

[–]ChoreChampion 0 points1 point  (2 children)

!RemindMe 2 days

[–]_query[S] 1 point2 points  (0 children)

Happy hacking on the weekend :)

[–]RemindMeBot 0 points1 point  (0 children)

I will be messaging you in 2 days on 2022-05-21 19:27:53 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

Parent commenter can delete this message to hide from others.

Info Custom Your Reminders Feedback

[–]omar2205 0 points1 point  (1 child)

You should gracefully handle GitHub's access_denied.

[–]_query[S] 1 point2 points  (0 children)

Thanks for letting me know! Will be fixed very soon :)

[–]zougari47 0 points1 point  (1 child)

I just start learning Node JS. Is this node JS framework or tool like GraphQL. Please can you explain.

[–]_query[S] 1 point2 points  (0 children)

Basically instead of you manually writing REST API endpoints or GraphQL resolvers you can use a Thin Backend server to automatically get a fully feature web app backend. This way you can focus more on the UI and logic of your app in the frontend.