Things we are going to talk about
Desktop Applications in general (why we use them, how popular they are right now)
What is Electron.js
Benefits and downsides of Electron.js
How Electron.js works
Big companies that use Electron.js
Transform React.js app to Electron.js app
Desktop Applications in general
Desktop applications, which could be used on standalone machines only, were the beginning of software applications development.
By definition, Desktop applications are the programs that you download and install on your device. Everything they need to deliver your functionality is stored on your workstation. So, you can access the application through your desktop.
Native desktop apps need separate code bases for each platform on which it will be deployed (Windows, Mac, or Linux). Although some code can be reused across platforms, features such as file system access and the operating system registry can be significantly different. With web apps, those details are managed in the browser; all the developers need to know is HTML, JavaScript, and CSS. Only a single code base is needed. This reduces development costs and reduces the variety of skill sets needed on the development team.
What is Electron.js
The short story of Electron — began in 2013 as the desktop app framework used to build the Atom.io (editor), but was open-sourced one year later. Electron JS uses web technologies like simple HTML, CSS, and JavaScript. It does not require native skills unless you want to do something advanced.
Based on Chromium and Node as a single runtime and app packager for Mac, Windows, and Linux. For long-time it existed as version 1.X but from 2018 it started to grow fast.
It's basically a Node.JS instance that has a stripped down Chromium browser running on top of it for displaying the UI.
Basically, making a "web page" run as a standalone window/app with access to OS features like local file access or clipboard.
Benefits and downsides
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. 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.
Main benefit is it being cross-platform, so you can make one app and deploy it everywhere, and since it uses standardized web technologies (html/js/css), it'll work and look the same everywhere, since it's all rendered via the same Chromium instance.
Part of what makes Electron Apps a good alternative to a native desktop app is the fact that Electron apps behave like Web Apps. What sets them apart is that Web Apps can only download files to the computer’s file system but Electron Apps can access the file system and can also read and write data.
Electron uses Chromium engine for rendering UI. This means that you can get several benefits from this like Developer Tools, Storage Access, etc.
As you all know that Electron Apps run on Chromium, this means that each and every Electron App comes with its own version of Chromium. Even worse, Chromium is made of 20 million lines of code which is nearly the size of a whole Operating System! So it is like installing a whole Operating System on top of others for running a single app! For example a simple “Hello World” app on Electron would need more than 100mb of space.
Who will not like their code to be safe and by safe I mean ‘not getting stolen’. The files aren’t encrypted which means that anyone can get a working copy of the code.
Pros
HTML, CSS, JS (Similar to creating web apps)
Open Source
Developer tools, Storage access, etc..
Cross Platform
Cons
Huge size because of chromium instance
High RAM usage because of chromium instance
How Electron.js Works
From a development perspective, an Electron application is essentially a Node.js application. Electron takes a main file defined in your package.json file and executes it. This main file creates application windows which contain rendered web pages and interaction with the native GUI (graphical user interface) of your Operating System.
As you start an application using Electron, a main process is created. This main process is responsible for interacting with the native GUI of the Operating System. It creates the GUI of your application.
Just starting the main process does not give the users of your application any application window. These are created by the main process in the main file by using the BrowserWindow module. Each browser window then runs its own renderer process. The renderer process takes an HTML file which references the usual CSS files, JavaScript files, images, etc. and renders it in the window.
The main process can access the native GUI through modules available directly in Electron. The desktop application can access all Node modules like the file system module for handling files, request to make HTTP calls, etc.
The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.
The Renderer process communicates with the Main process via IPC to perform GUI operations in a web page. Calling native GUI-related APIs from the Renderer process directly is restricted due to security concerns and potential resource leakage.
The communication between processes is possible via Inter-Process Communication (IPC) modules: ipcMain and ipcRenderer.
The ipcMain module is an Event Emitter. When used in the main process, it handles asynchronous and synchronous messages sent from a renderer process (web page).
The ipcRenderer module is an EventEmitter. It provides a few methods so you can send synchronous and asynchronous messages from the render process (web page) to the main process. You can also receive replies from the main process.
Transform React.js app to Electron.js
The main benefit of Electron is that it works like a web application because of the Chromium instance. This gives us huge benefits like: code re-usability and standardized technologies. Writing JavaScript applications and finding JavaScript developers are much easier than native code. Development process is much faster and cheaper. Also we can reuse 99% of the code in our web app in the Electron app.
To prove the latter statement, we would like to demonstrate how we can transform React.js app into Electron.js app very quickly and without much effort.
Clone git repository of React app. We are going to use this simple app https://github.com/giorgiPapava/Todo-App. You also can use create-react-app.
Add needed libraries
$ yarn add electron electron-builder wait-on-concurrently --dev$ yarn add electron-is-dev3. Add main.js file in root directory
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
const isDev = require('electron-is-dev')
let mainWindow
functioncreateWindow () {
mainWindow = new BrowserWindow({
width: 900,
height: 680
})
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`)
mainWindow.on('closed', () => mainWindow = null)
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
4. Add main entry point property to package.json
"main": "public/electron.js"5. Add electron-dev script to package.json and run it using yarn or npm
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""And we have Electron app built locally 🎉🎉🎉
Big companies that use Electron.js
Slack, Discord and Messenger for messaging,
Atom and VS code for code editing,
Github Desktop for versioning,
and more You can check out the list: https://electronjs.org/apps
Refs:
Comments