Electron multiple Tabs without dealing with performance

Series

Why shouldn't use the normal tab on the same browser

How can we do that? Pros & cons

Hi everyone,

In the journey of building a tool to interact with Firestore, I found an insight that:

Developers usually work on multiple projects at the same time

And they also tend to use multiple tabs on the browser to work with the same Firebase project to have multiple views

Indeed, Refi App should support them by:

Implement user's familiar UX tabs - Like what chrome does

Hotkeys all the thing (Cmd + T for a new tab, Cmd + W to the closing current one)

Fast

In search of solutions

It popped out on my head for some solution:

Just use some Tabs component, there are hundred of Tabs components out there

Is there any optimized solution for electron? Here we have https://github.com/brrd/electron-tabs

But none of them can give me the right solution, why?

If I use Tabs component in react, the multiple application will work on just one process and it app is will hang when we have more than 3 tabs open since Refi App do lots of things in the background: It listens to the database changes and update the UI in realtime, showing many documents at the same time in the Table view

How about electron-tabs, it uses webview under the hood. I tested it and end up can not make my app run properly due to application architecture. The webview also have many issues remains that event Slack or Figma team can not deal with:

Growing Pains: Migrating Slack's Desktop App to BrowserView - Slack Engineering

Recently Slack on the desktop has been going through an awkward adolescence. Instead of flailing limbs and pitch squeaks, ours has manifested in ways rather more grim: inexplicably failing to render content, reloading during common operations, and error screens that aren't actionable. The only silver lining has been being on the receiving end of some ...

https://slack.engineering/growing-pains-migrating-slacks-desktop-app-to-browserview/

Introducing BrowserView for Electron

At Figma, we believe everyone should have access to design tools. We chose the web as our platform for its unrivaled accessibility (sharing a Figma file is as simple as sharing a link!). On the flip side, we have had to work extra hard to make Figma fast and competitive against native applications.

https://www.figma.com/blog/introducing-browserview-for-electron/

But those awesome team has introduced a great alternative solution for it BrowserView. It basically works like BrowserWindow but you can put BrowserView anywhere in of BrowserWindow.

It likes position relative/absolute in CSS, the BrowserWindow is the parent which has position: relative; and the BrowserView is a child has position: absolute;. And yes, you can put many BrowserView inside its parent as you want, just like CSS

BrowserWindow = position relative, BrowserView = position Absolute

Here is the output

The output is awesome, each tab instance has its own process, and the performance is incredible, it like we change tab in the Chrome browser (In fact, the mechanism is almost the same as Chrome is doing)

Repo: https://github.com/thanhlmm/electron-multiple-tabs

GitHub - thanhlmm/electron-multiple-tabs: High performance multiple tabs for Electron

Using webview under the hook to implement multiple tab Using node-ipc to make server instance comunicate Go to vite folder Then open new terminal, go to server folder Go to vite folder Then open new terminal, go to server folder yarn build yarn package-{mac,window,linux}

https://github.com/thanhlmm/electron-multiple-tabs

If you guys think this post is useful and one to know more tricks on optimizing the performance of Electron, let's follow me at https://twitter.com/cuthanh15