Alternative to iframes to make a split screen admin area

Question

I am developing an admin dashboard where I want to have a files navigation system that shall be always available from the main admin area and stay independently loaded from the main admin area.

What's the problem?

While interacting with the dashboard, since the approach is SSR with PHP, the user will be executing page requests to update a post, go to a different view, etc. So the files navigation area will have to be reloaded on every request and I don't want that, since the backend PHP will have to fetch all files and build the files tree over and over again for each request.

I though about doing the following:

The wrapper page (admin dashboard) contains two iframes in a split viewport:

• iframe MAIN
• iframe FILE-NAVIGATOR

The user can use and navigate on each side of the viewport without affecting the other area.

For example, navigate through files and folders without moving away from an open editor on the main iframe.

Or save the editor contents and go do something else without having to constantly refresh and re-render the files navigation area.

Both iframe contents will be hosted under the same domain, so communication between them won't be an issue.

I want to go the SSR route via PHP, since this project does not deserve the effort of building a modern SPA and I need to reuse a lot of already existing PHP code.

But still, I want to do it as good as possible.

So the question is:

Do you know if there is a cleaner/better way to achieve this, better than iframes?

I am a bit worried about all browsers supporting iframes since it's in fact an old thing.

Answer 1

I think your best bet would be to go with a single page application; like React or Angular. This would somehow force you to build your backend system as an API server and letting most of the heavy UI lifting to JavaScript running in the client.

Some time ago I started working on a side project that would be an Amazon S3 Browser. The application runs in the browser, the main entrypoint is here but you'd be interested in looking at the Browser part itself.

You'll notice the BucketBrowser component accessible here is composed of 2 parts: the BucketList and the BucketContent, similarly to what you want to achieve.

The main advantage of working it as React (or Angular) and a neat Backend API is the separation of concerns and the opportunity to create also a Mobile or native client for other platforms that would leverage your Backend API.

I'm not a React expert, the links I've shared are part of an experiment not ready for production usage; but will help you visualize how you could achieve your idea by leveraging React.