Skip to content
This repository was archived by the owner on Jun 14, 2020. It is now read-only.
Allan Zhou edited this page Feb 28, 2016 · 14 revisions

Overview

Terminology:

  • Electron is a technology that allows us to write cross-platform desktop applications with web technology (HTML/CSS/Javascript).
  • Node (Nodejs) is an I/O framework that is often used to build web servers. It is used by Electron, but otherwise we don't make that much use of it.
  • NPM is the Node Package Manager. It is used to install Electron and all of our dependencies.
  • ReactJS is the JavaScript library we use to build the User Interface (UI).
  • Flux is a pattern for building web applications, often used with React apps.
  • [Webpack] is a module bundler that bundles up the different pieces of the application before it is run.
  • ES6 is the future version of JavaScript, which much of Dawn is written in. The current version is ES5. Because of this, our code has to be compiled before it works. When webpack bundles the application, it also uses Babel to compile the code from ES6 to ES5.

File Structure

In the dawn/ folder you see:

  • package.json: The configuration file for NPM. It lists all of our dependencies, so when you run npm install NPM knows what things to install. You usually won't have to edit this directly.
  • main.js: The main Electron file. This file creates the main Dawn window, and loads the contents to be displayed.
  • js/: This folder contains most of the User Interface code (the react components, the Flux stores and actions, etc.)
    • actions/: Contains Flux actions, including editor actions, gamepad actions, etc.
    • components/: This folder contains all the React components on the User Interface (e.g.: Editor, Dashboard, etc.)
    • constants/: This folder contains Constants.js, which contains constants for "ActionTypes" (used when dispatching Flux actions) and "PeripheralTypes."
    • dispatcher/: Contains the AppDispatcher, the central hub of data flow between stores and actions.
    • stores/: Contains Flux stores, including editor data, gamepad data, robot data, etc.
    • utils/: This folder contains Ansible.js which is the communication module between Dawn and Runtime.
  • static/: This folder contains static content like our only HTML file (index.html), CSS libraries, and images.
  • webpack.config.js: The configuration file for Webpack. Webpack is a module bundler, it bundles up all the different pieces of the application (it also uses Babel to compile from ES6 to ES5). You probably won't need to change this.

You may also see the following folders, which are not tracked by git:

  • node_modules/: When you run npm install, all the dependencies get put in this folder.
  • build/: When webpack bundles the code, it puts the results in this folder.
Clone this wiki locally