Frontend

Overview

Huxley's frontend is written in React; as of March 2021, it is using React 17.0.1. In order to keep track of state, we use Flux (although future plans include a move to Redux).

React

React is a Javascript framework that allows you to organize your code into modular components. To learn more about it, we recommend reading the React documentation.

Huxley uses React components for each view presented to a user. A view is what a user sees -- for example, when you visit huxley.bmun.org for the first time, you're presented with a login screen, which maps to Huxley's LoginView. React allows us to write code that changes what is displayed based on a user's actions or based on information retrieved from the server, making it easy for us to build interactive sites.

Many of our components use common components to make code easier to follow and to ensure our pages all follow a similar design -- for example, we have a Button component that is used throughout our code. As you write new code for Huxley, we encourage you to split up your components and use existing components to do what you want to do. Components that are widely reused should be located in www/js/components/core.

Flux

In order to ensure we aren't constantly retrieving information from the server, we use Flux stores to store data that has already been received. For example, multiple pages that an advisor sees may require information about all of the delegates from their school. Ordinarily, you might just make an API call to the server to retrieve that information every time you need it. However, that's wasteful!

Flux allows us to only retrieve that information once using stores. All data we retrieve from the server is put in a store, and when writing components that need data from the server, we are notified whenever the data in the store changes. This also means that while waiting for new information to arrive from the server, we are able to use existing data and update our components when the new data arrives.

Our stores are located in www/js/stores; we have one for each kind of data that we are retrieving from the server. Many components call functions that are attributes of a store when retrieving data from the server.

In order to indicate that we are updating the store, we also use actions; these are fired when a GET request finishes or upon sending a POST, PUT, or PATCH request. Actions update our store locally, while requests may update the server.

Typically, from components, we use a store function when trying to retrieve data (e.g. AssignmentStore.getSchoolAssignments to retrieve all of the assignments for a given school) and an action function when trying to send data (e.g. AssignmentActions.updateAssignment to update an existing assignment).

This may sound a little confusing, but the best way to understand Huxley is by doing, so we recommend that you pick up one of our tasks!