Introduction to Building Desktop Applications With Electron

If you're anything like me, you're a big fan of JavaScript and its ecosystem, and you've been utilizing it to create excellent online apps using frameworks like React or fast web servers with NodeJS. You now want to create a desktop application but don't want to learn a new programming language, or you want to reuse as much as possible from your previous web projects. It is when Electron comes into play to save the day.

Using Electron, you can use HTML, CSS, and JavaScript to create desktop applications. There are numerous complaints against Electron on the internet: poor performance and frequent low-quality apps; however, don't blame the framework; Electron is robust and may be performant. Many popular applications today are built on top of it.

But why do so many people speak so vehemently against it? The issue begins with the apps and how people interact with Electron. Moving a web application to Electron entails pasting your old code into an Electron container for many people. Is it a bad idea to do this? Maybe not, but you're not making the most of Electron's power, and you're simply switching from one browser tab to another for an independent application.

What can we do better? In this electron.js tutorial, we'll go through the fundamentals of Electron and create a sample application to demonstrate some of its features.

Specs for building an Electron App

Electron.js is an open-source framework for creating apps using web technologies such as HTML, CSS, and JavaScript. As a result, developing desktop apps is no longer limited to C++, C#, or Java developers, as web developers may now use their abilities to deliver industry-standard desktop software.

Web developers can wrap their existing web apps with Electron.js to create desktop apps and generate installers for Windows, macOS, and Linux operating systems. They use a mixture of Chromium (the open-source version of the Google Chrome browser) and the Node.js JavaScript engine.

GitHub maintains Electron.js, making it a reliable project backed by a solid team of engineers.

Why Should You Use Electron.js?

Before Electron.js, if an application wanted to run on two or more different desktop operating systems (for example, Windows and Mac), it had to be developed individually for each platform. It uses platform-compatible languages such as C# or Visual Basic for Windows and Objective-C for Mac. 

If the developer wrote cross-platform desktop software in Java, the user would need to install a Java runtime on both platforms to use the application.

Electron.js, on the other hand, can produce installers for all platforms from a single codebase, eliminating the need for installation. 

As a result, a single development team can develop an application for specific platforms. Another significant benefit is that if you can construct a website with Electron.js, you can build a desktop program; therefore, existing web developers/web development teams can quickly transition to desktop software developers.

Building an Electron.js Application: Prerequisites

To start building apps with Electron.js, you'll need the following items:

• HTML, CSS, and JavaScript are all required.
• You have Node.js installed on your computer.
• Node.js familiarity is needed.

Structure of an Electron.js App

Electron.js is made up of three primary components:

1. Chromium is part of the Electron.js stack that produces and displays web pages. Web content is rendered in Electron.js's Renderer process (more on later). Thanks to the Chromium environment, you have access to all browser APIs and development tools, precisely like you would in a regular Google Chrome browser.

2. Node.js: It is the Electron.js component that offers you access to system features. Electron.js operates Node.js in its Main process allowing you access to everything Node.js has to offer, including filesystem interaction, operating system interaction, and more.

3. Custom API: It allows you to do activities like building and showing a context menu, displaying desktop alerts, working with keyboard shortcuts, and more to enable developers to construct standard desktop experiences and interact seamlessly with native functions.

The Renderer and Main Processes

The Main and Renderer processes are the two types of processes that a running Electron.js project maintains.

Main Process

A Node.js environment is where an Electron.js application starts, where all native functionality interaction occurs.

Windows Management

The major goal of the main process is to use the Browser Window module to create and manage application windows.

The BrowserWindow class produces an application window that loads a web page in a separate renderer process for each class instance. Using the window's web contents object, you can interact with this web content from the main process.

The Lifespan of an Application

Electron's app module, which is part of the main process, also controls the lifespan of your application. 

Native APIs

The main process adds custom APIs to interface with the user's operating system, extending Electron's features beyond simply a Chromium wrapper for web resources. Electron exposes several modules that manage native desktop features, including menus, dialogue boxes, and tray icons.

The main process is in charge of producing web pages. It accomplishes this by establishing a new Electron.js Browser Window object, and it makes a new web page with its Renderer process. More than one web page can be created by the Main process, each running in its Renderer process.

Electron.js apps typically start with a default web page as the app's launch screen. If your program requires it, you can add more displays.

Renderer Process

It is in charge of its web page and is entirely separate from the other Renderer processes and the Main process. As a result, if one Renderer process dies, it does not affect the other Renderer processes. By removing its BrowserWindow instance, a Renderer process can be terminated from the Main process.

In the rendering procedure for each open Browser Window Electron, the program launches a separate renderer process (and each web embed). As its name suggests, a renderer is in charge of rendering online content and should behave according to web standards (insofar as Chromium does, at least).

As a result, within a single browser window, all user interfaces and app functionality should be created using the same tools and paradigms you use on the web.

Although it is beyond the scope of this article to cover every web requirement, the bare minimum to know is:

• The renderer process starts with an HTML file as its starting point.
• Cascading Style Sheets are used to add UI styling (CSS).
• JavaScript code that can be executed and added using this method.

The Renderer process access browser APIs only, such as the window and document objects out of the box. The Renderer process is nothing more than a running Chromium browser instance. It may, however, be set to use Node.js APIs like process and map. The primary process and the renderer process have a relationship (es)

The Renderer and the Main Processes Communicate

In an Electron.js application, you'll frequently wish to access native functionality in reaction to events, such as a user hitting a button. Native functionality cannot be accessible directly from the web page since the Renderer, and Main processes are isolated.

Electron.js makes this feasible by providing an IPC (Inter-Process Communication) channel that allows the Renderer and Main processes to communicate.

People can emit events from one process and listen to the others using the ipcMain and ipcRenderer modules for the Main and Renderer processes, respectively. It can also pass data from one method to the next.

Wrapping Up

Electron.js is a revolution in app development since it empowers web developers to enter the native app development field with their existing skillset.

You've learned the following in this electron framework tutorial:

• What is Electron.js, and why should you use it?
• An Electron.js project's structure and inner workings
• The requirements for creating an Electron.js project, as well as how to make one
• In your Electron.js projects, how to exploit native platform capabilities

If you need to create a desktop application in the future, I recommend using Electron, especially if you're coming from JavaScript and have some code you can reuse.

Keep in mind that Electron can be a fantastic tool if utilized correctly. Remember that while it appears to be web, it is not, and you will need to make some particular considerations for it to work and hire the best electron.js development company.