Languages

Cross-Platform Applications With Electron

Electron, maintained by Github, is a framework for building cross-platform desktop applications with web technologies like HTML, CSS and Javascript.

Introduction to Electron

Instead of having different teams and different codebases for the same application across different platforms, we can have a single codebase in JavaScript (which is a popular language).

Beginners who are building applications for fun don't have to learn Swift, Objective-C, .NET, C++ for the wide variety of platforms. Instead, they can use frontend technologies like HTML and JavaScript that are more beginner-friendly.

There are many cross-platform technologies like Xamarin, Tcl/Tk and Java Swing. Still, these involve learning a new programming language and may not have all of the functionality to meet your requirements. In your journey with Electron, you can write platform-specific code to take advantage of the hardware and software, such as the touch bar capabilities of Macbooks and so on.

When to use Electron

There are many different scenarios in which we can use Electron for building desktop applications. Some examples include:

Creating a GUI for a Node app. Suppose you want to create an interface for your existing Node CLI application, then Electron can help.
Building an application with advanced permissions, like FileSystem. Applications like text editors cannot work without these permissions, and Electron offers solutions for this.
Building a small application that lives in the user's menu bar or the system tray to always run in the background, something that can be opened by a global shortcut.
Building an app that works offline.
Better User Experience (UX) - offer a native app instead of a web page.

Popular Electron Applications

popular electron apps

How does it work?

node chrome Electron is based on Node.js and Chromium. From Chrome, we get HTML5 support, V8 engine, GPU acceleration, and Blink (the rendering engine). From Node, we get stuff the browser cannot do like FileSystem access and native modules that are compiled C and C++ programs.

In an electron application, the client-side code has all the same privileges as the server-side code, so it can directly make third-party API requests.

electron workflow

Electron Process Model

In the package.json file, we define the main file, which is executed first when we start the application. The main.js file creates an application window, or a browser window instance, to run web pages. The main.js file will spawn the Main Process. The web page runs its processes known as rendered processes.

Advantages of using Electron

Automatic Updates enable apps to update themselves automatically. The easiest way is to use Squirrel, which describes itself as server-driven updater for native apps, or autoUpdater module of Electron.
Native Menus allow developers to create native application menus and context menus, which makes the application look-and-feel similar to the OS theme.
Crash Reporting monitors the app, and if it crashes, sends reports to a remote server.
Debugging and Profiling collects tracing data from Chromium to find performance bottlenecks and slow operations. Debugging is possible through the option openDevTools() where you can open Chrome Dev Tools.

Getting Started with Electron

Make sure you have Node and NPM installed. Download Node Download NPM To check the installation status:

# to check if you have Node installed type this command in terminal
node -v
# to check if you have npm installed
npm -v

Project Structure

A basic electron app has the following structure:

your-app/
├── package.json
├── main.js
└── index.html

Run npm init. npm will guide you through the process and will create a package.json file.
Add this to scripts inside package.json.

"scripts": {
    "start": "electron ."
  }

Install electron using npm install --save-dev electron.
Create files.

Electron Development

A simple main.js file might wait for the application to be ready and open a window:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Finally, the index.html is the web page you want to show:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Running your app

You can try your app by running npm start from your application's directory.

Conclusion

Every technology has some "drawbacks" or "disadvantages", and Electron is no exception; some of these can be ignored depending on your application. Be sure to evaluate these before you proceed:

Application Size: Since Electron uses Chromium and NodeJS, the application size is quite big.
Memory Usage: Chrome and Chromium are known for consuming a large amount of RAM and CPU. If your target is low-end devices, then Electron may not be the best framework.

Happy Hacking!!