Electron best way for multiple windows

Question

What is the proper way to open multiple BrowserWindows? I do it like this and works fine so far. Is better to make an array of win?

let win;

function createWindow () {
  for (i=0; i<loadNotes.notes.length; i++){
  win = new BrowserWindow({
    'x': loadNotes.notes[i].pos.x,
    'y': loadNotes.notes[i].pos.y,
    'width': loadNotes.notes[i].pos.width,
    'height': loadNotes.notes[i].pos.height,
    'frame': false});

  win.setMenu(null);
  win.loadURL(`file://${__dirname}/index.html?${loadNotes.notes[i].name}`);
  //win.webContents.openDevTools()
  }
  win.on('close', () => {

  })

  win.on('closed', () => {
    win = null
  });
}

Answer 1

It depends on if you want to use the instance methods of win or not. If not you can leave your code as it is. Just one suggestion, it is recommended that for best user experience you show your windows gracefully

win = new BrowserWindow({
    ...., 
    show: false})
...
win.loadURL(`file://${__dirname}/index.html?${loadNotes.notes[i].name}`)
win.once('ready-to-show', () => {
  win.show()
})

Answer 2

For creating a multi window application in electron is easy. Here a nodejs module which help you to create a multi window app easily.

you can install this module by just executing the following command

npm install --save electron-window-manager

Then, inside the application main.js (or whatever you've chosen for your application), require the module, like this:

var windowManager = require('electron-window-manager');

On the Main process you can use it like this:

const electron = require('electron');
const app = electron.app;
const windowManager = require('electron-window-manager');

// When the application is ready
app.on('ready', function(){
    windowManager.init( ... );
    // Open a window
    windowManager.open('home', 'Welcome ...', '/home.html');
});

And in the Renderer process (inside the created window), you can use it like this:

    var remote = require('remote');
    var windowManager = remote.require('electron-window-manager');

    // Create a new window
    var win2 = windowManager.createNew('win2', 'Windows #2');
    win2.loadURL('/win2.html');
    win2.onReady( ... );
    win2.open();

Please go ahead and check out the module code and see for yourself how it all works, there's no magic involved, but it's consistent and easy to read. Just have a look at the code and you are good to go.

here is a complete guide about this module i hope it will help

https://github.com/TamkeenLMS/electron-window-manager