AsTeRICS

Structure

This chapter is about the general structure of the AsTeRICS Grid project:

  1. Project structure
  2. Sources structure

Back to Overview

Project structure

The AsTeRICS Grid project is hosted on GitHub. These are the main folders and files in the project:

  • app/: folder containing static and built resources for the actual AsTeRICS Grid application. Host this folder in addition to ../index.html in the root folder on webserver in order to and open the ../index.html file in order to start AsTeRICS Grid.
  • docs/: folder containing various documentation resources, e.g. this manual
  • scripts/: folder containing shell scripts, e.g. for releasing a new AsTeRICS Grid release
  • src/: folder containing Javascript sources
  • superlogin/: folder containing configuration of superlogin, a tool that handles users and databases for CouchDB, the database backend used by AsTeRICS Grid.
  • .babelrc: configuration for Babel Javascript compiler, only needed for running Jest tests, other Babel configuration is found in webpack.config.js
  • .gitignore: file specifying which files to ignore by Git version control
  • CNAME: configuration file of GitHub, specifying which alternative domain points to the version that is found on the GitHub gh-pages branch. Therefore the version found on this branch is the version that is delivered when opening https://grid.asterics.eu/.
  • index.html: entry point of the application, uses resources from the app/ folder
  • LICENSE: file specifying the license of AsTeRICS Grid which is AGPL3.
  • README.md: markdown readme file for the GitHub project page
  • package.json: npm configuration file specifying dependencies and scripts for the AsTeRICS Grid project
  • package-lock.json: file generated by npm specifying the exact version of dependencies used in the project
  • webpack.config.js: webpack configuration file specifying options for building and bundling the application

Sources structure

All custom sources are located in the src folder which has the following structure:

  • css/: includes custom stylesheets
  • js/: all pure Javascript sources
    • externals/: folder including ES6 module wrapppers of libraries that are included externally within a <script> tag in index.html. Wrapper is needed in order to make the libraries test- and mockable with Jest.
    • input/: folder containing modules implementing various input options like hovering or scanning
    • model/: definitions of data model classes using ObjectModel
    • service/: all kind of modules providing a functionality that is related to AsTeRICS Grid’s functionality, access the database or performing actions
    • util/: all modules providing any general functionality that is needed by other modules or services
    • vue/: all Vue.js related modules, not including vue components
    • grid.js: module that creates dynamic grids (UI) out of the saved data in the database and provides interaction possibilities with the grid
    • mainScript.js: starting point of the whole application
    • router.js: module that does routing to different views based on the current hash of the URL, e.g. #main, #login or #grids. Uses the Navigo library.
    • templates.js: module that holds HTML templates which are used for generating the HTML sources for various grid elements
  • vue-components/: folder containing all Vue.js components
    • components/: folder for general purpose components
    • modals/: folder for modal (popup) components
    • views/: folder for view components, see all kinds of views in the user documentation

Elements in folder “app/”

Besides the custom sources in the src/ folder the app/ folder contains these elements which in total realize the working AsTeRICS Grid application:

  • build/: folder containing a built and minified file of all sources that are included in the src/ folder. For transpiling and bundling webpack is used.
  • build_legacy/: also containing a built and minified file of all sources in the src/ folder, but not transpiled with Babel and therefore containing newer language features (e.g. arrow functions) which may not be working in older browsers (e.g. IE).
  • css/: global stylesheets which are directly included index.html. There is no specific reason for not putting them into src/css/ and let them also be bundled with webpack to the bundle in build/.
  • dictionaries/: lz-string compressed predictionary dictionaries including the most frequently used words of different languages. The dictionary fitting the user’s language preferences is automatically imported on creating a new user and visible in the manage dictionaries view.
  • examples/: folder containing example grid-sets. The gridset default_[language_code].grd is automatically imported on creating a new user.
  • img/: folder containing images and icons
  • lib/: folder containing various javascript libraries, which are not imported using npm.
  • polyfill/: folder containing polyfills which are used in order to bring newer language features to older browsers
  • simple/: folder containing a simple version of AsTeRICS Grid which only shows simple buttons which can trigger ARE actions defined in a gridset (.grd) file.
  • index.html: starting point of the application, basic html including all bundled javascript resources and libraries.
  • manifest.appcache: AppCache manifest file including all resources to cache for offline usage
  • manifest.webmanifest: Web App Manifest file containing information about the app and making it usable as progressive web app, e.g. using and installing it in an app-like fashion on smartphones.

Next Chapter →

Back to Overview

← 02 Tools →