Switching between pages/tabs


In my app I want to create a tabbed view, so clicking on a tab will change the contents of the main body. Is there a preferred way to do this?

I thought about having a html page per tab, each with the tab bar included at the top. Then when the tab (essentially a link) gets clicked, send an IPC message back to the main process, and tell it to load a new url in the current window. However this feels a bit slow and isnt very smooth because when a new url is loaded theres a bit of delay before the user sees the new page/tab contents

Whats the best way to handle switching between different “pages” within the same window?


You’re right, changing the url for a browserwindow is slow and clunky, it wasn’t meant to be used that way.

This is something that @leedohm shared with me when I had a similar question. Basically, you want to either go with the SPA style using some ui framework… or you can have all your separate pages get loaded into 1 page, where you could smoothly transition between tabs/ content.

Here’s the example he gave me: https://github.com/electron/electron-api-demos


What is the SPA style? And what are some common frameworks that can handle this type of behaviour?

When you talk about loading everything into a single page, I guess you’re talking about something like this: https://github.com/electron/electron-api-demos/blob/master/sections/communication/ipc.html

So that approach might work for pages with relatively small amounts of content, but in my case one of my tabs contains a table showing thousands of rows from a database. I would imagine holding all of this on the page (but out of view while in another tab) is going to be pretty resource intensive?


A single-page application uses JavaScript to completely control what appears on the page.


There are tons of frameworks for handling just that @Nem. Many of them in no particular order: backbonejs, marionettejs, react, angular, meteorjs etc… they aren’t all completely alike, but they are all good choices for what you are describing.


I haven’t had occasion to use it yet, but Aurelia’s documentation made a lot of sense to me on skimming through it. Doesn’t seem like a steep learning curve.


So before I saw your posts about frameworks I tested out bootstrap. Bootstrap has tabs that you can use but the way you set them up is essentially with a bunch of divs for each page/tab already defined in the main html page, which get hidden and shown depending on the current tab

Are these other SPA frameworks essentially working in the same way? Where all of the content is loaded, but only certain parts are shown at any given time? Does this run into any problems in my case where I have a bunch of database data on each tab if everything always get loaded at start?


Well, you wouldn’t want to load all of your content, but the script gets loaded up all at once and then, when the user changes tabs, you can retrieve the next load of data from the DB.