GitHub Repo: https://github.com/webcrumbs-community/webcrumbs
Ever wondered how Visual Studio Code, Slack and Discord, and many other cool apps, are coded?
The answer is: Electron. Often hailed as a revolutionary framework, it empowers JavaScript developers to build cross-platform desktop applications using web technologies.
This framework, combining the power of Node.js and Chromium, offers a unique platform to leverage familiar web development skills for desktop application development.
What is Electron?
Electron is an open-source framework that allows you to create desktop applications using HTML, CSS, and JavaScript. It's essentially a combination of Chromium (the open-source project behind Google Chrome) and Node.js, packaged together to provide a runtime that lets you build applications for Windows, macOS, and Linux.
Why Electron for JavaScript Developers?
Familiarity with Web Technologies: If you're adept at JavaScript, HTML, and CSS, Electron makes it straightforward to transition those skills to desktop application development.
Cross-Platform Compatibility: Write your code once, and run it on any major operating system. This eliminates the need to learn different technologies for each platform.
Access to Node.js: Electron applications have the ability to access Node.js APIs. This means you can interact with the file system, create native menus, notifications, and much more.
Strong Community and Ecosystem: Being open-source and popular, Electron has a vibrant community. You can find numerous resources, libraries, and tools tailored for Electron development.
Real-World Use Cases
Popular Applications: Some of the most popular desktop applications like Visual Studio Code, Slack, and Discord are built using Electron.
Custom Business Applications: Companies can build internal tools and applications tailored to their specific business needs, leveraging their existing web development expertise.
Support us! πβοΈ
By the way, I'm part of the WebCrumbs team, and it would mean a lot if you could check out our no-code solution for Node.js that simplifies web development. Giving us a star would be fantastic.
We're putting in a ton of effort to help devs take their ideas to a live website as quickly and easily as possible (think: effortless plugin and theme integration), and every bit of support is truly appreciated!
βοΈ Give WebCrumbs a Star! βοΈ
Ok. Now, let's dive back into the wonders of Electron.
Potential Drawbacks
Performance and Size: Electron applications can be resource-intensive and larger in size compared to native applications. This is due to the inclusion of Chromium and Node.js in each application.
Security Concerns: As with any framework, there are potential security vulnerabilities, particularly since Electron apps have access to Node.js. Developers need to be vigilant and follow best security practices.
Getting Started with Electron
Setting up the Project
Create a New Directory: Create a new folder for your project and navigate into it.
mkdir my-electron-app
cd my-electron-app
Initialize a Node.js Project: Initialize a new Node.js project.
npm init -y
Install Electron: Install Electron as a development dependency.
npm install electron --save-dev
Writing the Code
Create the Main Script (main.js)
In the project directory, create a file named main.js. This will be the entry point of your Electron application.
const { app, BrowserWindow } = require('electron');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// Load a local HTML file or a web URL
win.loadFile('index.html');
// Or load a remote URL
// win.loadURL('https://example.com');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
Create an HTML File (index.html)
Create a file named index.html in the same directory. This file will be displayed in your Electron application window.
<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<p>Welcome to your first Electron application.</p>
</body>
</html>
Update the Package.json File
In your package.json, modify the "main" script to "main": "main.js" and add a start script under "scripts":
"main": "main.js",
"scripts": {
"start": "electron ."
}
Running the Application
Now, you can start your Electron application by running:
npm start
This will open a new Electron window displaying the contents of index.html. Congratulations, you've just created a basic Electron application!
Next Steps
Explore Electron's documentation to learn more about its APIs and capabilities. Experiment with different features like custom menus, notifications, and system interactions. Consider packaging and distributing your Electron app for different platforms.
Community and Contributions
Electron thrives on community contributions. As a JavaScript developer, you can contribute to its growth by participating in discussions, contributing to the codebase, or sharing your own Electron projects.
If you like open source, engage with the node.js community on GitHub at WebCrumbs Community or visit the WebCrumbs Community website for more information.
Conclusion
Electron stands out as a robust framework for JavaScript developers aiming to write a desktop application development without stepping away from the comfort zone of web technologies.
Its ability to leverage web development skills for creating cross-platform desktop applications makes it a valuable tool in a developer's arsenal.
As you embark on your journey with Electron, remember that the real power lies in experimenting, building, and engaging with the community.
Follow me for more!
I usually write about JavaScript, WebDev and Webcrumbs β€οΈ.
Top comments (14)
Do check Tauri - tauri.app/. Recently, this is gaining more attention from developers. We are also using this for one of the new products.
It's legit, Tauri is bringing up a lot of attention. It's on my list!
Happy to read that as well :)
I love tauri ot makes life easier to develop secure and lightweight desktop applications .
If you use the good oldfashioned scripts (No ES6-modules), any html file (with embedded or external Javascript) can be run locally in the browser.
If you manage to run a web server on the fly, this would also work for modern web apps.
Not obvious way how we can work with JS. Nice article. Thanks for it
Thanks for reading!
Wails is better wails.io
I think itβs much easier to use than Tauri and much smaller than Electron or NWjs. But, I do use NWjs for proof of concept builds.
Hi, Richard! Thanks for mentioning the alternatives. Itβs really good for those reading this
nice
Really good lessons
Amazing
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more