5

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.

Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
0

Use SingleSPA https://single-spa.js.org/ framework and create Container app using React. Then keep your PhP code as it is and display it as child page inside Container app page. All new modules you can create as separate module. It is kind of FE microservices. We tried it using React and Vue js but I am sure it will work for PHP too.

Improve this answer
-1

You can open your admin releated stuff on own workspace = virtual desktop

  • Thats supported on Linux, on Window and perhaps on other OS too

The follow some hints how to to some thing on Linux:

Check how many workspaces are configured on your system:

wmctrl -d

You can set a different count of workspaces if you like:

wmctrl -d | wc -l
# or on follow way:
wmctrl -n 1

Open a program in foreground on current active workspace and move to 2`nd workspace:

wmctrl -s 1 ; xed & sleep 3; wmctrl -s 0;

Open a program in background on current active workspace and move to what ever your prefered workspace is:

Thats possible too.
Improve this answer
-1

You can display what you want on your background picture of your screen:

It can be they are like this on other OS too.

Improve this answer
1
  • Your two answers seem to be completely missing the point of the question
    – DavidW
    Commented Aug 25, 2021 at 19:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.