What is Electron.js? | How Does Electron Work

Category:
Software Development
Maksym Kurysh
Android Developer
Java Engineer
Head of Front-End Chapter
Human Resources Manager
Business Development Manager
Head of Java Chapter
Business Development Manager
Business Development Manager
Business Analyst
Business Analyst
Project Manager
Project Manager
UX/UI Designer
IT Lawyer
Chief Technology Officer
Chief Executive Officer
Head of Engineering
Head of Mobile Chapter
Content Manager
Marketing Manager
Head of QA Chapter
Head of QA Chapter
Web developer
Head of Mobile Chapter

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.

Need help with Electron application?
Leave your contacts in the form and get a free consultation from our Technical Specialist.

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:

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.

Axon Development Group
August 1, 2022
Software Development

readers who are obsessed with delivering great customer service.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Expertly curated emails that’ll help you deliver an exceptional customer experience.

Contact with us

Upload file with the file dialog or by dragging and dropping onto the dashed region

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.