Electron Fundamentals, v2
This course is out of date and does not reflect our standards or industry best practices.
Table of Contents
Electron OverviewSteve gives a high level explanation of what Electron is, how it interacts with third-party APIs, and some of the benefits of using a tool that acts as both browser and server-side code.
Famous Electron AppsSteve gives examples, such as VSCode and Slack, that use Electron when building their app.
Course OverviewSteve discusses what the itinerary is for the class, including building an app, using Selenium to test the app, packaging the app for distribution, and setting up a server to receive crash reports.
Electron Process ModelSteve gives an overview of how Electron works, and offers insight into why it’s such a powerful tool.
Windows & File System
Starting the Electron AppSteve discusses what the end application will look like, then jumps into the code by first giving background on versioning history as it relates to the package.json, then spinning up the app.
Building the Main WindowSteve gives a brief overview of submodules available to Electron. The asynchronicity of the app is then demonstrated by requiring the app submodule, then using it to log a message out in the terminal using an event listener.
Loading HTML into the Main WindowSteve sets up a window to pop up when the application is ready, and fixes the flash of white with an event-emitter method.
Using Node ModulesSteve gives an overview of the file that transforms the markdown into the HTML view of the app, then demonstrates how Electron allows the user to write node in the HTML file.
Dev Tools in ElectronSteve utilizes the developer tools available in the Electron app to demonstrate that they work the way they do in the browser, but with the added bonus of allowing access to things like the Node and Browser APIs.
Native File System DialogSteve live codes a way to grab a file from a user using their native system dialog.
Reading from the File SystemSteve demonstrates how to read the file that was opened by the user.
Customization of the Native File System DialogSteve demonstrates several customizations of the native file system dialog, then adds an event listener to show an alert after the file is opened.
Remote ModuleSteve demonstrates how to utilize the remote module in the renderer process to "talk" to the main process.
Dialog Meets Renderer SolutionSteve live codes the solution to the exercise.
Communicating Between ProcessesSteve gives a high level explanation of what the communication in the app looks like, then allows the renderer to talk with the main process to display the file opened in the app.
Process Communication Q&AA question is asked regarding why Steve used an event based solution in the previous exercise, and which messages the renderer methods receive.
Updating Native UI
Display the File in Title BarSteve demonstrates how to update the title in the title bar to also display the name of the file that is currently open.
Indicate Unsaved ChangesSteve adds a variable in the code that tracks whether the document has been updated since the last save.
Update Title Bar ExerciseStudents are instructed to indicate in the title bar whether the changes are saved in the document.
Update Title Bar SolutionSteve live codes the solution to the previous exercise, then goes further and enables buttons based on the editing state, and introduces some MAC-specific integrations
Add a File to Recent DocumentsSteve demonstrates a basic method on how to add the file to recent documents, and briefly discusses the pitfalls of attempting to mimic native applications exactly.
Working with Files
Saving the Current FileSteve demonstrates how to save by overwriting files in the app.
Creating a New FileSteve demonstrates how to save a named new file to a local file system.
Export HTML File ExerciseStudents are instructed to wire the application up to the save HTML to show the dialog, let the user choose a place to save the HTML content,
Export HTML File SolutionSteve live codes the solution to the exercise, then adds some Mac OS specific optimizations to the app.
Dragging & Dropping FilesSteve demonstrates how to add drag and drop features such that the user knows where they are permitted to drop files into the program to mimic native applications.
Show File in File ExplorerSteve demonstrates how to create the functionality of showing a file in the folder.
Show in Default Application ExerciseStudents are instructed to show a link in the default application.
Show in Default Application SolutionSteve live codes the solution to the exercise.
Custom Application MenusSteve demonstrates how to write the application menu, and how to write features for specific operating systems.
Menu RolesSteve utilizes the menu roles to do the heavy lifting with commonly utilized menu items that were lost when the custom application menu was created.
Keyboard ShortcutsSteve demonstrates how to create keyboard shortcuts for opening and saving files.
Custom Menu Item ExerciseStudents are instructed to create the custom menu item for the 'Save HTML' button.
Custom Menu Item SolutionSteve live codes the solution to the exercise, then reviews the application that was built thus far.
Electron ForgeSteve introduces Electron Forge.
Clipboard Code OverviewSteve gives a tour around the clipboard app repository.
Building the Clipboard App UISteve adds necessary React code to wire up the UI.
Reading & Writing to the System ClipboardSteve adds functionality to the app that allows the user to add items from the system clipboard, and copy items to the system clipboard.
Global Keyboard ShortcutsSteve adds global keyboard shortcuts to allow users to use hotkeys.
Write to System Clipboard ExerciseStudents are instructed to create another keyboard shortcut that allows the user to write the most recent clipping back to the clipboard.
Write to System Clipboard SolutionSteve live codes the solution to the exercise
electron-rebuildSteve introduces a solution to the problem that the version of Nodejs is different than the version that is installed on a local machine.
Persisting DataSteve hooks the application into an sqlite database to create data that persists even after the app is closed.
Deleting Persistent DataSteve codes functionality into the app to allow users to delete entries in the database.
MenubarSteve introduces the npm menubar module that provides boilerplate for setting up a menu bar application.
Secondary Menubar MenuSteve adds a secondary menu to the Electron menubar tray.
Testing & Building
Testing with SpectronSteve introduces Electron's testing framework.
Running SpectronSteve Demonstrates how to run the Electron testing framework.
Writing Application TestsSteve utilizes the assertions to write tests for the application.
Crash & Error ReportingSteve differentiates crash and error reporting, then demonstrates how to generate the reports.
Saving Error ReportsSteve demonstrates how to save error reports.
Building Apps with electron-packagerSteve demonstrates how to build the app for production.
Obfuscating CodeSteve explains why Electron isn't built for obfuscating code, but gives workarounds to this issue.
Electron Q&AQuestions are asked about the use cases that Steve thinks are particularly useful for, how to update the app for users, memory usage for Electron.