Local v Global state in NiceGUI

[frankvp11]

I've been exploring the capabilities of NiceGUI and recently stumbled upon an interesting challenge regarding global and local states.

Global vs Local State Management

One of the things I appreciated from architectural patterns like MVC and MVU is the ability to distinguish between global and local updates. For instance:

• Global updates: Triggered by one user but reflected on all connected clients (e.g., a shared counter or a collaborative whiteboard).
• Local updates: Affect only the user’s session or a specific subset of clients (e.g., user-specific preferences or session-based interactions).

This distinction is incredibly useful when building dynamic and interactive web applications, and I wanted to discuss how we can achieve this in NiceGUI.

A Practical Example

Here’s a simplified example to illustrate how global and local states might be managed in NiceGUI:

from nicegui import ui, app
from enum import Enum

class Color(Enum):
    RED = 1
    GREEN = 2
    BLUE = 3

class LocalState:
    def __init__(self, color: Color):
        self.color = color

    def change_color(self, color: Color):
        self.color = color

class GlobalState:
    def __init__(self, count: int):
        self.count = count
    
    def increment(self):
        self.count += 1
        for client in app.clients:
            # update the client’s state here
            pass

global_state = GlobalState(0)
local_state = LocalState(Color.RED)

ui.button('Increment', on_click=global_state.increment)
ui.button('Change color', on_click=lambda: local_state.change_color(Color.GREEN))
ui.label(global_state.count).bind_text_from(global_state, 'count', lambda x: str(x))
ui.label(local_state.color.name).bind_text_from(local_state, 'color', lambda x: x.name)

ui.run()

Discussion Points

Global State Handling:

In the example above, the GlobalState class is designed to maintain a shared counter. However, broadcasting changes to all connected clients isn’t straightforward. Is there an idiomatic way to broadcast updates in NiceGUI using the app.clients API? Would security be an issue here?

Local State Handling:

The LocalState class encapsulates client-specific data. How can we tie this more directly to the session or client instance in NiceGUI?
Are there best practices for binding local states to UI components dynamically when users connect?

Closing Thoughts

Given how NiceGUI's auto-index client can determine if events are global (or not) already, are there any ways that I can leverage that in choosing in some sense what does get globally updated and what doesn't?
For example, in the code that I provided, everything would technically be global state. If I were to wrap it inside a ui.page, the content inside there would be local.
I realize that for an example like this, it wouldn't be too hard to work out a hacky solution, but I'm interested to see if we can expand this into a more general solution, or if that's even possible.

Looking forward to your thoughts and advice!

[frankvp11]

I ran into app.storage.general... I feel somewhat stupid 🤣