Application Libraries

The project's framework is Vue.js, a lightweight Javascript framework. About Vue, some of the major topics / features:

API Documentation
Guide
Single File Components
Routing
State Management
Official support to Vue Router and Vuex (state management library)

Setup

The project setup uses Vue CLI, a Vue.js scaffolding and initial setup (boilerplate) option to init all the project's folders and configuration according to Vue.js guidelines. Requires Node.js >=4.x, npm version 3+ and Git.

The setup option used was Webpack. This setup allows us to have:

Full-featured Webpack
Vue-loader setup
Hot reload
Included linter
Testing
CSS extraction

Routing

Vue Router is used to control the project routes. This library setup is included on the Vue CLI setup steps.

State management

To isolate the responsibilities over the state management and to increase the project's data flow quality, Vuex is used. Vuex main objective is to centralize all the state management of a Vue.js application. Vuex state management

The shared states of the application are managed by what is called 'Store'. The Vuex installation option to use is Yarn according to the project's package guidelines.

Form Handling

The usage of Vue-form allows us to create form behaviours and validation based on the application state. Each input element has a behaviour and properties that, under manipulation, changes the application state. When the application state is changed, the form components are re-rendered with the new state.

API communication

To connect with the backend API services, Axios lib is used. This lib simplifies the logic required to do a HTTP connection and fits Vue.js structure, as it can be used under the single file component structure or under a data layer logic.