Skip to content

Development Framework

Jump to bottom
PanagiotisP edited this page Aug 25, 2019 · 2 revisions

The application is developed using the following tools:

Electron

Electron, which is used in electron-starter.js file, is the base component of the GUI, as it hosts and renders the application's HTML pages in desktop windows.

Additionally, it serves as the application's backend, an intermediate layer between front-end and the database, as it connects to the database and executes some kind of request handling by providing the IPC (Inter-Process Communication). With this tool, we created some communication channels for get,post and put requests execution.

Below is an example of fetching the whole custom scripts collection from the database:

  • Front-end sends request
this.state.ipc.send('get-script');
  • Back-end handles the request by fetching the necessary data from the database and sending it back the application
ipcMain.on('get-script', event => {
  Script.find({}, (error, result) => {
    event.sender.send('receive-script', result.map(obj => obj._doc));
  });
});
  • Front-end receives and stores the data for later use
this.state.ipc.on('receive-results', (event, arg) => {
  this.setDistantState({ resultList: arg });
});

ReactJS

ReactJS is a Javascript library for building UIs. Its components make up the biggest part of this application, because everything that the user sees and interacts with, as well as various calculation and actions that may not be visible to the user, is done in them.

The component structure is as shown in the tree below: component tree

  • App

A component that operates as the router of the application, rendering specific components to their corresponding path. These paths are thought to be hosted on different windows. For example, the path /settings would show the application’s settings on a new (electron/desktop) window: the settings window. Right now, the application has only one window so the App component renders only the Main component to the / path.

  • Main

The basic component of the application. It renders the application’s static UI (like the application bar at the top, the side drawer for in-app navigation and the console at the bottom). It operates as a data “storage and distribution” center, as it stores most of the application’s user data and facilitates the communication between components.

  • Console

Console is a component that serves as the application’s footer. It is used to display feedback and error messages to the user, along with a timestamp.

  • FilesTab/ScriptsTab/ResultsTab

One of these 3 components is rendered as Main’s children each time. They represent the main 3 tabs of the application, in which most of the user-application interaction takes place. For example, file insertion, selection and deletion are operated in the files tab, result display, selection and export are performed in the results tab and script type selection in the scripts tab.

  • BuiltinScriptOption

This is a template component, that, with the corresponding parametrization, renders the options for every built-in index type (readability, lexical diversity, miscellaneous). In these components, the user selects the indices that he wants to be calculated. These selections directly affect the command arguments of the processing scripts.

  • CustomScriptOption

This is component renders the parameters of every saved custom script along with the custom script builder. This tool enables the addition of new scripts to the application, taking as input the script’s environment (in order to be run on the command line), path and arguments. The selected custom scripts are executed along with the builtin ones.

Material-UI

Material-UI is a collection of react components for front-end development and styling. It allows for faster and uniform development, while giving the developer enough flexibility to customize them and make something unique of them. Moreover, its components are well designed and documented, making it easier for someone to contribute to the project later.

Material-UI was used to style practically everything at the front-end; from things that the user interacts with, like buttons, checkboxes, dropdown menus, input fields and icons to elements that are purely structural, like, tabs, lists, tables, toolbars, popups and popovers. Even the text that appears is encapsulated in a material component.

Clone this wiki locally