Building a desktop app with JavaScript and Electron
Published by O'Reilly Media, Inc.
It might come as a surprise, but you're likely already using desktop software written in JavaScript. Popular apps like Atom, Slack, and Visual Studio Code use GitHub’s Electron framework to combine the power of the desktop with the convenience of coding in JavaScript.
Over two three-hour sessions, Felix Rieseberg teaches you how to turn an existing web application into a powerful desktop application that is deeply integrated with macOS and Windows. Running native code, access to the local filesystem, or functioning as a default application for a given filetype: Electron allows developers to use web technologies to build apps with powers beyond the reach of a website.
Starting with a basic “Hello, World” in a bare Electron environment, Felix walks you through turning it into a functional code editor that features native integrations, native “look and feel,” and a build system that turns your JavaScript into binaries for all platforms. Along the way, you'll also explore strategies to share code between your web and desktop apps and discover how to ensure security within your app.
What you’ll learn and how you can apply it
By the end of this live, online course, you’ll understand:
- How Electron apps work
- How Electron combines Node.js and Chrome into a single runtime
And you’ll be able to:
- Port existing web apps into desktop apps
- Create new desktop apps using JavaScript
This live event is for you because...
- You’re a web developer who wants to expand your skills to the desktop.
- You have a web application that could benefit from being a standalone desktop app.
- You’re curious how applications like Visual Studio Code, Atom, or Slack were built.
Prerequisites
- A working knowledge of JavaScript (ES6), Node.js, HTML, and CSS
- Basic familiarity with the command line (e.g., how to run simple commands like npm start)
Required materials and setup:
- A machine (Windows 7+, macOS, or a recent version of Ubuntu) with the code editor of your choice (Visual Studio Code, Atom, or Sublime recommended), Node.js 7.x, and npm 4.x installed
- Install Electron Forge using npm install --global electron-forge before the course begins
Recommended preparation:
Developing an Electron (book chapter)
Cross-Platform Desktop Applications: Using Node, Electron, and NW.js (book)
Building Cross-Platform Desktop Applications with Electrook (book)
Schedule
The time frames are only estimates and may vary according to how the class is progressing.
Day 1
Introduction to Electron (30 minutes)
- Lecture and demonstrations: Electron basic concepts; main and renderer processes; project structure; setup and “Hello, World”—the first window
- Hands-on exercise: In this exercise, we’ll create the “Hello world” of a desktop app with Electron. We’ll setup the project’s core scaffolding, install the required dependencies, and create a “main” thread. Then, we’ll be opening our first window, entering the world of “renderer processes”.
Introduction to the code editor sample app (15 minutes)
- Lecture and demonstrations: Turning web apps into desktop apps; the initial port—taking the web app into Electron
- Hands-on exercise: In this exercise, we’ll explore turning a sample web app into a desktop app. The sample application is a simple code editor, running in the browser. In this exercise, we’ll take a peek at the web app.
Break (10 minutes)
Code editor: Going native (40 minutes)
- Lecture and demonstrations: Customizing the window; opening a file; window menus
- Hands-on exercises: Naturally, a code editor would benefit from being a desktop app: It could read and write to the local filesystem, could run native code, and could register itself as a file handler. In this exercise, we’re taking the webapp and turn it into a desktop application that supports those features.
Day 2
Code editor: Binaries and installers (40 minutes)
- Lecture and demonstrations: Creating a binary with Electron Packager; installers and compilation; using Electron Forge
- Hands-on exercises: In this exercise, we’re turning our desktop app into a portable binary - and will create an installer to ship said binary to users.
Break (10 minutes)
Security and the Electron ecosystem (45 minutes)
- Lecture and demonstrations: Ensuring security; using the Electron ecosystem—modules
- Hands-on exercise: In this exercise, we’ll work with preload scripts and Node integration settings to ensure that remote web content does not have access to privileged local resources.
Wrap-up and Q&A (20 minutes)
Your Instructor
Felix Rieseberg
Felix Rieseberg is a senior desktop engineer at Slack, core contributor to Ghost, and an Electron contributor. Previously, he was a senior open source engineer at Microsoft and executive editor at Apfeltalk.