Skip to content

Instantly share code, notes, and snippets.

@datapimp
Last active January 8, 2016 04:55
Show Gist options
  • Save datapimp/6584bfce524faa185496 to your computer and use it in GitHub Desktop.
Save datapimp/6584bfce524faa185496 to your computer and use it in GitHub Desktop.

Project Codename: Supervisor

What is it? A central event bus which manages the spawning and creation of different sub-processes in the Skypager Authoring App, namely:

  • the Electron BrowserWindow
  • the Webpack Dev Server
  • The React-Native Packager Process
  • CLI Commands (npm run scripts)

Why?

Managing the state of electron's BrowserWindow processes is already a pain by itself. It is exponentially worse when you add to this the need to also spawn up webpack-dev-server instances to provide those windows with content, and when the UI windows themselves have buttons which can trigger events that need to be coordinated from the central electron container. Having a very simple, unified API for any of the child processes to dispatch actions to a central place, in order to modify state, is a big productivity gain.

Redux

Redux is a 'predictable state container' for javascript apps. I would like to use this, and the standard flux action {type = 'ACTION', payload = {} } as an event and messaging system for the above processes.

The state we care about for the above processes is not of the highly technical nature: for that there is the electron IPC system, node's process.send, the webpack socket.io / websocket interface, etc.

What we care about is more like the essential, serializeable aspects of the application state. Which projects are being used? What is their root folder? Which projects are currently being worked on? in dev mode / author mode / or production mode? How big is the window and where is it positioned?

Coordinating the spawning of webpack dev server processes on a randomly available port, and when that server is ready opening an electron BrowserWindow to the right URL, and killing that server if it is no longer needed, should all be easy to do, and I think a redux store with the standard flux action objects is a great tool for the job.

It also allows us to dispatch events from a UI screen which might kick off something in the electron process, spawning a new webpack dev server, etc etc.

Since this state is serializeable, being able to snapshot it and restore this state the next time the app is used is another benefit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment