YouTipElectron Tutorial
# 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 allows us to write desktop applications just like web pages, such as .exe for Windows, .app for macOS, and executable files for Linux.
**Electron = Chromium (browser engine) + Node.js (backend capabilities) + desktop application shell.**
* * *
## Prerequisites for Learning Electron?
Before learning Electron, mastering these is sufficient:
* **Know some (#)**.
* **Be able to use [Node.js](#) and (#)** to run scripts.
* **Understand some (#) and selectors** (such as `#id`, `.class`);
* **Be able to use the terminal** to run commands.
* * *
## Core Concepts
Imagine that when you normally use a browser to visit websites, what you see are pages built with HTML, styled with CSS, and interactive functions implemented with JavaScript. Electron is like packaging a browser to make it run independently, no longer requiring users to manually open a browser.
**Technical Composition**:
* **Chromium**: Provides the page rendering engine to ensure your application interface displays properly
* **Node.js**: Provides system-level APIs, allowing you to access underlying functions like file system and network
* **Native APIs**: Allows calling native operating system functions, such as menus, dialogs, etc.
* * *
## Why Choose Electron?
### Development Advantages
**1. Unified Technology Stack**
* Use familiar web technologies for development
* Frontend developers can quickly get started
* Rich web ecosystem resources available
**2. Cross-platform Support**
* Develop once, run on multiple platforms
* Supports Windows, macOS, Linux
* Consistent interface and functionality across different systems
**3. High Development Efficiency**
* Hot reload functionality for real-time preview of modifications
* Complete debugging tools, 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 a normal web page:
## Example