Electron, v3

• Understanding Electron Architecture: Learn the core concepts of Electron, including the main and renderer processes, and how they interact to build cross-platform desktop applications.
• Building Real-World Applications: Gain practical experience in creating desktop applications with Electron using HTML, CSS, JavaScript, and React.js, focusing on menubar and system tray integrations.
• Inter-Process Communication: Master the techniques for secure and efficient communication between the main and renderer processes using Electron’s IPC (Inter-Process Communication) modules.
• Implementing File System Operations: Develop the skills to implement file dialog interactions, manage file reading and writing operations, and handle unsaved file changes within your applications.
• Customizing Application Interfaces: Customize application windows, menus, and system tray icons to enhance user experience and provide native-like interactions across different operating systems.
• Utilizing Electron Modules: Leverage Electron’s built-in modules to manage clipboard operations, trigger desktop notifications, and persist application data using SQLite.

This course, led by Steve Kinney, focuses on developing cross-platform desktop applications using Electron. By integrating web technologies such as HTML, CSS, and JavaScript, alongside frameworks like React.js, students will gain hands-on experience building robust applications. The course covers essential Electron concepts, including inter-process communication and security, and guides students through creating real-world applications like markdown editors and clipboard managers.

• Frontend developers looking to expand their skills to desktop application development.
• JavaScript developers interested in creating cross-platform apps.
• Web developers wanting to leverage their existing knowledge of HTML, CSS, and JavaScript for desktop applications.
• React developers aiming to build desktop applications using familiar technologies.

• JavaScript Proficiency: A solid understanding of JavaScript is necessary.
• Web Development Basics: Familiarity with HTML and CSS is required.
• Node.js Basics: Some experience with Node.js will be helpful.
• React.js Knowledge: Understanding React.js fundamentals will be beneficial for parts of the course.

Introduction

Get introduced to Electron’s architecture, combining Node.js and Chromium, and overview the projects and material covered in the course.

Main Process & Renderer Overview

Learn about communication between processes, security considerations, and preload scripts.

Electron Code Overview

Explore the Electron Fiddle tool and understand a simple app boilerplate, keeping multi-platform functionality in mind.

Markdown Editor App

• Project Setup: Walk through the initial setup of the Firesale app.
• File System Dialog & Reading Files: Use Electron's dialog module to manage file dialogs and read files.
• Inter-Process Communication: Connect the main process to renderer processes and handle message sending.
• Exporting and Saving Files: Implement file exporting and saving functionalities, and manage unsaved changes.

Clipmaster App

• Customizing Windows: Set window dimensions, menus, and read/write clipboard data.
• Shortcuts and Notifications: Implement keyboard shortcuts and trigger desktop notifications.

Menubar & System Tray Apps

Learn how to display application icons in the menubar and system tray and create context menus for them.

Not Done App

• Persisting Data: Use SQLite to persist data and store user data appropriately.
• Performance Considerations: Discuss performance impacts when integrating web technologies with desktop capabilities.