[Design] How to structure a complex application?

[matt-grain]

Hi,

Let's assume I have a website with separate features, mostly independent (except maybe some user data).
Currently the state is defined at the app level so each page defined in the app shares the same state.

If every section of the application is in a separate py file, what is the best code structure to use?

Ex:

• [0] main.py importing [1], [2], [3], defining the app, pages and compiling the stuff
• [1] global_state.py file for the app global state
• [2, 3, ...] page_x.py file per section, in this file the local state (inheriting the global state) and substates and rendering functions, importing [1]

Something like that?
How did you structure the pynecone.io website?

[picklelo]

This is a great question. There's no official best way, but the way you described is basically how our website is structured:

• A file base_state.py that has global information, and which all the page states will subclass
• For each page, a file like landing_page.py which has the state for that page (inheriting from the base state), along with the code to render the page.
• A styles.py file with common styles used throughout the app pages
• In the main app file, we define the app and add all the pages

As your app grows, you may also want to move out common components to their own files so they can be reused. This includes page templates (so for example you can include a navbar and footer for each page easily). We will update our site docs to include this info.

It seems to scale pretty well and is easy to reason about each page independently.

[FHU-yezi]

For bigger website, maybe we can have a states folder to storage all the states and logic?

Let the page be HTML, style.py be CSS, and state files be JS.

[picklelo]

Yes this works, I think it's up to preference - having the state and render for the page together can help you keep all the logic for a page in a single file, but some people may want to separate them out like you mention