This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

What is the Electron

Electron is a library for building desktop applications using JavaScript, HTML, and CSS. These applications can be packaged and run on Mac, Windows, and Linux computers, or placed in Mac and Windows App stores.

Why is Electron so popular

Typically, applications for each desktop operating system are written in their native language. That means you may need to maintain three different technical teams to write versions of Mac, Windows, and Linux applications. Electron enables you to write applications once in a web language and achieve cross-platform results, saving development costs and improving development efficiency.

How did you do that?

Electron combines Chromium and Node.js with a set of custom apis for native OPERATING system functions such as open file dialogs, notifications, ICONS, etc.

Development experience

Developing with Electron is like building a web page that uses Node seamlessly. Or like building a Node application, but using HTML and CSS to build the interface. And you only need to design for one browser, the latest Chrome.

A prerequisite for

Since the two components of Electron are websites and JavaScript, you need experience with both before you start. Check out some tutorials on HTML, CSS, and JS and install Node on your computer.

Two processes

Electron has two types of processes: Main and Renderer. There are modules for a single or two processes. The main process is more behind the scenes, while the renderer process is each window in the application.

The main process

The main process, usually a file called main.js, is the entry point to each Electron application. It controls the life cycle of the application, from opening to closing. It also calls native elements and creates each new renderer process in the application. It has the full Node API built in.

Rendering process

The renderer process is a browser window in the application. Unlike the main process, there can be multiple renderers, and each process is independent. They can also be hidden. Usually one of these is called index.html. They are just like typical HTML files, but in Electron you can also use the entire Node API (typically implemented via preload.js), which is different from a Web browser.

Want to like this

In Chrome (or other Web browsers), each TAB and its Web page is like a single renderer process in Electron. If you close all the tabs, Chrome still exists, which is just like your main process, and you can open a new window or exit the application.

Keep communication

The main and renderer processes need to be able to communicate because they are both responsible for different tasks. For this, there is IPC, inter-process communication. Use it to pass messages between the main process and the renderer process.

Put together

The Electron application is similar to the Node application and uses a package.json file. There you define which file is your main process, so Electron should start your application from there. The main process can then create the renderer process, and you will use IPC to pass messages between the two.

Quick start

The Electron Quick Start is a basic Electron application that contains the package.json, main.js, and index.html that you learned about here – a good place to get started! In addition, project templates can be used. Resource links are as follows:

  • Electron Quick Start
  • Awesome Electron: Boilerplates

packaging

Once you’ve built your application, you can package it using the command line tool electronic-Packager for Mac, Windows, or Linux. Add this script to your package.json. Check out the following resources to launch your app in the Mac and Windows App Stores.

  • electron-packager
  • Electron API Demos packaging scripts
  • Mac App Store Electron Guide
  • Windows App Store Electron Guide

More resources

You know…

  • Full Electron docs
  • Awesome Electron: tools, videos, components, meetups
  • Spectron (Electron Test Library)
  • Devtron