Skip to content

ES6.md

Latest commit

 

History

History
84 lines (54 loc) · 5.21 KB

ES6.md

File metadata and controls

84 lines (54 loc) · 5.21 KB
Raw

ES6 Project Update

The project is converted to ES6 and the code is added to the master branch. It will stay there until it reaches the same level asgh-pages, at which point the master branch will become the default branch.

Build System

The new app 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

Changes Summary

Note: Although no linter is added as of yet, the code closely follows the conventions from Airbnb's 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.

Remaining updates