I’m creating one very very big single page app. It is very much a CRUD, SaaS app. At the moment it is about 5000 lines of code, but will end up being around 30,000 lines of code.
I had had in mind to make it all in one index.php file, but the file is getting a bit big so I am thinking of partitioning it into pieces, which may be the parts relating to contacts, activities, finances, settings etc.
My existing design has elements that are common to these different parts that are already integrated into the one index.php file, such as:
A modal for delete confirmation
Management of the data type lookups for lots of different user customisable dropdown menu options
An ever growing set of flows for managing different situations.
So I’m experimenting with breaking it up… I’ve just put each of those main section listed into php include files, which makes everything much more manageable from a size point of view. However things like the flows which manage contacts are still in index.php, while the places I want to use them are now in ssi_contacts.php. Hence they don’t appear in any of the menus as I try to use them. And editing ssi_contacts.php graphically is much harder as it no longer displays with any of my css.
Is there a better way to do this partitioning that will overcome some of these issues?
Best wishes,
Antony.
PS - or here is an idea… does one of the methods allow me to move the code out to the external file and then back into my main index.php file with a single click? That would be the easiest way to manage it all I think!
Well that is getting too big indeed. You should use routing to separate your SPA in “views” and each view is a separate content page that is loaded dynamically when the route gets active.
You should always die your SPA with routing and views, no matter the size, as it gives you the best performance and manageability.
Same as your web site contains multiple pages, an SPA has multiple views
Thanks for your feedback @George! Here are a few questions that would really help to know:
Does the Routing method have the same side effects I mentioned above?
Is the only difference to between Routing and SSI the time that the code gets loaded, i.e.
Routing - code loads when you go to that part of the app
SSI - all code loads when you visit index.php?
Is there a method where I can just swap the code from the SSI back into index.php when I am working on that part of the design? That feels like by far the easiest method of working to me.
No, the easiest method is to use routing. I can't even imagine trying to do this without routing. I missed that point in your initial post. You are making things way harder than they need to be I am afraid.
Thanks for your thoughts Brad… at the moment, having it all in one index.php feels by far the easiest method, but maybe I am missing something about routing!
I don’t have an issue in managing the complexity, it is just that it is too much code for a visual product like Wappler to manage at one time.
My routed page looks a tad harder to edit as it can’t see my css - see examples below.
My Server Connects, Flows, Variables that are doing app wide functions aren’t available in the routed pages.
I think my design is way way too far down the “truly single” Single Page App path to back up now.
@George, it would be absolutely wonderful if as well as this button to send a section of a design out to an SSI/Content page:
There was also a button available on an SSI that looked like this:
Which would bring the SSI code back into the index.php file.
Then I can just swap sections of my code out to an SSI when I’m not editing them, and swap them back into index.php when I am… then I can see all the CSS, access all my site wide server connects, flows, variables etc, but I’m never having to save a file that is any more than a few thousand lines long.
Create a new project and play around with the boilerplate, it showcases SPA
Edit:
The repository mentions using Docker. This is not neccessary, the only problem is that when the site uses a local server - like Apache - the Title and Meta Description will not show correctly. This is because of the root directory for the local server which causes
where ‘holland’ is the local project directory.
Once uploaded to a remote server (or using Docker locally) and re-saving the index file, this becomes
these are totally different things and are used for totally different purposes.
