Reakt

An innovative framework laid on top of Javacord for building highly interactive (or reactive) Discord bots based on the same concept of JavaScript Front-End frameworks such as React and Svelte.

Reakt is a rendering framework abstraction on top of Javacord that was originally built as part of the Nexus framework. What sets Reakt apart from other frameworks is that it doesn't necessarily interfere with other frameworks' mechanisms such as how their command systems works, and supports both message and all interactions.

Write-once, Use-Anywhere

As Reakt abstracts many parts of how one would interact with messages and interactions on Javacord, we are able to make it so that developers only ever need to write code once for all kinds of interactions. Whether it'd be auto-deferring, re-rendering messages and everything. Reakt handles it by itself.

Reactively Simple

Reakt was built with Svelte as a primary inspiration, albeit limited by the capabilities of Kotlin. We still managed to achieve simple reactivity by the use of proxy-subscribers with Kotlin's delegation technique. In fact, here's a complete example of the framework paired with Nexus:

fun onEvent(event: NexusCommandEvent) {
    event.R {
        var clicks by writable(0)
        render {
            Embed {
                Title("Rendered with Reakt")
                Body(spaced = true) {
                    this append p("This message was rendered with Reakt.")
                    this append p("The button has been clicked ") + bold("$clicks times.")
                }
                Color(java.awt.Color.YELLOW)
                Timestamp(Instant.now())
            }
            Button(label = "Click me!") {
                it.buttonInteraction.acknowledge()
                clicks += 1
            }
        }
    }
}

Build with Components

All elements in Reakt are designed as components where everything from the Embed to the Button are component declarations. Designing the framework as such helps us build performance and efficiency as we are able to create reusable components that can fetch its own data without the need to refetch it every single time another element changes.

Reakt re-renders only what needs to be re-rendered, a big difference from its origins as Nexus.R.

val Reakt.Document.ClickEmbed = component {
    val clicks by writableProp("clicks")
    render {
        Embed {
            Title("Rendered with Reakt")
            Body(spaced = true) {
                this append p("This message was rendered with Reakt.")
                this append p("The button has been clicked ") + bold("$clicks times.")
            }
            Color(java.awt.Color.YELLOW)
            Timestamp(Instant.now())
        }
    }
}

val Reakt.Document.ClickButton = component {
    var clicks by writableProp("clicks")
    render {
        Button(label = "Click me!") {
            it.buttonInteraction.acknowledge()
            clicks += 1
        }
    }
}

fun onEvent(event: NexusCommandEvent) {
    event.R {
        var clicks by writable(0)
        render {
            ClickEmbed("clicks" to clicks)
            ClickButton("clicks" to clicks)
        }
    }
}

Strictly Enforced Ruling

Reakt has several bad practices that one shouldn't follow, and among them, we have a few that are strictly enforced to prevent bad code:

1. Components should have a %key prop that uniquely identify it when there are more than two of them that do not have any differentiating factors, such as different prop values, different props, etc.
2. States, such as writable, cannot be declared or initialized inside a render method.