Hi, I recently discovered NiceGUI and I am very much interested in giving it a go, but there are some things I don't quite understand after working through the documentation.

The NiceGUI documentation on bindings says "NiceGUI is able to directly bind UI elements to models" and provides this code example:

from nicegui import ui

class Demo:
    def __init__(self):
        self.number = 1

demo = Demo()
v = ui.checkbox('visible', value=True)
with ui.column().bind_visibility_from(v, 'value'):
    ui.slider(min=1, max=3).bind_value(demo, 'number')
    ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')
    ui.number().bind_value(demo, 'number')

ui.run()

I understand the example is using script mode and the "code will be executed once per client connection". Just from looking at the code though, demo seems to be a module-level variable that I expect to be initialized exactly once when I run the above file to start the server.

So, my first question would be: Will an individual demo object be created for each client that connects to the app, or will there be only one single demo object, so that the state of the slider, toggle and number will be shared across multiple clients?

Reading about pages, they seem to be the preferred way to structure an application. Intuitively, I would upgrade the above code like this:

from nicegui import ui

class Demo:
    def __init__(self):
        self.number = 1

@ui.page("/my_page")
def my_page():
    demo = Demo()
    v = ui.checkbox('visible', value=True)
    with ui.column().bind_visibility_from(v, 'value'):
        ui.slider(min=1, max=3).bind_value(demo, 'number')
        ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')
        ui.number().bind_value(demo, 'number')

ui.run()

Would that be correct? Would it yield the same behavior? Now it definitely looks like there should be one demo object per client (or per tab?) that visits /my_page and triggers the page builder function. But what happens when demo goes out of scope after the page is built?

As an immediate follow-up, in case there is some magic happening here, where is the state represented by demo actually stored? On the server or on the client? In a plain object, or in some data structure that allows association with specific clients?

Finally, NiceGUI also has storage with well-documented behavior that can also be bound to UI element properties. How does the demo model compare to the storage options and where does it fit into the storage feature comparison table? What type of object would you bind UI element properties to when assembling your own UI components out of the ui elements?