Skip to end of metadata
Go to start of metadata

About

Recently we started to evaluate Electron, this article summarize our initial evaluation and findings covering some key elements we considered important.

About Electron

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

How Electron works

Electron provides a run-time to build desktop applications with pure JavaScript; Electron takes a main file defined in your package.json file and executes it. This main file (conventionally named main.js) is responsible for interacting with the native GUI of your operating system and creates the GUI of your application (or application windows.) This main.js file is also responsible of handle system events, such as mouse clicks or keyboard input.

In Electron, there are two types of process; the main process, which as stated above, runs the package.json's main script and displays GUI by creating web pages. Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used, and each web page in Electron runs in its own process, called renderer process.

The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it. Since calling native GUI related APIs is not allowed when using web pages, the renderer process of the web page must communicate with the main process to request that the main process perform those operations. 

Electron provides an inter-process communication (ipc) module for that kind of communication, which allows for the main process not to worry about how many renderer processes there are or which one sent a message.

Benefits of using Electron

  • Electron applications run the same regardless of the operating system.
    • It is not necessary to develop an application for each OS.
    • Even that are web-based applications, can be develop to don´t look like a windows app or Mac App, so, users won’t mind or realize that HTML is behind the user interfaces - Beyond the Browser
  • Electron has no browser dependency.
  • Since Electron uses JavaScript to build the applications, building the desktop app is as similar as programming the web application.

Downsides of using Electron

  • The final application may not have the same performance as a native app.
    • Check also: Beyond the Browser
    • A “Hello, World!” Electron app is 40 MB zipped. Besides the typical advice you follow when creating a web app (write less code, minify it, have fewer dependencies, etc.). The “Hello, World!” app is literally an app containing one HTML file; most of the weight comes from the fact that Chromium and Node.js are baked into your app. At least delta updates will reduce how much is downloaded when a user performs an update (on Windows only) - Beyond the Browser
  • There is no way of exporting the Electron app to iOS or Android directly (an intermediary is required such as Ionic).
    • For mobile platform, nearly all of Electron's APIs don't apply.
    • Electron uses V8 which is not supported on iOS. This means Chromium and Node.js (main components of Electron) will also not work on iOS.
    • iOS store prohibits the use of a different browser engine (can't use Chromium).
    • While the use of Node in Android be somewhat supported, it will likely require to adequate a lot of Node modules to fit the Android ecosystem.
  • If jQuery/Meteor/AngularJS or RequireJS is used alongside the app, it is necessary to add extra code for them to work. Check this link for further details.
    • Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.
  • In case of choosing Electron Builder to distribute an app:
    • Additional packages need to be installed.
    • iOS distribution will not be possible unless building from a Mac.
    • For more details abut distribution & automatic updates check: Beyond the Browser
  • Electron applications tend to be big in size.

The next table show the size of an application on Electron that render a Base22 River of News Infinitive widget using XWidget and Vue.js, using Electron packager and Electron Builder:

 Type of Distribution/PlatformXWidgetVue
Electron-packager Linux AppImageN/AN/A
Electron-packager Linux App(installed)78.8 MB80.4 MB
Electron-packager Windows SetupN/AN/A
Electron-packager Windows App (installed)57.2 MB57.4 MB
Electron-packager Mac dmgN/AN/A
Electron-packager Mac App (installed)  
Electron-builder Linux AppImage475.7 MB50.7 MB
Electron-builder Linux App(installed)78.8 MB80.4 MB
Electron-builder Windows Setup365.6 MB33.3 MB
Electron-builder Windows App (installed)81.3 MB81.4 MB
Electron-builder Mac dmg45.8 MB42.1 MB
Electron-builder Mac App (installed)116.9 MB119.3 MB

**Note: The applications generated with electron-packager, doesn't generate neither .AppImage, setup.exe or .dmg, that is why the size of those files is Not Available.

Accessing computer hardware

With Electron your app can access the hardware like the microphone and webcam (if available). In order to achieve this, you need to make use of the navigator.webkitGetUsermedia API. By specifying the constraints, the API can communicate to either the webcam or mic (or both) so you can make use of them in your app. USB is also available so you are able to interact with technologies like Arduino and Raspberry PI.

Electron Documentation doesn't specify which hardware resources are available by default, so, If you wish to use other resources that are not mentioned above, you will have to make further investigation.

Performance

Is it slow or laggy? Well, the app is essentially a web app. It’ll perform pretty much like a web app in Google Chrome. - Beyond the Browser

Distribution

Windows, MacOS, Linux

There are several ways to achieve the distribution of the application; you can follow what is described on Electron's Github page or you can do it using either Electron Packager or Electron Builder. Both options will get your application distributed onto the desired OS, but Electron Builder is more friendly and it has communication with Squirrel, which allows you to manage auto-updates for Mac and Windows. If you decide to go with Electron Builder, you'll need to install additional packages according to your OS and the target OS of your applications, check this link to learn more. Here is a link that can help you understand better the functionality of Electron Builder.  

Even though 32-bit and 64-bit builds are supported, you’ll get away with 64-bit Mac and Windows apps. You will need 32-bit and 64-bit Linux apps, though, for compatibility. - Beyond the Browser

For more details abut automatic updates check: Beyond the Browser

Security

Be extra-careful when accepting user input or even trusting third-party scripts, because a malicious individual could have a lot of fun with access to Node.js. Also, never accept user input and pass it to a native API or command without proper sanitation.

Don’t trust code from vendors either. - Beyond the Browser

Expect the Unexpected

You will discover unexpected behavior now and again. Some of it is more obvious than the rest, but a little annoying nonetheless. - Beyond the Browser

References used

Beyond The Browser: From Web Apps To Desktop Apps

Authors