One of the concerns when developing a desktop application is the operating system on which it will run, as there are fundamental differences between them. The Electron framework offers a simpler way to develop cross-platform applications and solve this challenge. Electron allows you to use all the resources of a web application , such as the numerous JavaScript frameworks available, including Bootstrap and React . Therefore, it is worth understanding how this technology works. What is Electron? Electron is a cross-platform framework developed by GitHub . The first version was developed in 2013 which allows development of desktop applications using HTML,CSS, Js and other technologies used in custom software development services. To do this, Electron uses Chromium, an open source version of the Chrome browser. The idea is that the developed application runs on it as if it were a web application. In addition, Electron also uses Node.js , a component that offers additional features to access internal operating system functions, such as allowing access to directories and files. To ensure device security, common web applications cannot use operating system resources. This is a way to protect your computer from improper operations by malicious websites, for example. Electron, however, allows this interaction. Because of this, it is a tool that can be used to build desktop applications. It is important to say that Electron allows the generation of a distribution package , that is, the entire application developed is compiled and transformed into versions to run on different operating systems, including: Windows, Linus and macOS. How did Electron come about? Discover the story! Electron appeared in April 2013. The creation of this framework is attributed to Github , but specifically to Cheng Zhao, an engineer on the team. The basic objective of the project was to create a platform capable of bringing together technologies such as HTML , CSS and Javascript in a single cross-platform editor. Back in the beginning, Electron was called by another name: Atom Shell. The platform became open source in May 2014, under the MIT license. Electron js is currently maintained by the OpenJS Foundation , an organization that aims to support opensource projects based on Javascript, such as Electron. Over time, Electron became even more popular. Several well-known applications today were developed with Electron, such as Skype, Twitch or the popular Whatsapp. You can see the full list of applications developed with Electron here . Understand the Electron architecture! The architecture of an Electron project is made up of three structures: main process, renderer process and communication between these processes . See the image below: 1. Main process The Main Process is the main, single file. Through BrowserWindow instances, it can create application windows. To define the Main Process, a package.json file is first created and the Main Process is defined in the main property. 2. Renderer process The Renderer Process is done through Chromium. Each Electron desktop window, that is, each web page, is rendered in its own process. 3. Inter-Process Communication and Remote Procedure Call It is through RPC and IPC that communication is made between the main process and the renderer process. In other words, between .js parts and .html parts, already a result of the rendering process. To compare these processes, look at this table:
What is Electron for? 4 Applications! As we said, Electron is used to develop applications for desktops , which can either access local computer resources or use external data using APIs — Application Programming Interface . Therefore, it is a technology that offers countless possibilities for developing different types of applications. Check out some tools that were developed with Electron below. 1. Slack Slack is a chat tool used by many companies for communication purposes. File sharing, voice and video calls, and much more features are provided by slack. Furthermore, it allows integration with various applications , such as Zoom , Google Drive, among others. 3. Hyper Hyper is a command line interface for Windows, Linux and macOS platforms. Its objective is to offer a more beautiful and friendly interface to perform activities such as accessing remote servers and executing various commands. 4. Atom.io Text editor developed by GitHub is Atom.io. It has numerous features such as installation of themes and plugins. One of its applications is for editing source code and offers support for several programming languages, such as JavaScript, C language , Ruby and much more. What are the advantages of using Electron? There are several benefits to using the Electron framework. Check out some of them below. Enables the development of cross-platform applications Any application developed with this framework will be a cross-platform Electron app. In practice, it doesn't matter if the software development services is in a Windows environment, because when creating the distribution package, we can indicate the platform on which we want to use the system . Electron is an open source framework One of the advantages of using Electron is that it is an open source framework . This means that there is no need to pay for a usage license, which contributes to reducing development costs. It also has a large community of developers who help with the development of the tool, as well as a forum to exchange experiences and clarify doubts. Offers different forms of distribution The developed applications can be compiled for distribution into packages using different available resources, such as electron-package or electron-builder , and installed using package managers, such as NPM. Furthermore, application updates are also carried out simply and quickly. Uses web application technology Applications developed in Electron use HTML, CSS and JavaScript. Therefore, it is possible to use many features of these tools in desktop applications, in addition to being better known among programmers . According to StackOverflow research from 2020 , JavaScript is used by 67.7%, while HTML and CSS are used by 63.1% of people interviewed. Develop native applications To use applications developed in Electron, you do not need to open a browser and access a specific website. Instead, they are installed on the computer as an Electron app and can be accessed from the Windows taskbar or the system on which it is installed. What are the disadvantages of Electron? Despite the numerous advantages, Electron also has its negative points. First, it's heavy. That is, it demands high memory and storage usage . Another factor is related to security . Basically, Electron guarantees a high level of control for the developer, which can make everything even more secure, or vulnerable, depending on the level of knowledge of the person in question. Furthermore, due to the relationship with Chromium, when running on an older version of it, security gaps can be opened between this old version and what has already been fixed in the new one, which can be exploited by attackers. Finally, a problem with Electron is its generic appearance and behavior . In general, Electron does not allow for a diversity of visual experience between platforms, that is, it tends towards standardization.
Discover some tools to use with Electron! The platform also has several tools that make the developer’s work easier. Here we will talk about some of them: Electron: relates to the installation of pre-built Electron binaries. For this, npm is used. Electron compile : allows real-time compilation, that is, without pre-compilation. Electron packager: command-line tool that packages (zip) files and distributes them. Devtron: is the official DevTools extension. Devtron is used to inspect, monitor and debug the application. Among its features are graph display, IPC monitor, event inspector and App Linter. Spectron : this tool works as a testing platform. To do this, use the Chrome Driver. Libraries to use with Electron: Angular, React, JQuery, among others! Furthermore, Electron also allows the use of several very popular libraries , due to their Javascript base. This variety of libraries provides the developer with a multitude of resources! Angular, React and JQuery are some of the possibilities . Without a doubt, it's worth getting to know React and the main Angular libraries better Conclusion As we have seen, Electron is multiplatform, practical and versatile, presenting several advantages. Now that you know what Electron is and all the possibilities that this open source framework offers, you can now explore the entire universe of electron js and become an even more complete developer!