Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Local Storage Example - Electron Typing CST Test
Local Storage Example — Electron Code
Demonstrates saving and retrieving data using the browser's localStorage API in Electron.
// index.html
<!DOCTYPE html>
<html>
<body>
<h3>Local Storage Example</h3>
<input id='dataInput' placeholder='Enter something...'>
<button id='saveBtn'>Save</button>
<button id='loadBtn'>Load</button>
<p id='output'></p>
<script>
const saveBtn = document.getElementById('saveBtn');
const loadBtn = document.getElementById('loadBtn');
saveBtn.onclick = () => {
localStorage.setItem('data', document.getElementById('dataInput').value);
};
loadBtn.onclick = () => {
document.getElementById('output').textContent = localStorage.getItem('data');
};
</script>
</body>
</html>Electron Language Guide
Electron is an open-source framework for building cross-platform desktop applications using web technologies (HTML, CSS, JS) with Node.js integration and Chromium-based rendering. It allows developers to create desktop apps for Windows, macOS, and Linux with a single codebase.
Primary Use Cases
- ▸Cross-platform desktop apps for Windows, macOS, and Linux
- ▸Rapid development using web technologies
- ▸Internal enterprise tools
- ▸Consumer desktop apps (Slack, VS Code, Discord)
- ▸Apps requiring integration with Node.js modules
Notable Features
- ▸Cross-platform support with a single codebase
- ▸Full access to Node.js APIs
- ▸Chromium-based rendering for web-like UI
- ▸Automatic updates via electron-updater
- ▸Extensive ecosystem of plugins and libraries
Origin & Creator
Created by GitHub in 2013 (originally as Atom Shell) to power the Atom text editor, Electron has grown into a popular framework for desktop apps.
Industrial Note
Best suited for cross-platform desktop apps where rapid development with web technologies is prioritized over binary size or raw performance.
Quick Explain
- ▸Electron enables building desktop apps using web technologies and Node.js APIs.
- ▸It combines Chromium for rendering and Node.js for backend functionality.
- ▸Ideal for developers who want web-like development with desktop capabilities.
Core Features
- ▸Main process handles OS integration
- ▸Renderer process displays web-based UI
- ▸IPC (inter-process communication) between main and renderer
- ▸Window management, menus, and native dialogs
- ▸Packaging and distributing apps for multiple platforms
Learning Path
- ▸Learn web frontend framework (React/Vue/Angular/Svelte)
- ▸Understand Node.js APIs
- ▸Learn Electron main and renderer processes
- ▸Build simple Electron desktop apps
- ▸Package and distribute apps cross-platform
Practical Examples
- ▸Visual Studio Code (code editor)
- ▸Slack (desktop messaging app)
- ▸Discord (chat and communication)
- ▸WhatsApp Desktop
- ▸Internal enterprise dashboards and tools
Comparisons
- ▸Electron vs Tauri: Electron larger, more resource-heavy; Tauri smaller and Rust-based
- ▸Electron vs NW.js: Similar architecture, NW.js slightly simpler but smaller community
- ▸Electron vs Flutter Desktop: Flutter compiles UI natively, Electron uses Chromium webview
- ▸Electron emphasizes rapid cross-platform development
- ▸Performance depends on Chromium and Node.js usage
Strengths
- ▸Large community and mature ecosystem
- ▸Works with any frontend framework
- ▸Rapid prototyping and development
- ▸Access to full Node.js and NPM ecosystem
- ▸Wide adoption in commercial apps
Limitations
- ▸Large binary size (tens of MBs per app)
- ▸High memory and CPU usage for lightweight apps
- ▸Security risks if Node.js APIs exposed improperly
- ▸Performance depends on Chromium overhead
- ▸Not ideal for small utilities requiring minimal resources
When NOT to Use
- ▸Apps requiring tiny binary size
- ▸Memory or CPU-sensitive apps
- ▸Lightweight utilities needing minimal overhead
- ▸Apps where Rust-based security is preferred
- ▸Projects without web development experience
Cheat Sheet
- ▸`electron .` - run app in development
- ▸`BrowserWindow` - create app windows
- ▸`ipcMain` / `ipcRenderer` - IPC communication
- ▸`electron-builder` - package app
- ▸`package.json` - app configuration
FAQ
- ▸Does Electron support React/Vue/Angular/Svelte?
- ▸Yes, frontend framework agnostic.
- ▸Are Electron apps secure?
- ▸Yes, if best practices like contextIsolation are used.
- ▸Can I build for all desktop platforms?
- ▸Yes, Windows, macOS, and Linux are supported.
- ▸Are Electron apps lightweight?
- ▸No, they are larger due to Chromium and Node.js overhead.
- ▸Can I implement auto-updates?
- ▸Yes, using electron-updater or custom solutions.
30-Day Skill Plan
- ▸Week 1: Web frontend fundamentals
- ▸Week 2: Node.js and Electron basics
- ▸Week 3: Build desktop app with IPC communication
- ▸Week 4: Integrate OS features and auto-updates
- ▸Week 5: Test, optimize, and distribute desktop apps
Final Summary
- ▸Electron enables cross-platform desktop apps using web technologies and Node.js.
- ▸Main process manages backend/OS integration; renderer process displays UI.
- ▸Supports all major frontend frameworks and desktop OSes.
- ▸Ideal for rapid development of consumer and enterprise apps.
- ▸Large ecosystem, mature tools, but heavier in size and memory usage.
Project Structure
- ▸src/ - frontend source code
- ▸main.js - main process entry
- ▸package.json - dependencies and scripts
- ▸node_modules/ - installed packages
- ▸dist/ or build/ - packaged output for platforms
Monetization
- ▸Commercial desktop apps
- ▸Internal enterprise tools
- ▸Freemium apps with optional purchases
- ▸Open-source apps with donations
- ▸Subscription-based desktop software
Productivity Tips
- ▸Reuse frontend components
- ▸Optimize main/renderer process interaction
- ▸Profile memory and CPU usage
- ▸Test on all platforms frequently
- ▸Leverage existing plugins and NPM modules
Basic Concepts
- ▸Main process manages native OS features and lifecycle
- ▸Renderer process runs web frontend
- ▸IPC used for secure communication between processes
- ▸Configuration via `package.json` and electron-builder/electron-packager
- ▸Apps packaged as executables for each platform