Table of Contents
IntroductionSteve Kinney introduces the course by discussing Electron as a combination of a full Node.js and Chromium runtime. An overview of the course projects and material is also provided in this segment. - Course setup: https://gist.github.com/stevekinney/46d6e96eb31ddb9db2b28af114d03679 - Course notes: https://gist.github.com/stevekinney/837ce9b2fa05ed88f6bc76d7d6e22efd - Slides: https://static.frontendmasters.com/resources/2023-08-18-electron-v3/electron-v3.pdf
Main Process & Renderer OverviewSteve 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 OverviewSteve 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 SetupSteve 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 FilesSteve 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 RendererSteve 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 ProcessSteve 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 ExerciseStudents 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 SystemSteve 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 FileSteve 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 ChangesSteve 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 ApplicationsSteve 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 MenusSteve 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 ExerciseStudents 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 OverviewSteve 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 WindowSteve 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 ClipboardSteve utilizes the Electron clipboard module to implement the ability to read text from the system clipboard.
Writing to Clipboard ExerciseStudents are instructed to implement the ability to write data to the system clipboard from the Clipmaster application.
Global & Keyboard ShortcutsSteve walks through implementing keyboard shortcuts that can access the Clipmaster application regardless of whether the app is currently in focus.
Triggering NotificationsSteve demonstrates how to create and trigger OS desktop notifications by utilizing the Notification module.
Menubar & System Tray AppsSteve 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 ApplicationSteve demonstrates utilizing the "electron-positioner" library to show and hide the Clipmaster application similar to those of a menubar app.
Not Done App
Persisting DataSteve discusses persisting data with SQLite and utilizing the built-in abstraction app.getPath() to store user data in an OS appropriate file location.
Performance ConsiderationsSteve discusses performance considerations when combining web technologies with native desktop capabilities in Electron applications.