Table of Contents
Introduction
Overview
Main Process & Renderer Overview
Steve discusses handling communication between the main and renderer processes. Newer versions of Node.js security differences and preload scripts are also covered in this segment.
Electron Code Overview
Steve discusses the Electron Fiddle tool and walks through the contents of a simple app boilerplate. Multi-platform functionality should be kept in mind, as Electron is compatible with macOS, Windows, and Linux.
Markdown Editor App
Project Setup
Steve walks through the contents of the Firesale app's index.ts file. Updating the index.ts to not show the application window until it's fully loaded and where the dev tools should be shown is also demonstrated in this segment.
File System Dialog & Reading Files
Steve demonstrates triggering a file system dialog by utilizing Electron's dialog module. How to restrict the allowed file types and reading files using fs/promises is also covered in this segment.
Sending File to the Renderer
Steve walks through connecting the main process to the renderer processes to allow the chosen markdown file to be rendered to the DOM. The ipcRenderer module is used to send synchronous and asynchronous messages from the render process to the main process.
Sending Message to the Main Process
Steve implements the ability to send a message from the renderer process to the main process using the contextBridge renderer process module. Function values bound through the contextBridge are proxied through Electron to ensure that contexts remain isolated.
Exporting the HTML Exercise
Students are instructed to implement the button that exports HTML and to trigger a save dialog that is scoped to allow only HTML files. A student's question regarding the use of ipcRender in the preload script and a walk through of the exporting HTML exercise solution are also covered in this segment.
Save File to the File System
Steve demonstrates other applications with UI nuances involving saving files. Implementing the ability to save a file and connecting to the save file button is also covered in this segment.
Keeping Track of the Current File
Steve discusses getting and setting the currently accessed file to allow the implementation of UI features for a more natural OS experience. Utilizing the current file to display the pathname and icon of the file in the window's title bar is also demonstrated in this segment.
Saving Unsaved File Changes
Steve walks through comparing the current file to the previously saved file to detect if there are unsaved changes. The save status of the file can then be utilized for other UI features, such as triggering a save dialog when a user closes the window.
Open in File System & Default Applications
Steve demonstrates utilizing Electron's shell library to open a file in its default application and show the file in the operating system's file manager.
Custom Application Menus
Steve walks through utilizing the Menu module to create custom application menus. Menu items can be defined individually or pulled from a template array using Menu.buildFromTemplate().
Edit Menu Exercise
Students are instructed to explore Electron's available menu roles and enable an Edit menu. Creating keyboard shortcuts by adding an accelerator to the menu item is also covered in this segment.
Clipmaster App
Clipmaster Overview
Steve discusses configuring Electron applications to support other frameworks such as React.js and walks through the starting content of the Clipmaster repo.
Customizing the Application Window
Steve demonstrates how to customize the application's window, including setting minimum and maximum dimensions, the ability to minimize or maximize the application, and setting a custom menu bar.
Reading from the Clipboard
Steve utilizes the Electron clipboard module to implement the ability to read text from the system clipboard.
Writing to Clipboard Exercise
Students are instructed to implement the ability to write data to the system clipboard from the Clipmaster application.
Global & Keyboard Shortcuts
Steve walks through implementing keyboard shortcuts that can access the Clipmaster application regardless of whether the app is currently in focus.
Triggering Notifications
Steve demonstrates how to create and trigger OS desktop notifications by utilizing the Notification module.
Menubar & System Tray Apps
Steve walks through how to display an application icon in the menubar and system tray. How to add a context menu to the menubar icon is also covered in this segment.
Making a Menubar Application
Steve demonstrates utilizing the "electron-positioner" library to show and hide the Clipmaster application similar to those of a menubar app.
Not Done App
Persisting Data
Steve discusses persisting data with SQLite and utilizing the built-in abstraction app.getPath() to store user data in an OS appropriate file location.
Performance Considerations
Steve discusses performance considerations when combining web technologies with native desktop capabilities in Electron applications.
