Electron Desktop Apps

👉 Overview

👀 What ?

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

🧐 Why ?

Electron is important because it allows developers to create desktop applications using web technologies. These applications are cross-platform, running on Windows, Mac, and Linux. This means developers can write one codebase for all platforms, saving time and resources.

⛏️ How ?

To get started with Electron, you first need to install Node.js and npm on your computer. Then, you can install Electron globally on your machine by running 'npm install -g electron'. After that, you can create a new folder on your computer, navigate into it and run 'npm init' to start a new project. Then, you can start creating your Electron application by creating a 'main.js' file and a 'index.html' file.

⏳ When ?

Electron was first released by GitHub in 2013 as a framework for building Atom, GitHub's hackable text editor. Since then, it has been used to create many popular apps including Slack, Microsoft Teams, and Visual Studio Code.

⚙️ Technical Explanations

Electron is a powerful framework that allows developers to build native desktop applications using web technologies like JavaScript, HTML, and CSS. At its core, Electron combines Chromium and Node.js into a single runtime. Chromium, a free and open-source web browser developed by Google, is used for rendering web content. Node.js is a JavaScript runtime that enables developers to work with the local filesystem and the operating system.

In the Electron framework, each application runs in its own thread. This design choice significantly improves performance and makes the debugging process easier. It creates an environment where each application is isolated, preventing one application's processes from interfering with another's.

Furthermore, Electron provides developers with a robust set of APIs that allow for deeper interaction with the operating system. These APIs cover various system-level interactions, including creating system menus, sending system notifications, and interacting with the system tray. This level of integration allows Electron apps to behave like native applications, providing a seamless user experience.

Since its release by GitHub in 2013, Electron has been leveraged to create numerous popular applications. These include GitHub's own Atom text editor, Microsoft's Visual Studio Code, and the widely-used communication apps Slack and Microsoft Teams. Its ability to support cross-platform development (Windows, Mac, Linux) from a single codebase makes Electron a popular choice for desktop application development.

Here is an example of creating a basic Electron application.

1. Install Node.js and npm: Before you start, make sure that Node.js and npm (Node Package Manager) are installed on your system. If they aren't, you can download and install them from https://nodejs.org.
2. Install Electron: Once Node.js and npm are installed, you can install Electron globally on your machine by running the following command in your terminal:

npm install -g electron

1. Create a new project: Navigate to the location where you want to create your Electron application and run the following command to start a new project:

mkdir my-electron-app && cd my-electron-app
npm init -y

This creates a new directory named my-electron-app, navigate into it, and initializes a new Node.js project.

1. Create main.js file: Create a new file named main.js in your project root and add the following code:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

This is the main process of your Electron app. It creates a new browser window with a size of 800x600 pixels when the app is ready and loads index.html file in the window.

1. Create index.html file: Create a new file named index.html in your project root and add the following code:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

This is the renderer process of your Electron app. It displays "Hello World!" in the created browser window.

1. Modify package.json file: Open your package.json file and modify the start command under scripts to electron .. It should look like this:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1. Run the application: You can now run your Electron application by executing the following command in your terminal:

npm start

This basic Electron application demonstrates how Electron combines Chromium and Node.js into a single runtime, allowing developers to create native desktop applications using web technologies like JavaScript, HTML, and CSS.