Introduction to Building Desktop Applications With Electron
In this electron.js tutorial, we'll go through the fundamentals of Electron and create a sample application to demonstrate some of the features.
Join the DZone community and get the full member experience.Join For Free
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
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:
- 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.
A Node.js environment is where an Electron.js application starts, where all native functionality interaction occurs.
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.
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.
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).
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.
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
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.
Opinions expressed by DZone contributors are their own.