Notes on Electron and Desktop App Development

Introduction to Electron

• Electron: A framework to build native desktop applications using HTML, CSS, and JavaScript.
• Used by popular applications like VS Code, Slack, and Discord.

Key Features

• UI Development: Build user interfaces similar to web applications.
• Frameworks: Compatible with favorite front-end frameworks.
• Node.js Access: Provides access to low-level APIs not available in standard browsers (e.g., file system).
• Combines Front-end and Back-end: Integrates web technologies with native features.

Main Process vs. Renderer Process

• Main Process:
  • Manages the lifecycle of the app.
  • Opens and manages application windows.
• Renderer Process:
  • Each window runs in its own independent Chromium process.
  • Loads and renders HTML, CSS, and JavaScript in a native window.

Creating an Electron App

1. Setup:
   • Run npm init in an empty directory to initialize project.
   • Install Electron using npm install electron.
2. Main File:
   • Create a main.js file as the main entry point.
3. Creating Windows:
   • Instantiate a browser window when the app is ready.
   • Load an HTML file to render.
4. HTML File:
   • Create an index.html file and include your code.
   • Access Node's global objects directly in HTML (not possible in standard web browsers).

System UI Control

• Electron allows for custom icons and controls on the system tray with minimal code.

Distribution

• Package the application for multiple operating systems from a single codebase using tools like Electron Packager or Forge.
• Distribution can be handled with a single command.

Conclusion

• This lecture covered the basics of Electron in a short format.
• Encouragement to stay tuned for a full project demonstration in the future.
• Reminder to like the video for more content.