What is Electron.js? | How Does Electron Work

Remember that these points may or may not be essential for your project. Therefore, always evaluate them in the context of what is Electron.js used for and the requirements for your project. Also, remember that the level of severity of these points is highly dependent on what is being made and the requirements - the cons may be utterly insignificant in your project.

A quick look at the architecture

How does Electron work? You can think of an Electron app as a bundle of four things:

(Node.js + Electron + Chromium) + (Your app code)

What is Electron programming? When creating an Electron app, you are writing code for both the frontend & backend part of the app. The frontend side will probably use a UI library (ex. React), and the backend side - just Node.js. These two "sides" do not share context and run on different threads. Communication between the frontend and the backend sides should be done through IPC messaging. Thankfully, it's bidirectional.

Essentially, you are not writing your app code for it to be compiled into an executable app that the user can launch on their computer. Instead, you are writing JavaScript code, that Node.js and the renderer will interpret on the user's computer. As you can imagine, for this to take place, you need to provide the end user with your app code (JavaScript), a Node.js engine, a renderer (chromium), and Electron runtime code. This is what, among other things, Electron does - it packages all of that into a bundle for you.

This is very similar to how a web app works: a browser makes a call to a remote server, requesting the app's files (JS, CSS, HTML, assets), which it then interprets and executes. The only difference is that with Electron, no web server is needed to send you those files; they are prepackaged with the app. User opens up your Electron application -> Node.js, and the chromium renderer interprets and executes the code you wrote.

You can probably already find that that's completely awesome and horrible at the same time. Such an approach to building desktop apps is excellent because you are probably already familiar with the tools and frameworks needed, but also bad because such a strategy provides much overhead in terms of performance and bundle size. I.e., you are packing a whole web browser with your app code. And that is done by every Electron app on the system - each has its own "Chromium+Electron+Node.js" stack built in.

Because an Electron app is basically just a Node.js+Chromium stack, you can use (almost) everything built for those two technologies*. We’re talking about React, Angular, Vue, Material UI, Redux, Bootstrap, or almost any other UI library or toolkit under the sun. This is also true for the backend part - fs, process, node packages, it's all here.

(* "Almost" is not accidental, study the "Native Node Modules" section of the docs for more info on possible problems with packages you may encounter)

Tools for Electron.js developers

Are you still having some questions about what an Electron application is? Then, we’ve decided to recommend to you some resources that will be definitely handy in your work and gaining more expertise:

• Electron.js docs - basic information you must know;
• Electron's docs on Native modules - helpful guide on native modules;
• electron-builder - useful tool for building and packaging your Electron app. You can also take a look at electron-forge, which is an alternative to electron-builder.
• electron-react-boilerplate (erb) - template of Electron application with React & electron-builder that is already provided and configured. It’s an excellent place to start a new project.
• erb's docs on native modules - handy information on native modules from erb
• question regarding electron-rebuild on stackoverflow
• Electron adventures (101 lessons)
• Electron talk - a helpful video for Electron beginners
• Tauri - an alternative to Electron

Conclusion

We hope that you have managed to dive into Electron fundamentals! Although Electron applications have some drawbacks, the framework allows web developers to deploy them on 3 major PC platforms, which means saving time and money.

If you need more information or you want to develop your application using Electron, you can always contact us.