@romanmg @jon2@ @patricia @jamesbond I’ve been taking a novel approach to SPA development lately, and wanted to offer it for the good of the order, as well as to request your feedback. My goals were to maximize performance while minimizing the time my team actually needs to spend in the editor, for all the reasons outlined above.
Essentially, each time a user loads our site, we download a list of all the site’s “views” and store it in a custom state. This data type is our abstraction for pages/subpages and contains all the information needed to build our UI dynamically.
Each time the user visits a new URL, we detect the change (using @shot’s excellent Sudsy plugin) and lookup the current view (from the library we downloaded earlier) by referring to the URL pattern. We set this view to a second custom state.
The view record contains an ordered list of “modules.” This custom type is the building block of our UI. Modules can be nested, have templates and contain fields for variable data.
The visual design of our modules are defined through templates, which are held in a series of very large reusable elements (shoutout to @ideable, @vlad and the folks at Airdev, who planted the seeds for this system). A given template might have several variants, which are defined via custom states and conditional logic.
On URL change, then, the following events occur:
- We examine the URL pattern and set the current view
- Referencing this custom state, we pull the appropriate modules into our Repeating Groups
- The UI and data of each cell are defined in relation to the current cell’s module’s template, variant and fields.
The primary benefit of this setup, of course, is that it allows us to add, delete, reorder and tweak the UI for a given view without touching the editor at all. The only time we need to do that is when we want to add a new module or variant to our library, and then we do so in our reusable elements. Our extensive use of these reusables and repeating groups helps us keep the page as light as possible, as well as ensuring consistent padding, margins, etc.
We’re planning to build out a simple GUI that will allow us to edit views on the backend. So far very happy with the setup.