Concise plain-speak about Electron.
|What is Electron?|
|Why is this important?|
|What is developing like?|
|Think of it like this|
|Stay in touch|
|Put it all together|
Typically, desktop applications for each operating system are written in each's native language. That can mean having three teams writing three versions of your app. Electron enables you to write your app once and with web languages.
Electron combines Chromium and Node.js with a set of custom APIs for native operating system functions like open file dialogs, notifications, icons and more.
Developing with Electron is like building web pages that you can seamlessly use Node in—or building a Node app in which you can build an interface with HTML and CSS. And you only need to design for one browser, the latest Chrome.
Electron has two types of processes: Main and Renderer. There are modules that work on each or in both of the processes. The main process is more behind-the-scenes while the renderer process is each of the windows in your app.
dialogmodule has all the APIs for native dialogs like open file, save file and alerts.
The main process, commonly a file named
main.js, is the entry point to every Electron app. It controls the life of the app, from open to close. It also calls the native elements and creates each new renderer process in the app. The full Node API is built in.
The renderer process is a browser window in your app. Unlike the main process, there can be multiple of these and each is independent. They can also be hidden. Usually one is named
index.html. They're like typical HTML files but in Electron you've got the whole Node API available here, too, unlike any web browser.
In Chrome (or another web browser) each tab and its web page is like a single renderer process in Electron. If you close all of the tabs, Chrome is still there, this is like your main process, and you can open a new window or quit the app.
The main and renderer processes need to be able to communicate since they're both responsible for different tasks. For that there's IPC, interprocess communication. Use it to pass messages between main and renderer processes.
Electron apps are like Node apps and use a
package.json file. It's there that you define which file is your main process and thus where Electron should start your app. Then that main process can create renderer processes and you'll use IPC to pass messages between the two.
package.jsonfile This is a common file in Node apps which contains metadata about the project and a list of dependencies.
The Electron Quick Start repository is a bare-bones Electron app with the
index.html you've learned about here—a great place to get started! Also, check out the boilerplates for templates with your framework of choice.
Once your app is built, you can package it with the command-line tool
electron-packager for Mac, Windows or Linux. Add scripts for this to your
package.json. Check out resources below for getting your app in the Mac and Windows app stores.
The concepts here will get you pretty far, but there is of course more so here are other resources.