Architecture

Architecture

This page will give an overview of the frontend architecture.

React

React will be used to develop the frontend of our application. React is a JavaScript library for building user interfaces and is developed and maintained by Facebook. It is component-based, where the UI is built with encapsulated components that manage their own state, which are then composed to make a complex UI. This fits our project well as the product required the design and implementation of several smaller, self-contained components for data visualisation. We will use React with TypeScript to promote sustainable code and avoid unexpected behaviour.

Apollo Client

The data transfer between backend and frontend is handled by Apollo Client with GraphQL. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL gives clients the power to ask for exactly what they need and nothing more. This mitigates some of the downsides with REST, like over-fetching while saving bandwidth and reducing waterfall requests.

Apollo Client presents a simple developer API for performing GraphQL queries and mutations through a set of React hooks with built-in support for handling the three stages of a network request; loading, success and error. Apollo Client uses a normalised, in-memory cache to dramatically speed up the execution of queries that don't rely on real-time data.

State manager

We chose to use Redux assisted by @reduxjs/toolkit for state management.

Storybook

Storybook will be used during the development process to enable the development of components in isolation. It will also provide end-users with a catalogue of available components they could embed on their own sites.