Effective Strategies for Organizing NiceGUI Code in Dynamic, Multi-Faceted Applications

[sonnygeorge]

Hello NiceGUI community!

Context:

I am a junior data scientist by profession and am generally quite new to app-development outside of the occasional Streamlit app.

However, I have recently begun building an IOT-kiosk app whose required functionality stretches well-beyond Streamlit's capabilities. Up until now, I've been building it with the REMI framework (which is great but a bit more lower-level than NiceGUI). I am seriously considering switching over to NiceGUI.

This is an app that I'd like to add to/iterate on for years to come, so the more work that can be done by a framework, the better.

Question for Discussion

Given NiceGUI's approach to things (event handling, adding children elements in context managers, etc.)...

For a complex application that would require more lines of code than one would want to put in a single file, what are some effective strategies for organizing/modularizing code?

My Initial Thoughts (to get the conversation started)

1. Encapsulate and separate the logical UI units ("components"?)
2. As needed, "connect the pipes" of event handling between your UI "components" later...

Suppose I have a project with a header, and a dynamic number of "foo" components where "foo" components can be "soloed" such everything else is hidden from the UI...

The most "coherent" level of separation for the code would be at the header and "foo" component level...

However, since there's a lot of event-handling occurring across these "modules", these "pipes" would need to be connected after things are brought together...

Assuming they had a lot more internal complexity than they do in the .gif (and therefore warranted the code separation), how would you approach "piping together" their intermingled event handling later?

Furthermore, what are perhaps some other good practices for NiceGUI code separation? For example, it might be nice to have your UI definitions be very minimal and readable like:

with my_header():
    my_digital_clock()
with my_sidebar():
    my_nav_menu()
with my_newsfeed():
    for post in USER.posts:
        my_post(post)    

...of course you would achieve this "minimalism" by finding a way to separate the style code and event-handling code that would normally clutter it up...

Anywho, what do people think?

Here is the code behind my .gif. It's quite rough but at least accomplishes separation between the details of the header, the "foo" component, and the necessary "piping"...

[rodja]

Thanks for reaching out and considering NiceGUI as the framework for your project, @sonnygeorge. We have very similar questions/challenges in our own usage with NiceGUI. We designed the framework in a way that you can basically do all system architectures which can be build with Python. Have you seen our modularization example? Another, way more complex example on how to use NiceGUI in larger software would be our robotics framework https://rosys.io.

[sonnygeorge]

For me, I think the most "zen"-feeling approach so far is actually inheriting and extending the nicegui.ui classes like this:

# elements/header.py

from nicegui import ui

from constants import clrs
from elements.clock import Clock  # other custom elements
from elements.svg import SVG

...

class Header(ui.header):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.classes("justify-between items-center")
        self.style(
            f"background-color: {clrs.dark_green};"
            f"box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);"
        )

        with self:
            left_content = ui.row().style("align-items: center")
            right_content = ui.row().style("align-items: center")
            with left_content:
                # routines button
                self.routines_button = ui.card()
                styles = f"{BUTTON_STYLE} background-color: {clrs.red};"
                self.routines_button.style(styles)
                self.routines_button.classes("place-content-center")
                with self.routines_button:
                    SVG(ROUTINE_SVG_FPATH, ROUTINES_SVG_SIZE)
                # app name
                ui.label(APP_NAME).style(f"font-size: {APP_NAME_SIZE}")
            with right_content:
                # clock
                Clock()
                # programs button
                self.programs_button = ui.card()
                styles = f"{BUTTON_STYLE} background-color: {clrs.blue};"
                self.programs_button.style(styles)
                self.programs_button.classes("place-content-center")
                with self.programs_button:
                    SVG(PROGRAM_SVG_FPATH, PROGRAMS_SVG_SIZE)

This way, my new custom elements can retain the args/kwargs of their super class...
And as you can see, wherever I use this Header, I can attach listeners to the buttons later since they are saved as attrs.

[akai-1024]

Thanks for your advice, it is really a very good idea

[rodja]

I've just created pull-request #897 with nicegui.APIRouter. It builds upon FastAPI's APIRouter to allow path-prefixes to be managed in sub-modules. What do you think? Could someone try it and provide feedback?