Before the Electron language was released, it wasn’t easy to build cross-platform desktop applications. Developers had to create multiple versions of code for multiple platforms. Currently, most web and desktop apps have similar interfaces. This creates a familiar environment that seamlessly shifts between different app versions. This fact highlights the importance of sharing GUI codes between versions of applications using the same technologies but different operating systems. Electron is one of the most versatile and efficient frameworks popularly used to design a wide range of cross-platform apps.
What is Electron?
Electron (the names Electron.js or Electron JS are also used) is a runtime framework developed by GitHub and used to develop cross-platform desktop applications with HTML, CSS, and JavaScript. The open-source project was initially released in 2013 to facilitate the development of desktop GUI applications using web technologies and combines Node.js runtime and the Chromium rendering engine.
How Electron works
Developers can first write their apps in HTML, CSS, and JavaScript before using Electron to package them with cross-platform technologies such as Node.js and Chromium. Generally, Electron consists of:
- NodeJS: interacts with the OS
- Chromium: the engine that powers various web browsers such as Google Chrome, Opera, Microsoft Edge, etc.
- custom APIs: handle common OS issues.
Electron works with two types of processes:
#1 Main process
Electron is responsible for window management and all interactions with an operating system. It also creates the application’s GUI. This is where everything starts, i.e., the entry point of Electron applications.
The main process creates instances of the “BrowserWindow”; hence it’s used to run web pages. Note that each instance of the “BrowserWindow” can run a web page in its renderer process. If the instance is destroyed, the corresponding renderer process will also be terminated.
#2 The renderer process
The renderer process is used to host the Chromium instance. The renderer process can host one Chromium instance and render the contents. Every renderer process is isolated and only works to render the web page. This means that other renderer processes won’t be affected if a process is terminated. Meanwhile, the Main process can terminate the renderer process by destroying the “BrowserWindow” instance.
It’s impossible for this process to access the operating system features directly. However, it still communicates with the Main process via IPC to perform tasks. The renderer process has access to browser APIs such as document objects and windows.
Why Electron?
Previously, developers had to use platform-compatible languages to develop applications. For instance, Objective-C was used for Mac, while C# was designed for Windows. If you want to use Java for either of these two platforms, you must first install a compatible Java runtime. However, deploying a desktop application compatible with all user machines is important in the modern world. Electron has made it easier to overcome cross-platform complexities because:
- It allows desktop developers to build cross-platform apps. One application can run on multiple operating systems efficiently, e.g., Windows, Mac, and Linux. Developers don’t need to have the skills to develop native applications for particular platforms.
- Building desktop apps is now easier with JavaScript, HTML, and CSS.
- The cross-platform app development allows companies to speed up marketing and use in-house talent to build new web technologies quickly. Electron app development eliminates talent and time wastage.
Electron cross-platform desktop apps
Electron makes it easier and more efficient to develop desktop apps. That’s why various reputable companies have benefited from this framework. if you are keen to explore this framework and its functionalities, here are some of the powerful apps that have been made with Electron.JS:
#1 Microsoft Teams
Microsoft Teams has become a dominant industry player in the office communication landscape. Its popularity has increased significantly from the 2020 COVID-19 pandemic and currently has more than 145 million daily active users. The chat-based collaboration app is ideal for document sharing, online meetings, and other functions that allow users to stay connected anywhere, anytime.
#2 WhatsApp
WhatsApp is among the most popular desktop apps made with this framework. The mobile sensation features amazing emojis and GIFs, enhancing communication, whether privately or for business. Electron.js has been crucial in helping this messaging giant craft its desktop app version. The framework has been used to create great UX, and this allows users to leverage WhatsApp for sending texts and sharing images or videos.
#3 Slack
Slack has changed how work can be done remotely, especially during the pandemic. It’s a versatile and efficient desktop app that’s ideal for workspaces. Slack allows remote employees working for different companies to connect and transfer files between them.
It leverages the Node.js and the Chromium engine to render unique code with Electron. This app takes advantage of Electron.js’s hybrid approach that allows codes to be loaded or executed remotely.
#4 WordPress
WordPress is currently the biggest content management service and controls over 35% of the Internet. WordPress is used by many businesses to place content on websites. However, its functionality depends on Electron’s open-source framework that promotes seamless performance. The desktop app allows users to focus on their service delivery and content without facing distractions from browser tabs.
#5 Visual Studio Code
Visual Studio Code editor from Microsoft is a powerful tool for editing code. It’s popularly used by developers thanks to its low memory footprint and high speed. Electron.js helps Visual Studio Code to create a better desktop experience by highlighting coding mistakes to developers.
Electron app facts
So, is Electron a good fit for your next desktop app project? Well, here are some of the interesting facts about this framework that can be influential in your decision-making process, especially if you want to make an Electron app:
- It’s an open-source framework.
- Electron has a large, mature, and active community behind it, since it’s developed and maintained by GitHub.
- Users can access native menus, automatic updates, debugging, and crash reports.
- Electron apps are sometimes regarded as web applications that run in the Chromium engine. The major difference between them is the architecture: a JavaScript file acting as the controller is the main starting point of an Electron app.
- Chromium displays Electron web content, while Node.js works with the operating system and local file system. On the other hand, the custom APIs work with the OS’s native features.
Advantages of Electron
A developer who wants to create desktop apps using this framework can experience the following benefits:
A single codebase
This framework has a versatile abstraction ideal for developing a native app. Developers can retain a single codebase for handling their cross-platform applications.
Rapid feature delivery
You can build desktop apps using HTML, JavaScript, and CSS since they are easy to learn and use in application development. These web technologies also make creating interactive interfaces easier, and developers have the freedom to customize GUI elements. In addition to that, Node.js’s libraries feature an extensive ecosystem that makes it easier to add native features.
Reduced development time
Desktop application development can be a tedious and time-consuming process. However, the Electron library helps to reduce the time used to develop a native app with web technologies such as CSS, JavaScript, and HTML. It also makes ongoing maintenance easier.
Cross-platform desktop apps are similar to web apps
Electron apps are good alternatives to native apps since they behave like web apps. However, they are different from standard web apps because you can access your computer’s file system files and read/write data.
Mature framework
Electron framework was released over eight years ago and currently has a strong community and wide user base. It’s used by reputable companies to build cross-platform apps.
Hidden issues with Electron
While Electron has an impressive overall framework, it comes with several performance issues, including:
Size matters
There are significant development considerations for this framework. While it significantly reduces the cross-platform app development time, its memory footprint is bigger. Electron apps run on Chromium, which means that every Electron app has its own Chromium instance. Chromium consists of 20 million lines of code, which is almost the size of an operating system. So, installing one app almost feels like installing an operating system on top of another. This means that Electron consumes above-average computer resources such as disk space and physical memory. This will drain your device’s battery quickly.
Limited developer support
This open-source project has limited developer and documentation support. For a better experience, use the native Windows or Mac SDKs.
Is Electron easy to learn?
This open-source framework gives you the necessary window management API that you need. So, there’s not too much to learn, and all you need is good Node.js skills and frontend development skills.
Alternatives to Electron
The Electron language has a lot of pros, but the cons might force developers to seek other alternatives. At some point, DeskGap and Electrino were the main alternatives for creating desktop applications due to the performance issues of the Electron framework. However, they couldn’t effectively compete with the mature Electron framework. Currently, there are two popular lightweight alternatives for Electrone: the Neutralinojs and Tauri projects.
They both use a webview library that utilizes components of an existing web browser for rendering. It basically stands in place of the traditional web browser and you can use it to display documents hosted online. The webview library is used for rendering HTML and CSS instead of Electron’s Chromium engine.
What is Tauri?
Tauri is a toolchain used to create small, fast desktop applications from existing JavaScript, HTML, and CSS. It allows developers to make applications by using any available frontend framework. The secure framework’s core is built using Rust, while the command-line interface (CLI) leverages Node.js. This makes it ideal for creating and maintain major desktop apps.
Developers can use this cross-platform desktop application framework’s JavaScript API to create native features such as dialogue boxes and file handling. It’s lightweight and versatile, hence it can be used to implement native API with Rust and then display it as a JavaScript API via webview.
What is Neutralinojs?
Neutralinojs is a lightweight, portable framework for desktop application development. Neutralinojs is ideal for cross-platform desktop applications that use HTML, CSS, and JavaScript. Apps built with this framework can run on Windows, Linux, MacOS, the Web, and Google Chrome.
Both Neutralinojs and Tauri are similar since they allow developers to use any type of frontend framework to build application GUI. This provides a better way of creating desktop apps with efficient web technologies.
Conclusion
Most web and desktop applications have similar interfaces. This fact highlights the importance of sharing GUI code between application versions using the same technologies but different operating systems.
Electron is one of the most versatile and efficient frameworks that allow developers to easily create cross-platform applications. The reusable framework has performance, enhanced compatibility, and simplified management. Even though Electron apps come with several complexities, such as heavy use of RAM and the CPU, its great profile in creating a multitude of apps that run in different operating systems makes it favorable for the development of cross-platform desktop apps.
