FAM Frontend Design

This page highlights aspects of the design of the FAM frontend.

The FAM front-end is built using Vue.js in a single page application (SPA) model. The front-end is deployed to an AWS S3 bucket and served up from an AWS cloudfront distribution using a vanity URL configured with an automatically-renewing certificate in AWS Certificate Manager.

Communication with the FAM API backend is done using the Axios framework and using the OpenAPI generator to generate a client library (based on Axios) to simplify back-end communications. The Axios framework is leveraged to use an http interceptor to add the security token.

Error and success messages are being displayed as 'toast' messages using the vue-toastification library. Toast messages appear as non-modal overlays in the top-right corner. Messages can have customized icons, colors, timeouts, message text, and actions. The two main types of messages are success and error. Warnings might be used as well.

Form validation is being done using vee-validation library. Required fields can be marked and display custom messages to the user when a validation rule is not met. Also, form submission can be disabled when there are any fields with any validation failure. vee-validation has been chosen over vuelidate because the later is more difficult to deal with conditional validations.