Project Details

Project Details

Build System

Our project uses gulp to:

• combine all individual modules into a single file
• transpile ES6 code to ES5 with babel.js
• minimize JS and CSS code
• generate source maps
• add vendor prefixer to the css
• provide a server with live-reload

Installation

# install gulp globally so you can run it from the command line
npm install -g gulp-cli

# install all dependencies
npm install

# run gulp to build all the files start the livereload server on http://localhost:8080 
gulp

Note: if you only wish to use the server without rebuilding the files from the js/ directory, use:

gulp connect # starts the server on http://localhost:8080 

Code Structure

Note: Although no linter is added as of yet, the code closely follows the conventions from Airbnb's ECMAScript 6 Javascript style guide

js/index.js

The app entry point is js/index.js. It performs the initial application setup (loads the app when jQuery loads, loads the initial data from the server etc.)

js/app/*.js

The main application object is js/app/index.js, which holds the necessary global application state flags and application level methods. It is extended once the app loads in index.js with the contents of app/constructor and app/cache. This means that from here on now, any file that does require(/* path to js/app */) is getting that populated object since calls to require are cached.

js/dom/*.js

The js/dom folder holds all the code interacting with the DOM (go figure 😜). The code is split into:

• "static" methods that are used everywhere (such as adding algorithm info to the DOM) and,
• setup code which is called within the app/constructor, after the DOM is ready, to initialize all the elements with their contents and listeners.

js/editor/*.js

The js/editor folder holds the code to create and execute code in the ace editor.

js/module/*.js

The js/module folder holds all the tracers and their variations and it is essentially the same as js/module on the gh-pages branch. The only changes are present in js/tracer.js where the code is converted to ES6. All the modules are exported together and then "required" inside the entry point js/index.js where they are attached to the global window object so eval can use them when executing code in the code editor.

js/server/*.js

The js/server folder holds all the code to load data from the server and utilizes promises from RSVP.js. In js/server/ajax are some helper methods to make requesting from the server a little easier. The main method is js/server/ajax/request.js that is used by all other methods to call $.ajax with certain options and set/reset the global isLoading flag for every request.

js/trace_manager/*.js

The js/tracer_manager folder holds the same logic as the original tracer_manager from gh-pages branch converted to ES6 and split into modules based on functionality.

js/utils/*.js

The utils folder holds a few helper methods that are used everywhere such as building the strings for algorithm and file directories.