SolidJSS
SolidJS3y ago
9 replies
binajmen

How to handle complex form?

Hey everyone,

Exciting news! I'm currently taking on the task of transforming a portion of an existing web app into a Single Page Application (SPA) using Solid 🥳

Our present setup functions more as a proof of concept, with each field triggering a POST request to a server endpoint upon being edited (using the onBlur event), thanks to Remix. This triggers a server-side computation of the project, with the results reflected back to the user through the Remix mechanism.

Moving forward, I envision a shift towards a Solid SPA environment, where all modifications are locally managed. Computation would become an automatic response to any field edits. The only time we'd interact with the server is when saving the project, pushing the accumulated data in its entirety.

However, I've stumbled upon a tricky situation concerning the layout of the form - if we're still considering it a form.

Our data organization has a hierarchical pattern: a project can contain numerous elements, and each element can host multiple layers. To fully compute a project, you need access to the entire hierarchical structure. Nonetheless, each layer has the ability to self-compute, and an element can compute itself based on the intermediate results of its layers, and so on.

I'd appreciate any guidance or references to useful articles or resources that could help me wrap my head around this. What would be the most efficient approach to organizing such a form?

Thanks in advance for your thoughts!
app_screen.png
Was this page helpful?