An Overview Of The Architecture Of Electron.js

When it’s about developing apps for desktops, Electron.js is the most recognized and widely used framework. What does its architecture incorporate? What’s under the hood of Electron.js? This topic aims to unearth these aspects.

Over the last few years, more and more developers have been using JavaScript in the realm of web browsers. They combined it with frameworks and libraries like Vue, Angular, and React. In the same way, JavaScript crossed the boundaries of web browsers with React Native, Node.js, and Deno.

One such framework is Electron.js, and it’s one of the most preferred frameworks among developers for cross-platform desktop app development. Since the day it came out in 2013, Electron.js has been growing consistently. A few of the most recognized and widely used desktop apps created using this framework include Twitch, VS Code, and Slack.

How it works

So, how does an electron.js application development company use the framework? It embeds Node.js and Chromium in its binary, which allows web developers to create desktop apps without writing native code. Electron.js leverages a multi-process model comprising of the renderer and main processes. This approach is in tandem with the Chromium browser.

Every app’s window is a render process that isolates code execution at the window level. The primary process is in charge of the app’s lifecycle management, render process or window management, and native APIs, such as notifications, tray icons, and system menus.

Each app has one main process, as well as a render process with a variable numerical value. Developers can use JavaScript code execution for the render processes and can hide them without a UI.

Before moving on to the next phase, here’s an important piece of information for you. Electron.js isn’t the only option you have at your disposal for building cross-platform apps for desktop devices. Many other alternatives exist, and they don’t require too many resources. They also boast of lighter executables.

However, none of these options have learning resources or community sharing. They aren’t as popular as Electron.js, either.

Figure 1

Initiating Electron.js

It’s best to delegate your desktop app project to an electron application development company. However, if you have an in-house team, its members shouldn’t have any trouble getting started. After all, the knowledge of JavaScript and Node.js is transferable.

Electron.js comes with a recognized language and abstractions. These two things can reduce development expenses and the time to market. In short, Electron provides the same features for desktop app development that React Native offers for mobile app development.

This framework can even manage the creation and deployment of application updates. As a result, it becomes easy for your developers to keep all cross-platform solutions synced. They do it by loading assets remotely at runtime and launching auto-updates.

Then again, advantages and disadvantages go hand in hand. For all the benefits possessed by Electron.js, it comes with a few trade-offs. It has the environments of Node.js and Chromium, and it causes an app created using Electron to utilize more resources. The same thing doesn’t happen if your developers implement their native counterparts.

Furthermore, Electron isn’t devoid of challenges in terms of app performance and developer experience concerning the architecture.

The tradeoffs

This section will cover the high-level architectures of a few fictional software solutions differing in terms of complicatedness. You shouldn’t mistake this portion of the write-up as a warning sign that you shouldn’t use Electron.js. It’s just a representation of what you can achieve with electron.js app development services.

Low-level complications

In the beginning, you should think about an app with low levels of complications. This fictional app will involve packaging a webpage in the form of a desktop solution.

Numerous businesses provide desktop versions of extremely popular web-based apps they create.

The features

• The desktop app and web app will share the code.
• Both will share the update cycle.
• Both apps will load similar assets and render them using Chromium.
• As long as it’s applicable, the backend will remain unchanged.
• The backend access process will be the same for both desktop and web apps.
• The features will depend on browser support.
• Your developers will use the standard tooling for web development.

Medium-level complications

When it comes to applications having medium-level complications, Spotify is the perfect example. It’s an app designed for streaming music that offers offline streaming support through a local cache. An app for desktops can use Electron.js to create a layer of local cache.

While low and medium-complexity apps can complement web apps, there’s a difference – the ability to offer offline support.

The features

• In the UI layer, most of the code will be shareable between the apps designed for the web and desktop.
• The app designed for desktops will have an implementation of a local cache. It will intercept all requests from the backend, fill the cache, and serve the results when offline.
• Your providers of electron.js app development services will use high-level APIs to check whether the app is offline or online.
• They won’t share the update cycle between the desktop and web apps necessarily. The desktop will generate the UI from static files through its offline UI and build a custom request layer using the cache.
• Your developers can use the standard web development tools but not with the custom request module. They must develop and adjust it for Electron.js.

Also Read : How To Use Electron To Build Multi-Platform Desktop Applications?

High-level complications

For high-level complexity, batch-image processing applications like Sharp should do the trick. Such an app has to be capable of processing hundreds and thousands of images to operate fully offline.

Now, offline applications differ significantly from the ones described above. The usual backend workloads, such as image processing, will execute within the framework by building an offline application.

The features

• Your developer team will customize most of the code for the desktop application.
• The app will have a separate release cycle of its own.
• The backend will run within Electron from a render process.
• The developers can resort to conventional web development tooling, but their choice will depend on the defined architecture.
• They may have to use native modules, including image processing, database access, or machine learning.
• Low-level API access from Electron.js may be necessary from several processes, particularly for IPC or interprocess communications.

Proposing an enhanced architecture

When it comes to the problems associated with offline applications, such as roundtrip communication between the render processes, performance degradation, and the experience of the developer, a specialized architecture will be necessary.

If you hire dedicated developers with in-depth expertise in Electron.js, they’ll propose the following pillars on which they’ll build the architecture.

Figure 2

• They’ll extract the code shared between the backend and frontend into one module.
• As the UI code is agnostic to Electron, they can leverage the best practices of web development.
• They’ll build the page routing and UI using a centralized app state and controlled components.
• The backend will run separately using a process based on Node.js.
• The modules of the front-end and backend will communicate by passing messages.

The modules

Here’s a description of all the modules.

Shared module

The purpose of the shared module is to share the code and types allocated by both the backend and front-end modules. It lets your developers create both modules separately while sharing the code and types relevant to the domain.

The features

• It will have a TypeScript codebase.
• The typings for message-passing communication will contain message handlers and payloads required in both the backend and front end.
• It will have the domain entities and models.
• It will share utilities like event reporting and logging.

Backend module with Electron

The backend module will have the backend codebase, along with the setup code of Electron.js. The long-running operations and the business logic will run in an entirely different Node.js process to ensure the UI doesn’t have to deal with the brunt of performance degradation.

The features

• It has a TypeScript codebase with access to the shared module.
• The backend will run as a forked Node.js process that’ll improve performance standards for computationally expensive and long-running tasks.
• It provides access to the native dependencies.
• It performs a pre-build step that matches native dependencies with the version created using Electron.js.
• It contains the necessary configuration of Electron and packaging scripts.

Front-end module

The front-end module is in charge of managing everything associated with the UI of the application. It has the animations and components of the app except for the business logic. Electron.js will serve the same through generated static files.

The features

• It has a TypeScript codebase with access to the shared module.
• It uses React Native for building the UI with a predesigned template.
• For the state manager, it’ll use Redux. It will define the render state of the UI deterministically.
• It will communicate with the backend by passing messages. The front-end will expose a message handler that’ll look for messages from the backend and modify the Redux store appropriately.
• It will develop components in isolation using Storybook.

Conclusive statements

If you’re going to hire dedicated developers, you should go for Electron.js specialists. After all, this framework is the best for developing cross-platform applications for desktops using various web tech stacks. Despite being relatively easy to use for low-complexity solutions, developer experience and performance will turn into setbacks once the complexity increases.

The architecture proposed above by the experts from Moon Technolabs aims to offer an all-inclusive conceptual foundation for complicated applications. The developers you hire for your project may have to extend it based on the use case. However, it should be enough for various types of desktop applications.