Electron Tutorial

Electron (formerly Atom Shell) is an open-source cross-platform desktop application development framework developed by GitHub.

Electron is an open-source framework specifically designed for building cross-platform desktop applications using web technologies (HTML, CSS, and JavaScript).

Electron lets us write desktop applications just like writing web pages, such as .exe for Windows, .app for macOS, and executables for Linux.

Electron = Chromium (browser engine) + Node.js (backend capabilities) + desktop application shell.

What basic knowledge is needed to learn Electron?

Before learning Electron, just master these few things:

  • Know a bitJavaScript。
  • Know how to useNode.jsandnpmRun the script.
  • Understand a bitHTMLand selectors(for example#id、.class）；
  • Can use the terminalRun commands.

Core Concepts

Imagine that when you usually use a browser to visit websites, what you see are pages built with HTML, styled with CSS, and made interactive with JavaScript. Electron is like packaging a browser so it can run independently, without requiring users to manually open a browser.

Technology Stack：

  • Chromium: Provides a page rendering engine to ensure your application's interface displays correctly.
  • Node.js: Provides system-level APIs, enabling you to access underlying features such as the file system and network.
  • Native APIs: Allows calling the operating system's native features, such as menus, dialogs, etc.

Why choose Electron?

Development Advantages

1. Unified technology stack

  • Develop using familiar Web technologies
  • Front-end developers can get started quickly
  • Rich Web ecosystem resources available

2. Cross-platform support

  • Develop once, run on multiple platforms.
  • Supports Windows, macOS, Linux
  • The interface and functionality remain consistent across different systems.

3. High development efficiency

  • Hot reload feature for real-time preview of changes
  • Complete debugging tools; you can use Chrome DevTools.
  • Active community, quick problem resolution

Example

Suppose we want to make a notepad application.

In Electron, you only need to:

npm install electron

Create a main.js:

Example

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

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });
  win.loadFile('index.html'); // This is your web interface
});

Then index.html is just an ordinary web page:

Example

<h1>My Desktop Notepad</h1>
<textarea></textarea>

Run:

npx electron .

And just like that, our web page transforms into a desktop application!

Reference Resources

other extensions