Table of Contents for

Electron in Action

About this book

The primary goal of Electron in Action is to get you started building Electron applications quickly. We explore many of the foundational concepts by learning them as we put them to practice in code. This book seeks to not only introduce you to the basics of Electron, but also provide you with inspiration and ideas for applications of your own.

Who should read this book

The book is for anyone who wants to build applications that defy the limits put in place in the browser. It’s a book for anyone who wants to scratch their own itch and build desktop applications without having to learn a new programming language or framework. It’s a book for small teams punching above their weight and delivering applications that run on multiple operating systems from one code base. Nearest to my heart, this book is for anyone who wants to take a command-line application and provide a GUI or remove the requirement that a user have Node.js installed on their computer in order to use their application or tool.

I’ll assume that you’re familiar with JavaScript, but will guide you through any parts of the web platform or Node.js that might be unfamiliar to you, since you might only have experience in one of those areas depending on your background.

Roadmap

This book is split into sixteen chapters. It’s true that many chapters continue from where the last one left off, but my hope is that you’ll be able to read the chapters out of order if you’re simply looking to implement a specific feature in your application.

In chapter 1, we’ll cover what Electron is, as well as what it isn’t. We’ll look at some of the things that you can do with Electron that you couldn’t do with either the browser or Node.js alone.

In chapter 2, we start with a very simple Electron application. The goal here is to get our hands dirty and demonstrate that it’s easy to get started with Electron.

Chapter 3 introduces you to one of the main applications in this book: Fire Sale, which is an application that allows users to open Markdown files on their filesystem and edit them.

In chapter 4, we use native system dialogues and alerts that will allow users to select a file from their filesystem for editing in Fire Sale. The application will blur the lines between the DOM and Node’s standard library, coordinating between both to implement this feature.

In chapter 5, we will add multi-window support to your application, which introduces a set of challenges that you’re not used to dealing with in a single browser tab or in Node.js, where there aren’t any windows to speak of.

Chapter 6 brings further integration into the native operating system. We’ll append the documents opened in Fire Sale to the operating system’s list of recently opened files, set up listeners to see if other applications have changed the contents of files you have open, and update the title bar of the window based on whether or not the file has unsaved changes.

Chapter 7 explores techniques for building native applications that are shared across all of the windows in your desktop application and context menus that are available upon right-clicking in the application.

In chapter 8, we look into how to update the application menu based on the state of the application—enabling and disabling menu items as appropriate.

In chapter 9, we switch gears and create a new type of application, one that lives in the menu bar on macOS or the system tray in Windows. This is not a place we’re used to building web applications. In this chapter, you build Clipmaster, which is a small clipboard manager that can read and write to the system clipboard, respond to global hotkeys, and display notifications.

Chapter 10 ups the ante and uses a third-party library to create a version of Clipmaster that has DOM-based UI—just like Fire Sale. Clipmaster 9000, as it’s called, is able to access GitHub’s Gist API and publish clippings with a single keystroke.

Up until chapter 11, we have been using vanilla JavaScript to implement features in our Electron application. In this chapter, I’ll show you how easy it is to use compile-to-JavaScript tools like Babel, TypeScript, and CoffeeScript in your application as well as Sass and Less for styling. In this chapter, you’ll build a packing list application called Jetsetter using React.

In chapter 12, we’ll look at strategies for persisting data beyond just writing to the filesystem. I’ll demonstrate how to set up an SQLite database that you can read from and write to from your client-side code. We’ll then take a second swing at the problem using the browser-based IndexedDB.

Chapter 13 introduces Spectron, which allows you to write Selenium tests for your Electron application. We’ll write a set of tests for the Clipmaster 9000 application we created earlier.

In chapter 14, we’ll look at tools that help us package our Electron applications for distribution to users that aren’t interested in starting the application up using the command line—pretty much everyone who is not a developer and, frankly, many developers as well.

Chapter 15 covers how to sign your application for macOS, create an installer for Windows, and set up a simple server for collecting error logs and crash reports.

In chapter 16, I step through the process of getting your application into the Mac App Store. This isn’t a required step if you prefer to distribute your application on your own, but is certainly useful if you don’t have experience with Apple’s process.

About the code

This book contains many examples of source code both in numbered listings and in line with normal text. In both cases, source code is formatted in a fixed-width font like this to separate it from ordinary text. Sometimes code is also in bold to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code.

In many cases, the original source code has been reformatted; we’ve added line breaks and reworked indentation to accommodate the available page space in the book. In rare cases, even this was not enough, and listings include line-continuation markers (). Additionally, comments in the source code have often been removed from the listings when the code is described in the text. Code annotations accompany many of the listings, highlighting important concepts.

All of the code for this book is available from the publisher’s website at www.manning.com/books/electron-in-action and also on Github at https://github.com/electron-in-action. In most cases, there is a branch for each chapter. For some of the later chapters where we pick up an application from earlier in the book, I have provided a branch for the starting point at the beginning of the chapter as well as one for where we left the code at the end of the chapter. If the final code for a chapter is short, I have included it at the end of the chapter. Code for chapters with longer examples can be found in the appendix of this book. In May of 2018, GitHub announced a web service and npm package that make it easy to implement auto-updating for open-source Electron applications published using GitHub releases (https://electronjs.org/blog/autoupdating-electron-apps). If your application meets those criteria, you might consider using update-electron-app. Chapter 15 covers how to roll your own solution in the event that you cannot or do not want to use update-electron-app.

One of the scariest parts of writing a book is that a new version of Electron, Node.js, or Chromium—even a minor version—might break one of the examples. This happened more than once as I was writing the book.

I am committed to keeping this code up-to-date and will provide any errata in the README.md on that chapter’s branch. If something does not work as expected in the book itself, be sure to check the repository on GitHub or check the book’s forum.

Book forum

Purchase of Electron in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum, go to https://forums.manning.com/forums/electron-in-action. You can also learn more about Manning’s forums and the rules of conduct at https://forums.manning.com/forums/about.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray! The forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

About the author

STEVE KINNEY a principal engineer at SendGrid, an international speaker, and an organizer of DinosaurJS—a JavaScript conference in Denver, Colorado, Previously, he was the founding Director of the Front-End Engineering program at the Turing School of Software and Design and a New York City teacher for seven years.