Caveats

Due to its nature as a web development framework, Genie has some idiosyncrasies that are important to keep in mind when developing reactive apps. This page lists some of the most common caveats and how to avoid them.

Accessing reactive variables from the Julia code

On page load, reactive variables tagged with @in or @out are instantiated and copied to the browser. Then, there'll be two-way (with @in) or one-way (with @out) synchronization between the variable in the Julia code and its copy in the browser.

Any changes to a reactive variable in the Julia code must be made within an @onchange block. Therefore, this code will throw an undefined variable error:

@app begin
    @in N = 0
end

N += 1

To make it work, you must update the variable from a reactive handler as

@app begin
    @in N = 0
    @in button_clicked = false
    @onbutton button_clicked begin
        N += 1
    end
end

Variable interpolation

In a reactive Genie app, you can interpolate a variable's value with $ or {{}}. For example:

const name = "John"
@app begin
    @out age = "65"
end

ui() = p("Hello $name, you are {{age}} years old")

The $ operator is the typical Julia interpolation that is made before the page is sent to the browser. Hence, the interpolated variables need to exist in the Julia code beforehand.

On the other hand, {{}} interpolates variables in the browser. Hence, a variable must be exposed to the browser with @in or @out to be interpolated.

Code strings in UI components

Some UI components accept strings with executable code into their arguments. For example:

btn("Click me", @click("clicked =! clicked; counter += 1"))
p("The counter is {{counter}}")
p("The counter+10 is {{counter + 10}}")

Any code that is passed to a UI component is executed in the browser. Therefore, it must be valid Javascript.

Zero-based indexing

Since Javascript uses 0-based indexing, it is possible to get unexpected results when using Julia arrays in the UI. For example, the following code will work in the browser but it will throw an error in the Julia backend:

@app begin
    @out text = ["a", "b", "c"]
end

ui() = p("The first element is {{text[0]}}")