Best Way to Partition A Very Big Single Page App?

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!

1 Like

What is your purpose/goal of doing this as a Single Page App?

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

3 Likes

Thanks for your feedback @George! Here are a few questions that would really help to know:

  1. Does the Routing method have the same side effects I mentioned above?

  2. 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?

  3. 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.

Thanks!

Antony.

Hi Brad… it is to enable app wide functions as I listed in the bullets in the orginal post.

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.

Antony,
SSI are suitable for common parts of your site which are being used across multiple/all of your pages - i.e. a navbar, a footer etc.

The SPA sites require you to use routing and content pages, that’s the whole idea behind an SPA page.

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.

Maybe I need to have a play with routing then… :thinking:

It’s not a maybe :slight_smile: these are totally different things and are used for totally different purposes.

Hmmm…

I’m not quite getting this routing method…

  1. My routed page looks a tad harder to edit as it can’t see my css - see examples below.

  2. 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:

out

There was also a button available on an SSI that looked like this:

in

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.

Would adding that feature be a possibility?

Best wishes,

Antony.

Please have a look at


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

image
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

image

If you can live with that, no need for Docker.