Building realtime ReScript apps with IHP Backend

1

Hey all,

I’m looking for some early testers for our new IHP Backend ReScript Integration :slight_smile: IHP Backend 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, 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 IHP Backend Demo 27.01.2022 - YouTube

I’ve added a ReScript type generator recently, so it can now generate types for ReScript apps based on the database schema. This allows for quickly building react apps with ReScript and IHP Backend :slight_smile:

Here’s an example component of how this looks like:

open Belt.Array

@react.component
let make = (~channelId) => {
    let messages = {
            open IHPBackend.Message
            IHPBackend.useQuery(
                queryMessages
                ->whereChannelId(channelId)
                ->orderByCreatedAt
            )
        }
    let isLoggedIn = IHPBackend.useIsLoggedIn()

    <div>
        <div className="messages">
            {switch messages {
            | Some(messages) => map(messages, message => <Message key={message.id} message/>)->React.array
            | None => <div/>
            }}
        </div>

        {switch isLoggedIn {
        | Some(true) => <NewMessageForm channelId/>
        | Some(false) => <NewMessageFormIfLoggedOut/>
        | None => <div/>
        }}
    </div>
}

This component renders the chat messages for a given channelId. The queryMessages function is provided by IHP Backend. It’s then consumed by useQuery which sets up a database subscription behind the scences.

If you’re interested in giving it a spin, check out the Guide here: ReScript with IHP Backend - IHP Backend

To see some example code of how the IHP Backend APIs look like in a ReScript project, check out this realtime chat app: https://github.com/digitallyinduced/ihp-backend-chat-example-app-rescript/blob/master/src/MessagesContainer.res

I’d love to hear your early feedback on this. As this is the first version of the ReScript API, it could still change a bit if we find better ways how to do things :slight_smile:

3 Likes