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