ed8ffd2 Aug 31, 2015
40 lines (29 sloc) 3.26 KB


Please read Electron's Quick start. The rest of this document assumes you've read it.

Electron App Layout

Light Table's Electron app has the following layout:

├── package.json
├── main.js
├── LightTable.html
├── node_modules/
└── ../../src/

Description of each file/directory:

  • package.json - This is a manifest file that sets the name, version and the js file to start the main process. To learn more about how Electron uses it read the source.
    • Our package.json has an additional 'browserWindowOptions' key. This key is used by the main process to set BrowserWindow options. This is placed in package.json because it is a declaration of an Electron app, like the rest of the file.
  • main.js - This is the heart of the main process. All GUI interactions run through this file. This also handles the CLI. Recommend understanding this file.
  • LightTable.html - This is the web page we see as our editor. It lives in the renderer process.
  • node_modules - These are node packages used by the renderer process. These are described in this doc
  • ../../src/ - This is the ClojureScript code that is run in the renderer process. It is loaded by LightTable.html.

Miscellaneous Pointers

  • Communication between main.js (main process) and ClojureScript code (renderer process) happens through ipc messages and remote objects.
    • For example, when a window receives a focus event, the main process sends an ipc message on the "app" channel to the renderer process. The renderer process receives that message and invokes a :focus trigger on the app object.
    • IPC messages between the main and renderer process can be logged in the terminal with $IPC_DEBUG e.g. IPC_DEBUG=1 script/
  • We use webview for our browser.
  • We use remote-debugging-port to do browser eval.

Additional Links