JavaScript is among the most common programming languages. The fact that it can be used for both backend and frontend development has made it a darling for many people.
JavaScript has many libraries and frameworks that expand its use cases beyond vanilla (plain) JavaScript.
Electron.js is a powerful open-source framework that gives web developers the ability to develop native applications with their existing skills. This article will teach you about Electron.js and how it can be used to power your next amazing idea.
Electron JS
Electron JS is a framework that developers can use to create desktop applications using HTML, CSS, and JavaScript. Electron JS was created and is maintained by GitHub.
The framework is a blend of Node.JS and Chromium, allowing users to maintain one JavaScript codebase and develop cross-platform desktop applications that can work on Windows, macOS, and Linux.
The story of Electron.js started in January 2013. The original idea was to create a cross-platform text editor that could work with JavaScript, HTML, and CSS.
Electron.js was originally named Atom Shell and made open source in 2014. The project was later renamed Electron in April 2015, and its first API was released in 2016.
Features of Electron JS
- Compatible with all JavaScript libraries and frameworks. Vue.js, Angular, and React.js are just examples of JavaScript frameworks that developers can use together with Electron JS. This compatibility makes it easy to utilize the features/ functionalities of these libraries and frameworks when creating an Electron app.
- Reusable framework. Catering to different customers’ needs can be expensive. The good thing with Electron JS is that it can be used for both web and desktop applications. The single codebase means it can also be used on different operating systems.
- Has access to native APIs. Developers working on Electron JS have access to native APIs of the operating systems they are operating on. Developers can thus create desktop apps that have similar access to low-level functionality, like displaying notifications.
- Supports web technology. Electron JS is adaptable, as developers don’t need to learn a new programming language to develop applications. It thus means that if you understand a certain language pack that you already use to create web applications, you can also use it to create a desktop app.
- Code and app management. You do not need to maintain different teams to maintain apps and code for different operating systems. Electron JS allows you to maintain the same codebase for Linux, Windows, and Mac operating systems.
- Easy build/ deployment. The Electron package manager helps developers package into their respective packages. You can thus release a Linux, Mac, and Windows desktop app from the same code base using this package manager.
Architecture Electron JS
Electron’s architecture is very similar to that of a modern web browser as it inherits its multi-process architecture from Chromium.
Electron’s architecture comprises V8 JavaScript Engine, Node.JS, and Libchromiumcontent.
- Node.JS– an open-source JavaScript runtime that runs on the V8 JavaScript engine. Node.JS enables developers to run JavaScript outside a browser window. Node.JS also allows users to execute raw JavaScript code through its interactive shell.
- Libchromiumcontent- a Chromium rendering library that is open source and maintained by Google Chrome. Chrome has a minimalistic user interface and uses blink as the layout engine and V8 as the JavaScript engine.
- V8 JavaScript Engine– an open-source JavaScript engine written in C and JavaScript and developed by Google.
#1. Node.js
To get started with Electron JS, you need to have Node.js installed on your local machine.
Select the right node version depending on the OS you are running on your computer.
Check if Node.js has been installed correctly by running these commands;
node -vnpm -vIf installed correctly, these commands will show the node and npm versions, respectively.
#2. Command line
How you access the command line will depend on your operating system.
- Linux will depend on the distribution.
- Windows: PowerShell or Command Prompt.
- macOS: Terminal.
Some code editors, such as Visual Studio Code, come with an integrated terminal.
#3. Code Editor
You need a code editor to write your Electron JS code. Visual Studio Code is among the best you can try out.
How to install Electron JS
Step 1: Create a node.js project.
Use these commands to get started;
mkdir my-electron-app && cd my-electron-appnpm initThe npm init command will prompt you to fill up some fields, such as the app’s name, entry point, and description.
You can pick the default name of your folder as your app name. However, remember to set the entry point of your app as main.js.
Fields such as author and description can take in any value. Your package.json will look something like this once you are done with these steps:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}Step 2: Install electron
Use this command;
npm install --save-dev electronStep 3:Add ‘start’ command to your package.json
{
"scripts": {
"start": "electron ."
}
}Step 4: Start your app
Use this command to start your app in development mode
npm startElectron JS Working Process
We will continue building the app from the set-up we just made above. An Electron application has two types of processes; main and renderer.
The Main Process
The main script is the entry point of any electron app. The app will run in a full Node.js environment. Electron will look for the main script in the package.json file you already configured during app scaffolding.
Create main.js in the root folder to initialize the main script. You can do it manually or use this command;
touch main.jsYou can add the following code to the main.js
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});Web pages in Electron can be loaded either from a remote web address or a local HTML file. We will use a local HTML file for demonstration purposes.
Create an index.html file in your root folder. Code for index.html is always provided, but you can have this as your starter code;
Hello from Electron renderer!
Hello from Electron renderer!
👋
Renderer process
Renderer renders web content. Preload scripts come with code that executes in a renderer process before the web contents start loading are needed.
Create preload.js on your root folder and add this code;
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})Run the development server using npm start, and this is what will be displayed
Examples Apps: Electron JS
#1. Slack desktop app
Slack is one of the most popular remote collaboration tools. Users can send and receive messages, make calls, and share files using this app. Slack has both web-based and desktop apps on Mac, Linux, and Windows operating systems. Slack’s desktop app uses Chromium engine and Node.js to render high-quality code.
#2. WordPress desktop app
WordPress is the largest content management system. The fact that you can launch a website even without basic coding skills has attracted many users. WordPress can be accessed over the browser and through desktop apps on Mac, Linux, and Windows. The revamped WordPress desktop uses Electron JS.
#3. WhatsApp desktop app
WhatsApp is among the most popular messaging apps in the modern world, as it is used by over 2 billion people. WhatsApp was originally designed as a mobile app but has now transitioned to be a cross-device platform. WhatsApp desktop utilizes Electron JS and is available on major operating systems.
#4. Visual Studio Code
Visual Studio Code, owned by Microsoft, is among the most popular code editors. Visual Studio Code supports HTML, CSS, and code written in various programming languages such as JavaScript, Python, PHP, Java, and Ruby, to mention a few. The desktop app, created using Electron JS, is available for Windows, Mac, and Linux operating systems.
Learning Resources: Electron JS
#1. Electronjs Official Documentation
Electronjs documentation is created and maintained by Electronjs.org. You will learn what Electron JS is, how to set up your first Electron app and how to build cross-platform desktop apps using various technologies. The documentation is always updated whenever an improvement or a new feature is introduced.
#2. Master Electron: Desktop Apps with HTML, JavaScript & CSS
Master Electron is a paid course on Udemy that introduces you to Electron JS. You will learn how to create desktop apps for different operating systems, such as Mac, Linux, and Windows. Master Electron is also the perfect resource if you want to understand the entire Electron API process.
#3. Electron React Tutorial
Electron React is paid course on Udemy that teaches developers how to create Electron apps using React.js. React is one of the most famous JavaScript libraries and was created by Meta (formerly Facebook).
Wrapping Up
Electron JS is an awesome JavaScript library for creating desktop apps in a modern world where cross-platform apps must be embraced. The fact that you can use HTML, CSS, and JavaScript means that developers don’t have to learn new tech stacks to create such apps. The presence of a large and supportive community is also a plus, as you are always guaranteed support.
You may also explore some best JavaScript frameworks to build a modern application in less time.
