This course has been updated! We now recommend you take the Electron Fundamentals, v2 course.
Table of Contents
The Electron Big Picture
Overview
Talks about the origins of Electron, Steve reviews the scenarios where building a desktop OS over a web application. Steve discusses applications that use Electron.
Technology Benefits
Explaining the technology makeup of Electron, Steve illustrates the benefits of Chrome Content Module and Node without the programming headaches for building an application on open web technologies.
Getting an Electron Application Up and Running
Structuring an Electron Application
Demonstrating the capabilities of an Electron application, Steve walks through installing Electron and setting up a simple application.
Coding a Proof of Concept
Steve continues to showcase Electron capabities by building a small, proof of concept application for MacOS.
Bringing in Modules
With the basic application framework in place, Steve demonstrates the modules available for quickly building out an app in the main process. The main process is the part of application code that communicates directly with the underlying operating system.
Rendering Process
Steve demonstrates how to place JavaScript in renderer process.The renderer process is the part of the code that runs inside an open browser window.
Bookmark Application
Steve shows how Electron allows combined access to application file system and the DOM.
Shell Module
To open a URL in the user's default browser, Steve shows how Electron can handle URLs using the `shell` module.
Debugging Electron
Steve introduces Devtron, a tool that helps inspect and debug Electron applications.
Changing Theme Styles
Using systemPreferences Module, Steve shows how to set an application into Dark Mode with the remote module that is used to handle main process modules from the renderer process.
Building a Markdown Text Editor
Rendering Markdown
Steve begins working on the second course Electron application: a Markdown-to-HTML renderer called Firesale.
Setting the OS Font
Steve shows how to configure an Electron application's main typeface to the default OS's font by setting the CSS font property to a value of menu.
Opening a File
Using Electron's dialog module, Steve codes a feature to call a native dialog box to open a new file from the user's file system. He also demonstrates OS integration by showing how to animate the dialog box to slide into view.
Filtering File Types
With Electron, Steve shows how to limit the type of files the application can open by adding filters to the dialog box.
Managing Multiple Windows
Reading File Contents
Using the File System Node module, Steve adds a feature to the application to get a file's path and read the file's content.
Open File Button
While loading files and logging to the terminal is possible, Steve uses the remote module to send the content over to the render process.
Displaying a File
Steve shows how to have the main render communicate with a render process to open and display files in the user's operating system. Then he takes questions from students.
Refactoring
Steve refactors his code example for displaying a file.
Multiple Windows
While making sure the new dialog box opens in the correct window, Steve shows how to allow different files to display in multiple windows of the markdown text editor.
Title Bar
Steve shows how to set the title of the window to the name of the filename. Also, he provides visual cues by placing the file icon next to the filename and visually notifying the file as edited on the MacOS' app window's menu bar button.
Save Changes
Steve builds out a prompt to warn users to save their file before losing changes to their file.
Detecting Change
To determine a file change, Steve codes an update keep track of the original content of a newly opened file and compare it to the user's file to see if any changes have been made.
Additional Visual Cues
Steve provides support for file edited visual cues for Windows and Linux by appending "(Edited)" in the title bar.
File Handling
Revert and Save Buttons
If a file has been edited, Steve codes the Save and Revert buttons to be enabled.
Recently Opened Files
To select previously opened files, Steve uses an “open-file” event that can listen in the main process and then be made to spawn a fresh window.
Saving Files
Triggered by the rendering process, Steve codes a function in the main process to save a file.
Watching Files
Steve incorporates a file watcher. When a file's contents change in another editor, then that change is reflected in our application.
Accessing the Operaring System
Using Electron to let the application interact with user's operating system with the shell module, Steve implements two new features: Show in File System and Open in Default Editor.
Menu Bar Items
Introducing Menu Bar Items
Besides web page looking buttons, desktop applications typically have a menu bar with options like File, Edit, View, etc. Steve shows the defaults for menu bar items that Electron provides. However, if you want a customized menu, however, the entire menu needs to be re-created.
Building a Menu Bar
Overriding the default menu that Electron provides, Steve sets out to create a custom menu bar by first recreating the default functionality of menu bar through an array of menu items. Accelerators (keyboard shortcuts) and roles can also be assigned and customized depending on the user's built-in OS functionality to provide a more natural user experience.
Menu Bar Applications
Introducing Menu Bar Applications
A menu bar application is an application that lives in the menu bar (OS X) or system tray (Windows). By using a menubar library that abstracts some of the OS-specific implementation details of building an application, Steve shows that we can leverage the capabilities of Electron to provide focused menubar apps.
Code Review of a Menu Bar Application
Steve highlights code sections of a menu bar application.
Package an Application for Distribution
Introducing Electron Packager
Introducing the command line tool and Node.js library Electron Packager, Steve presents how an Electron application can be bundled with different operating systems.
Packaging an Electron App
Steve packages up the Fire Sale application for distribution.
Adding an Icon
Demonstrating how to include a customized application icon, Steve rebuilds the packaging of the application.
Code Protection and Performance
Steve discusses source code protection. While Electron can obfuscate code, performance is reduced. The V8 JavaScript engine as not designed to hide source code, an application will need to be written in C++ and make a native Node module to protect source code.
