What is Electron.js? | How Does Electron Work

If you're interested in web development, you've probably heard of Electron.

To deepen your knowledge, we have prepared this blog post. Here you will find answers to:

• What is Electron application?
• How does Electron work?
• What is Electron programming?

Stay tuned!

What is Electron?

Electron is a popular framework developed by GitHub in 2013. It allows us to create fully-fledged desktop applications using web technologies.

Electron is based on the Chromium and Node.js projects, combined into a single environment. Such a feature allows web technologies to be applied in desktop program development.

What is Electron.js Used For?

Electron is used as a backbone by many trendy and established applications, such as Visual Studio Code, Slack, WhatsApp, Evernote, and Discord.

The killer app of Electron is its support for technologies that are already very well developed, supported, and familiar to developers. So you can build a complete desktop app using Node.js + React/Vue/etc. and having only a slight idea of how Electron works.

Electron.js Pros and Cons

Even though the idea of using web technologies to build complete desktop applications might sound impressive, there are some essential considerations before deciding to use Electron as a framework for your app.

Advantages:

1. Familiarity with the tools. Web developers already have ~80% of the knowledge they need to build a complete desktop application using Electron, even if they have never used it before. This can make the process of developing desktop applications much easier on the business & management side. If you are familiar with building web apps using, let’s say, JavaScript+React+Node.js - you can start building desktop apps using these exact technologies in no time.
2. Excellent support. Because Electron has become so popular, there is a vast amount of documentation, code examples of how Electron works, templates, libraries, answered StackOverflow questions, resolved problems/hurdles developers might encounter, etc., for Electron. Moreover, because Electron uses web technologies under the hood, there is also an incredible amount of surrounding knowledge and support.
3. Speed of development. This characteristic is a bit subjective and situation-dependent. Still, we would argue that building an app using Electron would (usually) be a lot quicker than with some other technology or approach. This, in part, is caused by several different pre-made templates that exist for Electron and a multitude of prevalent web technologies that can be used with Electron.
4. Cross-platform. What is Electron application? You can build the same app for Windows, macOS, and Linux without any native development experience almost painlessly.

Disadvantages:

1. Performance. Electron isn’t particularly fast. Choosing it for building mission-critical apps that might be used on very old hardware might not be the best of ideas. Unfortunately, this can’t be patched, as such behavior is a symptom of the core structure of Electron.
2. Bundle size. The Electron app's size is not the smallest compared to other approaches for building desktop apps. VSCode, Discord & Slack have managed to get their installers to about 80MB in size, with unpacked application sizes much bigger than that (My Slack installation is ~650MB, VSCode - ~300MB, Discord - ~360MB). Once again, this is a symptom of what Electron is under the hood.

Essentially, you are a trading developer- & company-facing advantages for user-facing disadvantages. Notice that all the pros positively affect developers, development time, and company, and all the cons negatively affect the resulting application.

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.