Electron Manager – Utility kit for Electron applications

Hashedin

Sanoop Jose

08 Jul 2020

Electron-manager is a utility kit for electron applications that helps kick start an Electron project with minimal framework setup. Setting up the initial project framework is one of the tedious tasks in every project. In the Electron world, the initial framework setup includes a logger module for debugging and troubleshooting, an updater module for application updates, persisted storage for app settings, etc. The great thing about electron-manager is that we can install this lightweight library to handle all these common use-cases and just focus on the real business requirements. Electron-manager can be installed from NPM and it comes with a lot of reusable modules and services that you can use with flexibility.

 

 

Electron-manager modules can be used in both the main and renderer processes without worrying about the process type. To avoid code duplication, we have created proxy modules in the renderer process. All the complex logic will be executed in the main process, and the results will be passed back to the caller. The proxy modules are a little different from the remote proxy in Electron. Here each module has its proxy so that you can use the modules without depending on a common proxy like “remote.”

 

Installation

Install `electron-manager` from NPM using the following command:


$ npm install @hashedin/electron-manager

 

Then use it in your app:


import { logger } from '@hashedin/electron-manager';
 
...
 
logger.log('This is a test message...!!!');

 

Modules

 

ElectronUpdater

 

Almost all applications allow version updates, and electron updater is the most popular library used for Electron application updates. Electron-manager’s electron updater module provides a set of wrapper functions to handle all update functionalities. It supports both auto-update and manual updates and can operate without any configurations.

 


import { electronUpdater } from '@hashedin/electron-manager';
…

// Auto update
electronUpdater.autoUpdate()


OR

// Manual update
electronUpdater.checkForUpdates() 
  .then(() => { 
    // Implement your custom logic here...
  });

IPC

 

IPC module is used to communicate between different processes. Electron natively supports renderer to main and main to renderer communication via IPCMain and IPCRenderer. The IPC module provides functions to communicate between renderer and renderer processes, allowing you to send messages to a particular window. This module is more favorable when you are using preload scripts in your project and want to communicate from preload script to the same window or a different window. 



// Renderer process 1
import { ipc } from '@hashedin/electron-manager';

...
ipc.request('CHANNEL_1', 'This a test request')
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    console.log(err);
  })

// Renderer process 2
import { ipc } from '@hashedin/electron-manager';

...
ipc.respond('CHANNEL_1', (evt, data) => {
  console.log(data);

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(‘This a test response’);
    }, 500);
  })
})

 

Logger

 

The Logger is one of the most useful modules in electron-manager. While debugging applications in production mode is still an issue, and console statements generally don’t help in that case, the logger module gives you to log all your console statements into a file system.

 

With a lot of configurations, logger supports rotating logs so that we can get the session wise logs for troubleshooting and debugging. Another feature is Logfile auto clean, which ensures that your logs folder is not using excess storage space. 


import { logger } from '@hashedin/electron-manager';
...
logger.log('This is a test message!');

StorageManager

 

The StorageManager is another frequently used module in the electron-manager that is used to store any file from an Electron application.  It provides ready-to-use services to create file storage and update the data. The common use case is JSON storage, and user-related data or application settings are stored in the file system to keep the application consistent on every app launch. The main advantage of using StorageManager is that it supports concurrent read/write operations, and hence, one doesn’t need to worry about data loss or update failure.


import { storageManager } from '@hashedin/electron-manager';


...
storageManager.createStorate({name: “settings”});

...
storageManager.write('settings', {systemSettings: false})
 .then((data) => {
   console.log('StorageManager | Write : Success', data)
 })
 .catch((err) => {
   console.error('StorageManager | Write : Error', err)
 })

...
storageManager.read('settings')
 .then((data) => {
   console.log('StorageManager | Read : Success', data)
 })
 .catch((err) => {
   console.error('StorageManager | Read : Error', err)
 })

 

WindowManager

 

WindowManager is the most commonly used module in electron-manager that helps to create BrowserWindow instances and get the opened window instances using its name or id. You can use either a static HTML file path or a hosted URL to render the content in the opened window. One of the essential challenges in an Electron application is the tracking of opened windows from other processes, and WindowManager helps to access the opened windows anywhere from the application just by passing its name or Id.

 


import { windowManager } from '@hashedin/electron-manager';
 
...
const win = windowManager.createWindow({
  devTools: true,
  url: 'https://www.example.com',
  options: {
    height: 400
    width: 600,
  }
});

 

Use cases

Electron-Manager is quite useful in every Electron application. Since it is a lightweight module, it doesn’t impact the total bundle size to a large extent. The modules that are available in electron-managers are functional in one way or the other. 

  1. If your application supports an auto-update or manual update, the ElectronUpdater module helps to do that with minimal configuration. You can directly check the updates and do an auto-update or manual update(In a manual update, you can add a custom UI for update and install popup windows).
  2. A logger framework is mandatory for all applications to troubleshoot and debug. The logger module is useful in every project as it supports a lot of configurations so that users can configure this module for their convenience.  
  3. The best use case for a window manager is multi-window architecture. If you are using multiple windows in your Electron application, then the window manager will be a solution for the window tracking issues. 
  4. In your Electron application, if you are using any file storage, then StorageManager can be employed to manage your stored files.  
  5. Render-renderer communication is a common scenario in most of the applications and currently, Electron doesn’t have any native support for this. Since inter-process communication is the major communication medium in electron applications, the IPC module here handles the communication. 

 

Impact

 

In every project, code redundancy is a well-known issue. But, how do we resolve it, is the larger question? We have to create reusable modules and services on our application. Eventually, the reusable modules become an integral part of the project. Here, an electron-manager does the job and you can set up all the initial configurations in one day and focus on the business logic. I have delivered a production-ready application in 72 Hrs using electron-manager and create-electron-app boilerplate. This isn’t necessarily the case in every project, though you definitely can save some time in the initial stages, and that will continue to an extent in the whole development process.


Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

linkedIn youtube