What is Electron?
Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js runtime.
Why use Electron?
Now you might be wondering why you should use electron... well there are a couple of quite convincing reasons:
-
Electronis an open source project maintained by GitHub and an active community of contributors, which results in rapid bugfixes & new feature additions. - It is cross-platform, being compatible with Mac, Windows, and Linux, Electron apps build and run on three platforms.
- You can make apps with Web Technologies ranging from vanilla
HTML,CSS&JSto frameworks likeReact,AngularandVue. - Some of the biggest desktop apps are made using
electronlike VS Code, Facebook Messenger, Twitch, Microsoft Teams.
Getting started
Ok enough blabbering, lets get started with converting your web-apps into desktop apps. First lets install electron with the following command.
npm i -g electron
After the installation completes, open up a new folder and create index.js file.
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({ width: 800, height: 600, })
win.loadFile(path.join(__dirname, 'index.html')) // Assuming the file is located in the same folder
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => BrowserWindow.getAllWindows().length === 0 && createWindow())
})
app.on('window-all-closed', () => process.platform !== 'darwin' && app.quit())
Lo Behold! Your app has been converted into a desktop app in just 14 lines of code. You can run the app using
electron .
PS: Make sure that you have index.html in the given location, else the app will crash. For testing purpose, you can just use a one liner
<h1>Cross Platform App</h1>
But its sub-optimal to develop any application like this, its better to create a proper project using tools like npm or yarn for better package management.
Structuring the App
First initialize the package using
npm init
and add electron as a Dev Dependency
npm i -D electron
Lets create the index.js file
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile(path.join(__dirname, 'gui', 'index.html')) // Assuming the GUI files are in a folder called gui
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
Yeah I did compress the file a bit to fit it in 14 lines π .
You should keep the files organized in separate folders (like GUI for the web app files in the example above).
Cons of using electron
Electron does have a couple of cons as well
- Slower than an application built with native GUI components (not noticeable in most cases though).
- Really big package size (compared to native apps)
Projects using Electron
Smartsapp
Web-app: https://smartsapp-ba40f.firebaseapp.com
ruppysuppy
/
SmartsApp
π¬π± An End to End Encrypted Cross Platform messenger app.
Smartsapp
A fully cross-platform messenger app with End to End Encryption (E2EE).
Demo
NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.
Platforms Supported
- Desktop: Windows, Linux, MacOS
- Mobile: Android, iOS
- Website: Any device with a browser
Back-end Setup
The back-end of the app is handled by Firebase.
Basic Setup
- Go to firebase console and create a new project with the name
Smartsapp - Enable
Google Analylitics
App Setup
- Create an
Appfor the project from the overview page - Copy and paste the configurations in the required location (given in the readme of the respective apps)
Auth Setup
- Go to the project
Authenticationsection - Select
Sign-in methodtab - Enable
Email/PasswordandGooglesign in
Firestore Setup
- Go to the project
Firestoresection - Create firestore provisions for the project (choose the server nearest to your location)
- Go to the
Rulesβ¦
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
References
Thanks for reading
Reach out to me on:
Top comments (20)
Personally, I don't like electron that much. But for make a cross-desktop app in low bucket, electron is the best
Same here. I am eagerly waiting for tauri to become production ready
I have actually started using it, Even though it is not marked as production ready, My app is quite stable. Most of the api's are now stable. Only issue I have faced is lack of Video Tutorials ( because I am a visual learner ) but their docs are mostly updated regularly.
The more I hear about it, the more excited I get. Its a huge improvement over
electron. I am waiting mainly for 2 features: Frameless window & Multiwindow Mode because I generally use these extensively.Oh nice, I haven't heard it before, look promise.
In fact, when building refiapp.vercel.app/ with electron doesn't make me happy with it
I believe Tauri is a fork of Golang's webview/webview.
I wrote about alternatives to WebView long time ago.
Performant WebView alternatives to Electron
Pacharapol Withayasakpunt γ» Mar 9 '20 γ» 1 min read
Currently, I bank on Lorca / Chrome DevTools Protocol, and I regretted it a little...
Thanks @patarapolw I did some research on other solution but I think it still missed some API that electron can provide. For eg: Context menu
Yeah its an interesting project, but its still in development
Do not install electron globally please
Yeah, I did mention that later on (to use it in a project)
Please don't. There are enough bloated, slow electron based apps around already
It would be helpful to name a few, for reference and bad practices to avoid.
TBH - the whole idea of Electron is flawed - you are essentially shipping almost an entire web browser with every single app. You end up with a whole bunch of web browsers all running at once, hogging memory and resources. This would be fine if all the apps were sharing an instance of a central webpage renderer - but AFAIK, they aren't.
The overall result is a bunch of massively bloated, resource hungry apps that, in reality could be way, way, way more efficient. Not to mention the fact that they'll all likely be running different versions of the web renderer, with all the associated security and update issues that that brings.
This is quite typical of the way a lot of development is done today - little or no consideration being given to whether or not the tools are appropriate to what is being built (using React for ridiculously simple portfolio sites etc.) - people just want to use whatever they know, or is the current 'cool' thing.
The priority always seems to be making it 'easier' for the developer with no regard to efficiency, resource use etc.
Thank you, this is absolutely the insights that I would love to see.
The author has already included a convenient list of some of the most bloated and worst performing ones right in in the article:
From the apps listed in the blog (as @pcjmfranken pointed out) you can see quite a few big names. Even though
electrondoes come with a couple of cons its still the de facto standard till now.What??? You can do that in literally zero line of code, in Neutralino.js.
Donβt use this. Electron is garbage and a waste of space. Use a PWA instead and/or react native. Itβs literally like having multiple versions of chromes at the same time, totally useless.
15 lines of code===80 mega bytes binary.
Yeah, the sad reality π’