What is the Electron?
Electron is an open source framework for creating cross-platform desktop applications powered by web; that is: HTML, CSS and JavaScript; by being integrated as a Node module, we can use all the power of Node for our application; components such as database, Rest API, CSS frameworks such as Bootstrap or Tailwind and much more, we can integrate it into an Electron application.
It is developed and maintained by GitHub and is the graphical framework behind many very important open source projects today such as Atom, Visual Studio Code, Discord and Whatsapp.
About Electron
Electron's secret is a combination of two processes; the main process and the renderer process.
- The first process, which is the main process, is a Node.js process; This process has access to several Electron.js APIs with which we can communicate with the Operating System.
- The second process is the renderer process which uses Chromium; This process has a Node.js included and with this, access to all its modules.
Chromium, an open source project behind the Google Chrome browser, and Node.js, a JavaScript runtime based on Chrome's V8 JavaScript engine.
Electron uses Chromium for the frontend and Node.js for the backend. It provides a wide set of interfaces or APIs with which to access the operating system and with which they allow us, developers, to create cross-platform applications that share the same HTML, CSS and JavaScript code.
In short, you can see the main process as the server, in which we have connections to the database and access to the operating system, and the renderer process, the client side, in which we build the screen so that the end user can interact; It is important to note that we can communicate both processes directly.
Electron.js is a web framework with which we can create cross-platform (non-native) desktop applications that work on Windows, MacOS and Linux, with a web wrapper using JavaScript, HTML and CSS and without the need to have experience in native development.
Electron.js works through two processes:
- The main one, which is a Node process, the application itself, in which we have access to some modules provided by the Electron.js API (some that are used to communicate with the Operating System, for example, creating cross-platform menus .
- The renderer, which is a Chromium process that additionally has a built-in Node.js and access to all its modules, from this process, we can develop the UI of the application.
Guide to take the first steps with Electron.js
Electron.js is a fascinating and interesting framework if you want to create desktop applications using all the power of Node.js; as a first point, let's start talking about how electron works:
¿Cómo funciona el Electrón JS en la creación de aplicaciones de escritorio para Mac y Windows?
The next step is to create a project:
Before starting to develop, as we mentioned before, Electron.js is web technology, specifically JavaScript, therefore, having the developer console active is essential:
Activar la consola de desarrolladores en Chrome (Debug) de una ventana en Electron.js
Once the project is created, we must know how to create our first components, specifically the re-rendering process and main process:
Let's start by creating our first applications in Electron.js:
Electron has a very interesting API to work with menus:
Finally, Electron is a framework that stays up to date, so learn how to update the framework:
For many developments, it is important to enable integration with Node, this way we can use Node from the re-rendering process:
Now knowing how to create options for our menus, it is a good idea to know how to create keyboard shortcuts to be able to execute functions based on key combinations:
Being able to communicate the main process with the website is essential to guarantee the correct integration of our application, instead of making axios requests to communicate both processes, we do it directly:
As the next step, we will generate our application for production:
Finally, we have several tutorials where we create a reduced app from a list of elements:
Inicializar listados entre el proceso principal y el proceso de renderizado en Electron JS 16
Course and Book to master Electron.js
In this book and course, we are going to learn how the framework is formed, its API and what it provides us, the basic characteristics that allow us to develop with this technology together with other web technologies to have scalable applications using all the power of Node together with Electron.
These guides are intended to get you started with Electron.js; with this, we are going to propose two things:
- The objective is not to know 100% Electron.js, or from zero to expert, since it would be too big an objective for the scope of this guide, if not to know its ecosystem, what it offers us and how it works based on several examples and/or small applications with limited scope.
- It is assumed that the reader has at least basic knowledge of the JavaScript programming language, as well as web technologies such as HTML and CSS and of course Node.js. These are only some posts that are available and you can see them all. The posts in the full list: