Multi-window web application – a solution for overloaded interfaces

Introduction

This article will consider a possible solution for offloading web application interfaces – creating an application with the ability to move part of the functionality into additional windows, or simply a multi-window application.

The basis of the React + Redux stack.

Preface

Have you ever encountered a browser application with an overly busy interface, in which sidebars with settings or data overlap the main window?
I practically don’t, but that doesn’t mean they don’t exist.

Having got a new job, I was lucky to get on a project where I encountered this situation. The application was filled with many additional panels with various types of information and buttons. And all this was designed for a large screen and ergonomically designed, but seeing it on my more or less standard screen I felt discomfort.

Naturally, it would be possible to forget, because the customer will only use the application on huge monitors, but I still prefer a system of several regular monitors.

Retreat

Most likely, my vision of this issue was influenced by the fact that I came to the frontend from the engineering field, where I used programs with a busy interface that were conveniently divided into different windows. Often, during work, one program occupied 2 full monitors.

As a result, the idea of ​​dividing a web application into several windows stuck in my head; I didn’t resist it for long and quickly began to study this issue. As was obvious, no one really needs this functionality, no one does this, and I couldn’t find a description of a ready-made solution. But with just a couple of tools, achieving the goal turned out to be easy.

To the point

The solution was selected for a popular stack React + Redux.
Required additional installation React Router And redux state sync

As an example, we use the classic written for educational purposes. todo. Yes, the interface is clearly not overloaded, but it needs to be shown on something.

The idea is as simple as possible:

1. We develop an application.

2. We realize that there is a panel that interferes with the main content and it would be cool to give the user the opportunity to display it in a separate window.

3. With React Router We make an additional page that contains the very component that we want to display in a separate window. In the code below this is the page at the path “/settings“.

function App() {

  const mainState = useTypedSelector(state => state.main);

  return (
    <ThemeProvider theme={mainState.theme === 'light' ? lightTheme : darkTheme}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={
            <AppContainer>
              <TodoContainer>
                <Header />
                <Main />
                <Footer />
              </TodoContainer>
            </AppContainer>
          } />
          <Route path="settings" element={
            <TodoFooter />
          } />
        </Routes>
      </BrowserRouter>
    </ThemeProvider >
  );
}

4. Next, we make a button that, when clicked, opens a new window with the removed component.
_{* Application using styled‑components, ButtonOpenSettings is just a stylized button}

<ButtonOpenSettings
        onClick={() => {
          const params="scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=500,height=60,left=100,top=100";
          open('/settings', 'test', params);
        }}
      >Открыть настройки</ButtonOpenSettings>

5. For state synchronization redux connect between tabs Middleware readux state sync
https://www.npmjs.com/package/redux-state-sync

6. That’s all, now the user has the opportunity to display part of the application’s functionality in a separate window.
The application can be viewed here – https://todo-app-liart-rho-37.vercel.app/
Repository – https://github.com/GragertVD/todo-app/tree/master

7. It would be more correct to add the open window state to state to hide the settings in the main window in order to avoid duplicating buttons and really unload the interface of the main window, but I left it this way to better observe the synchronous change in state.

PS
Among the obvious shortcomings, I would like to note that I have not yet found a way to make the open browser window constantly in the foreground relative to all other browser windows.

I am writing with the awareness that the method discussed is quite specific and will be useful to few people. But I believe that in certain conditions it can be a great solution.
And I just wanted to share an interesting idea. Thank you all for your attention.