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 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 on Windows, .app on macOS, and executable files on Linux.

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

What basic knowledge is needed to learn Electron?

Before learning Electron, mastering these few things is enough:

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

Core Concepts

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

Technology Stack：

  • Chromium: Provides a page rendering engine, ensuring your application interface displays correctly.
  • Node.js: Provides system-level APIs, allowing you to access low-level functions such as the file system and network.
  • Native APIs: Allows calling native operating system features, such as menus and dialog boxes.

Why choose Electron?

Development Advantages

1. Unified technology stack

  • Develop using familiar web technologies
  • Front-end developers can get started quickly
  • A rich ecosystem of web resources is 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 functionality for real-time preview of changes
  • Debugging tools are well-developed, and you can use Chrome DevTools.
  • Active community with fast problem resolution

Example

Suppose we want to build a notepad application.

In Electron, you only need:

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 .

This way, our web page is transformed into a desktop application!

Reference Resources

other extensions