Skip to content

Frontend Architecture

Jump to bottom
Henry Mortimer edited this page Jul 13, 2017 · 7 revisions

This details the structure of the app source code and gives a summary of the purpose of some files.

React

The react code is contained in 2 folders: Pages and components. Each page should have a main jsx file in the pages folder and then any components needed should have their own files in the components folder. We are moving to using material UI for all basic components.

Common Components

In the interest of keeping the look and feel of all the pages the same and not repeating code any parts of a page that could be used should be made into a react component in a separate file. An example of this is the main navigation bar.

Connecting to Django

Connecting the react code to Django requires some setup. Routing is handled by Django and a route is associated with a Django template. The template should load the javascript files containing the react code. The template should have at least one div for the react app to mount to. To pass data from Django to react you need to pass data using the Django template. In your view you need to put your data in a dictionary then encode it as a JSON string before adding it to the template like so:

initial_data = json.dumps(data, cls=DjangoJSONEncoder)
return render(request, 'template.html', {
    'initial_data': initial_data
})

Then in the template you need to assign the data to a javascript variable so react can access it.

<script>
  window.initialData = {{ initial_data|safe }};
</script>

Static files

Since the location of static files can change with Django we use the Django static variable. It is set up like this:

<script>
  window.staticURL = {% static "" %}
</script>

Then when writing the URL for any static files prepend that data to it.

Dashboard

The dashboard allows users to view and manage their apps that use the API. Currently it consists of a list of apps and some basic information about the user.

State

The AppList component stores all the state of the apps and maps each app to an App component. As this is the one source of truth when part of the app is updated the new data should be sent from the App component back up to the AppList component. This is done using the updateApp function defined in AppList which is then passed to each App as a prop.

Displaying Errors

To display errors that may occur during AJAX requests in the app to users there is one way to do this to consistently set the error and have it cleared later. This is the setErrorMessage method in the App class. This takes a error message string and will display it at the bottom of the app card. The error is then cleared after 5 seconds.

Sass

The styling is made using sass. As with the react there are the pages and components folders for the sass files that correspond to the react components. There is also an includes folder that has helpers and the common css settings that should be applied to every page.

common.scss

This file should be included into the main sass file for every page. This sets the basic style for each page such as font, background colour etc. It also includes the helpers sass file so this does not need to be included again.

helpers.scss

A collection of common css classes and mixins that are commonly used on all pages in the frontend.

Classes

  • .center - Center text in element.
  • .pad - Add padding to top and bottom of an element.
  • .card - Class to look like material-UI card. Legacy class.
  • .button-error - A red button with white text. Must be used in conjunction with pure-button class.
  • .button-primary-inverted - A white button with blue text. Must be used in conjunction with pure-button class.
  • .flexCentre - Center element within its parent element using flex box.
  • .flexTopRight - Place element at top right of its parent element.
  • .tooltip - A child span element of this element will appear as a tooltip on mouse hover.
  • .Modal - Responsive styling for modal element.
  • .Overlay - Overlay style for modal.
  • .roundButton - A circular button.
  • .well - A bootstrap style well.
  • .padded - Add margin to all sides of an element.

Mixins

  • border-radius - Applies the border radius property for every browser.
  • boxShadow - Can apply one of 5 different levels of shadow to an element. Equivalent to material design shadow levels.
  • inShadow - Can apply 1 of 5 levels of inside shadow to an element.
Clone this wiki locally