はじめに、electronプロジェクトの作成手順はelectron getting startedを参照。
簡単にまとめる。

npm init
npm install --save-dev electron
touch index.js
vim package.json # scriptsに"start": "electron ."を追加
npm start

さて、本題。
※この記事の目的は概念の整理であり、具体的なプログラムの書き方を示すものでありません。

electronアーキテクチャ

electronはchromiumのアーキテクチャをベースとしている。なので、chromiumに詳しい方はelectronの理解もしやすいと思う。

electronには2つのプロセスが存在する。

メインプロセス
レンダラープロセス

メインプロセス

メインプロセスはWebでいうバックエンド、サーバサイドにあたる。npm startを行うとデフォルトではindex.jsが実行されるが、そのプロセスがメインプロセスになる。メインプロセスはOS機能にアクセスできる。index.jsはメインプロセスで実行されることは大切なので意識したい。

メインプロセスの役割は下記の通り。

アプリケーションウィンドウの作成
アプリのライフサイクルの管理・ネイティブインターフェースの表示
レンダラープロセスとイベントの管理
プリロードスクリプトのアタッチ
MessagePortの設定・割り当て
- レンダラープロセス間通信の際に有用
- 別途、レンダラープロセスからMessagePortを利用可能にするためのAPIを公開するコードをプリロードスクリプトに記載する必要がある

MessagePortの設定・割り当ては少し難しい（私のあまり把握していない）ので、必要なときに勉強すればいいと思う。
個人的によく使うのは、上4つの機能。

レンダラープロセス

レンダラープロセスの役割は下記の通り。

1ウィンドウに1プロセス
典型的なフロントエンド機能と同等
OS、Node.js、electronAPIへのアクセスはできない

レンダラープロセスはchromium（Webでいうブラウザ）上で動作するので、OS機能やNode.js、elctronAPIにはアクセスできない。
つまり、レンダラープロセスでできること = Webブラウザの実行環境でできること、ということである。

プリロードスクリプトについて

基本的に、メインプロセスとレンダラープロセス間の通信はできない。これはつまり、アプリ画面のとあるボタンをクリックしたら、ファイルへ保存したい（もしくはファイルからデータを取得したい）、といったことができないことを意味する。これでは困る。

そこで、プリロードスクリプトというものを利用して、メインプロセスとレンダラープロセス間で通信できるようにする。

プリロードスクリプトで記述することは、レンダラープロセスからアクセスでき、かつメインプロセスへ信号を送るAPI（関数）を定義することである。プリロードスクリプトの実行環境は、一部のelctronAPIを利用できるため、そこで定義するAPIはelectronAPIを拝借してメインプロセスへの通信機能をもつことができる。

つまり、プリロードスクリプトで定義したメインプロセスへの通信機能をもつAPIをレンダラープロセスから呼び出すことで、メインプロセスとレンダラープロセス間で通信（片方向通信、双方向通信）ができるようになる。レンダラープロセスを起点にした通信、メインプロセスを起点にした通信の両方に対応している。

プリロードスクリプトのアタッチはメインプロセス側のスクリプトで行う。

まとめ

npm startを実行する
メインプロセスでindex.jsが実行され、アプリケーション（ウィンドウ）が立ち上がる。
このとき、プリロードスクリプトも実行される
その後、ウィンドウ（chromium）上でレンダラープロセスが走り、HTML・CSS・JSから画面が描画される。
必要に応じて（例えばボタンをクリックすると）、プリロードスクリプトで公開したAPIを利用してレンダラープロセスがメインプロセスへ通信を行いデータをやりとりする

以上。

参考