Steve Kinney
Temporal
Course Description
Build native, cross-platform desktop apps using HTML, CSS, JavaScript, and React.js with Electron. Get hands-on experience building real-world apps for the menubar and system tray. Learn the key Electron concepts like main and renderer processes, inter-process communication, and security. By the end, you'll be equipped to build robust, user-friendly desktop applications!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: September 19, 2023
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 12 minutes
Steve 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
Overview
Section Duration: 18 minutes
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.
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
Section Duration: 2 hours, 10 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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.
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().
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
Section Duration: 54 minutes
Steve discusses configuring Electron applications to support other frameworks such as React.js and walks through the starting content of the Clipmaster repo.
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.
Steve utilizes the Electron clipboard module to implement the ability to read text from the system clipboard.
Students are instructed to implement the ability to write data to the system clipboard from the Clipmaster application.
Steve walks through implementing keyboard shortcuts that can access the Clipmaster application regardless of whether the app is currently in focus.
Steve demonstrates how to create and trigger OS desktop notifications by utilizing the Notification module.
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.
Steve demonstrates utilizing the "electron-positioner" library to show and hide the Clipmaster application similar to those of a menubar app.
Not Done App
Section Duration: 14 minutes
Steve discusses persisting data with SQLite and utilizing the built-in abstraction app.getPath() to store user data in an OS appropriate file location.
Steve discusses performance considerations when combining web technologies with native desktop capabilities in Electron applications.
Wrapping Up
Section Duration: 3 minutes
Steve wraps up the course by discussing packaging OS-specific applications and some key takeaways of this course.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops