ers to validate their algorithms in a live setting using parallel-group double-blind randomised trials or A/B Testing to determine whether recommendations lead to measurable gains.
6 Implementation Details of the RiPPLE Client
This section provides information on the implementation of the RiPPLE Client. Further details can be found on the Wiki333https://github.com/hkhosrav/RiPPLE-Core/wiki page of the project on GitHub.
The RiPPLE client is a VueJS 444https://vuejs.org/ application augmented with Awesome Vue TS555https://github.com/HerringtonDarkholme/av-ts for the Typescript language. Its primary purpose is to consume the RiPPLE API supported by the RiPPLE Server (presented in Section 7) to provide its information to the user.
6.1 Source Code Conventions and Overview of the RiPPLE Client
The RiPPLE client follows several conventions to ensure the scalability and managability of the software. Notably, it follows the Service and Repository, and Subscription patterns to ensure development consistency and reduce code duplication. It includes the following folders:
The project root only contains files which are used for starting the build process, core application configuration, and files to dictate the behaviour of external tools interacting with the project (such as git, typescript, and npm).
The config directory contains files which are used to influence the build process.
The dist directory is short for distributable. It contains the build files required for a production build. Files created from a development build are not placed here, and are instead stored in memory.
The docs directory contains the same thing as the dist directory for each merge into master. This is to ensure that GitHub will serve the latest client build.
The node_modules directory contains 3rd party project dependencies created by npm. It should not be in source control
The src directory contains source files for the application.
The test directory contains the specification verification of how the application operates. They are executed with npm run test.
Within the src directory, there are a few subdirectories. The components directory contains all of the views for the application. In this case, VueJS is acting as the view. The components directory is subdivided into multiple directories based on the purpose of the component. The interfaces directory contains the TypeScript interfaces for the application. These are used heavily throughout the application and typically mirror the toJSON() method of the RiPPLE Server models. The repositories directory contains entities which are responsible for retrieving the external data required by the application. It is encapsulated into a single place because it (1) provides a substitution point for testing (2) allows for a flexible system architecture for easier ’plugging-in’ to changing parts (e.g., mocking data on client vs. retrieving from server), and (3) is consistent and predictable, which in turn provides for a better developer experience. Typically, the repositories are only interacted with from the services. This top-down approach is consistent with the Vue framework. the routes directory defines the routes of an application such that a URL will map to a Vue component. This is necessary in single-page applications which are dependent on state. The services directory contains a service layer which aims to encapsulate all of the business logic of the application. Given the asynchronous nature of the application, a subscription system called Fetcher also exists here. Finally, the style directory contains global CSS styles for the application.
6.2 Deployment of the RiPPLE Client
The RiPPLE client architecture is relatively simple, however it does need some configuration to work correctly.
6.2.1 Installing Dependencies
From your terminal, make sure you can access both nodeJS (node –version) and npm (npm –version). If not, you will be unable to continue. This project ships with a package.json file, which details all of the modules required to build and run the application. The simplest way to install them a