FrontendMasters – Build Cross-Platform Desktop Apps with Electron


FrontendMasters – Build Cross-Platform Desktop Apps with Electron Download

Learn how to build desktop applications with Electron, the underlying technology for Github’s Atom text editor, Microsoft’s Visual Studio Code IDE, Slack’s desktop application, and many others!

FrontendMasters - Build Cross-Platform Desktop Apps with Electron Download
FrontendMasters – Build Cross-Platform Desktop Apps with Electron Download

Learn to build cross-platform desktop web applications for MacOS, Windows, and Linux with JavaScript. Manage Electron’s multiple process architecture and facilitate communication between processes. Build applications that live in the system’s menu bar or taskbar. And learn to debug, test, package and distribute your applications on multiple operating systems.

This course and others like it are available as part of our Frontend Masters video subscription.

Table of Contents

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.
  • 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.

Wrapping Up

Concluding the workshop, Steve takes various questions from students and thanks them.



FrontendMasters – Build Cross-Platform Desktop Apps with Electron Download


If This Post is Helpful to You Leave a Comment Down Below Also Share This Post on Social Media by Clicking The Button Below

You might also like

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More

Don't Miss Any Course Join Our Telegram ChannelJoin Channel