Electron.js is the most popular framework for desktop app development. Will it be a good fit for your project? Learn more about its features, architecture, and look at a sample project (or even code it by yourself).
If you came here looking for crucial information about Electron.js, this article won’t disappoint you. You will learn:
<span class="colorbox1" fs-test-element="box1"><p>Important: It is basically a blend of two incredibly popular technologies: Node.JS and Chromium.</p></span>
It was founded on 15th July 2013, intended to make the cross-platform development easier for the creation of “Atom”. It was initially known as Atom Shell. Have a look at the image below to get a more precise idea about the journey of Electron.js.
Assuming the above definition have solved your query on what is Electron.js, let’s move onto its features.
Any web application you have written can run on Electron.js. Similarly, any Node.JS application you write can utilize this technology.
It also has the facility of auto-updating and crash reporting on Windows and Mac with Squirrel. The crash reports are submitted to the remote server for further analysis. The content tracing activities like debugging and profiling are looked after by Chromium.
The hard and tedious parts of creating a desktop application are the simplification of packaging, installation, updating, providing support for native menus, notifications, dialogs and in the end optimizing the app crash reports.
Electron JS pretty much takes care of all these essential steps so the user can focus on the core of his or her application.
When we are writing an application for a web browser, we are basically writing code that will be executed on someone else’s computer. We are not aware what browsers our target users will be using. It can be the latest version of Chrome or an outdated version of Internet Explorer.
Hence, we are not left with much of a choice but to be conservative in the technologies that we choose to implement and the kind of code that we need to draft.
When you build your applications with Electron, you’re packaging a particular version of Chromium and Node.JS, so you can rely on whatever features are available in those versions.
Since with Electron you can build a desktop app with web technologies, most likely your current team of developers will handle that challenge. You can use available talents well. That also speeds up time to market, because you don’t need to adjust your code to various systems and their versions.
In most cases, Electron will be a good choice from a business point of view. And tech decisions should always be made with the business perspective in mind. Using the business context to make technological decisions it’s a first step to break down the boundaries between IT and business, and simply build better products.
After getting to know what Electron JS is and carefully analyzing its architecture, let’s understand how it works.
<span class="colorbox1" fs-test-element="box1"><p>Thing to remember: Electron applications have two mandatory processes, the main process, and the rendering process.</p></span>
Each process has a different role to enact. Bootstrapping the application is performed by the main process. It can withstand other application lifecycle events like starting up, quitting, preparing to quit and other lightweight tasks like going to the background and coming to the foreground.
On the other hand, the rendering process is spawned by the main process. The render processes will display the UI of the application. Each process takes advantage of Chromium’s multiprocess architecture and runs on its own thread.
Let’s discuss these processes by writing a sample Electron JS application.
Create a new folder in your file system.
To create a basic application you need three types of files: package.json, main.js, and index.html
To create the package.json file with `yarn init` command:
This JSON file points to the app’s main file and lists its details and dependencies.
Now, in the package.json file, change the main to main.js file and add the following script:
Now it can be started by:
Because you have not added any code yet, you will get this:
Now it’s time to add code into the files and create an application of Hello World.
Add the following script to the main.js file:
This file starts the app and creates a browser window to render HTML as well as the app’s main process. It is responsible for the integration and interaction with the operating system GUI.
Create the index.html file:
Index.html is a web page to render. This is the app’s renderer process.
Once you have created your initial main.js, index.html, and package.json files, you can try your app by running ‘yarn start’ from your application’s directory.
When you run your files, the app window pops up and shows Hello World.
It is a simple application, and the application exits when you close the window. Creating this application will give you a more practical idea of what Electron JS is.
These are the tools Electron.js needs to build an application.
On 20 December 2018, Electron version 4.0.0 was released. Check out its official website at electronjs.org. Here are some future ideas for desktop Apps using Electron.js.
Hope we helped you understand what Electron JS is along with its features, implementation and its fundamental tools.
Overall, Electron.js takes care of most of the dynamic applications which use our browser as a platform to deliver their embedded features and help us connect with a wider audience. After all, building and delivering the right applications that can help the users get their job done is the principal purpose of any open-source framework.
Get one email a week.
Read it in 60 seconds.
Become a better tech leader.
No previous chapters
No next chapters