Skip to main content

Electron or Electron.js

Electron: Electron was developed lately in 2013 by the open-source and version control giant, GitHub. Electron uses NodeJs in its core to serve pages built on HTML and CSS as a desktop app. This implies that developers comfortable in HTML5 or Android Development can easily switch their platform to Electron

Prerequisites:

The main prerequisites which may be considered important for starting on with Electron are listed below.

  • HTML and CSS for User Interface.
  • JavaScript as a main language.
  • Node.js and npm

Performing Culture

There are two process in the Electron performing Culture:

  • Main Process => The main process is responsible for creating windows by using BrowserWindow instances. Individual BrowserWIndow instance renderes a webpage in its renderer process. Destroying a BrowserWindow instance implies that the corresponding renderer process is also terminated.
  • Renderer Process => There is a single main process which is responsible for maintaining multiple renderer processes. Each renderer process manages the webpage and its scripts running inside it.

How to install Electron?

  • Make sure node and npm are installed

      node -v
      npm -v

  • npm install electron --save-dev

Which apps are built with Electron?

  • 1 WebTorrent desktop app.
  • 2 WordPress desktop app.
  • 3 Ghost Electron app.
  • 4 Beaker Browser Electron app.
  • 5 Pexels desktop app.
  • 6 Slack desktop app.
  • 7 WhatsApp Electron app.

Electron Advantages:

  • High data security: For example, if there is a need to turn the existing app into a cross-platform desktop app using Electron, all data is stored in the system locally. Thus, the data security level is high. If a customer wants to store data in the cloud, a developer should make sure that this cloud is secure enough.

  • Accessibility: First of all, developers have free control and access to hardware level APIs using JavaScript/Plugin. Electron offers a large number of different features so it won’t be a challenge for a developer to find features they need for a desktop app. And migration to Electron won’t be a challenge as well.

  • High performance": In some cases, Electron cross-platform apps may function even faster than native apps, indeed. But it depends on how many components desktop uses and whether it loads only necessary components. The development process is much faster since one code base is used on all platforms. However, Electron eats memory a lot. But we will speak about cons later.

  • Simplified management: Customers won’t have challenges with explaining their requirements to each team, because everything is created for all platforms at once. In addition, customers won’t need to test each app to make sure that it has the same functionality. Whereas developers will work with a single code base, it will reduce development time, one bug can be fixed in a code base, it doesn’t matter where this bug occurs (on mobile Android app or desktop Windows, for example).

  • Reusable framework: Electron can be used both for desktop and web application due to a single code base. That is why when it is coded once - it can be used then on all operating system if necessary. And there is no need to build code base from scratch.

  • Compatibility: Electron works with all JS frameworks and libraries which are enough to build high-quality apps. Angular, React, Vue, Node.js - it is not a full list of tools that developers may use during Electron app development.

  • Interaction with web UI/UX tools: Web technologies provide you with an access to different UI/UX tools that will enhance your desktop app on all platforms and make app design really captivating. As in the case of functionality, UI and UX on all platforms will be the same, so you will know that macOS users will see everything in the same form as Windows users do.

  • Reduced expenses and time: And, at least, the main reason why developers like to use Electron.js framework. It takes less time to build a certain desktop app, so less time means reduced costs. It is good for a customer, good for a developer. And if you need to create some other mobile or web apps, developers may start creating it faster.

Electron Disadvantages:

  • Large size: Each Electron app (both desktop and web) has its own version of Chromium. But Chromium browser is rather heavy software and it has tens of millions of code lines. In fact, Chromium is almost as heavy as an operating system. That is why your app turns into one heavy block of software that occupies a part of your hard drive. Although, nowadays, when one PC may easily provide users with 2 terabytes of internal memory, it will not be a big problem.

  • Resources hogging: Apart from internal memory, Electron apps also hog up system resources, operative memory (RAM) and consume a lot of battery energy (if we speak about laptop). It is connected with optimization of Electron apps for various operating systems, but as platforms are different, average optimization is not energy efficient. Native apps are created specifically for one platform, and their resources are optimized much better.

  • Individual requirements: I mean the individual requirements of a customer. Normally, all Electron apps should function in the same way, and be identical on all platforms. However, if a customer wants some unique design features in each platform, it bears serious difficulties for developers. First, they need to spend much time on the implementation of a unique feature for each platform. Second, extended time leads to larger costs. Third, it is the wrong approach. Take any cross-platform app - it is alike on any OS. So think about the identity of your app.

happy learning ✌