How to manage many render processes in one main window?


#1

Hi. I am newbee here and I try to write application using Electron.
Application is something like picture browser with directory panel, pictures panel and property panel.
Whole application is written in one HTML file with JS and CSS.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="file.css" title="style" />
    <script type="text/javascript" src="file.js"></script>
  </head>
  <body>
    <div id="breadcrumb" class="breadcrumb">Path: 
    <script>
        // code for create breadcrumb is here
        document.write('<a href="" onclick="refreshDirBrowser(' + crumbpath + ')">' + crumbs[c] + '</a> / ');
    </script>
    </div>
    <table width="100%">
      <tr valing="top">
        <td class="dirBrowser" width="30%" height="700" style="overflow-y:scroll;">
          <div id="dirBrowser">
            <script>
                  // code for reading directories into dirs array is here
                  document.write('<div class="dir">'
                  + '<a href="" onclick="refreshDirBrowser(' + dirpath + ')">' 
                  + '<img src="resources/' + dirs[d][1] + '.png" width="16" height="16">'
                  + dirs[d][0] + '</a></div>');
                }
              }
            </script>
          </div>
        </td>
        <td class="main" width="45%" valing="top" style="overflow-y:scroll;">
          <div id="fileBrowser">
            <table><tr><td>
            <script>
                  // code for read files and show pictures is here
                  document.write('<img src="' + photopath + "/" + jpgs[i] 
                    + '" width="' + w + '" height="' + h 
                    + '" style="margin-left:' + mw + 'px;margin-right:' + mw 
                    + 'px;margin-top:' + mh + 'px;margin-bottom:' + mh 
                    + 'px;border:2px solid transparent;" onclick="selectImg(this);">');
            </script>
            </td></tr></table>
          </div>
        </td>
        <td class="main" width="25%">
          <div id="propertyBrowser">
            <script>
              if (album.length > 0) {
                if (album.length = 1) {
                  document.write('<text>' + album[0] + '</text>');
                } else {
                  document.write('<text>Files(' + album.length + ')</text>');
                }
              }
              for (var a in album) {
                 // code for render properties is here
              }
            </script>
          </div>
        </td>
      <tr>
    </table>  
  </body>
</html>

I think I need separate process for each panel (div) to achieve possibility to make independent refresh for each panel.
How can I achieve this.
Please help me or send me article about it with example.
Thank you in advance.
Edo


#2

Electron works best with a Single Page Application setup, use a front-end framework like React, Vue, Angular, or Aurelia.