Fuga Cloud
My primary role within the scrum team at Fuga Cloud is building a new UI for the OpenStack based public cloud platform. This application is an API-driven SPA, built with Vue and Vuex. My main focus here is on JavaScript. I’m responsible for the architecture of the front-end and built this SPA from the ground up with performance as a major KPI. This application is used for managing a cloud environment in which a client can manage the account, and the cloud infrastructure. The project can be found at my.fuga.cloud.
Product features
Here is a unexhaustive list with features of the application:
- List account details
- List and add payment methods
- Overview of monthly usage in a bar chart
- List invoices and offer a downloadable PDF
- List, create and delete OpenStack API credentials and EC2/S3 credentials
- List users and see their status
Technology stack
JavaScript
The end product is an SPA built with Vue 2 and ES2015+. To manage state within the application, I made a state store with Vuex, which is inspired by Flux, Redux and Elm. For this state store I've built namespaced modules to better keep track of different types of state and prevent naming collisions.
Styling
The styling part is done with modular SCSS. For this I used the ITCSS philosophy to prevent cascading issues. More on ITCSS.
Development
The development environment consists out of a Docker cluster where the API, workers, databases and the SPA are running in separate containers. For bundling, the default Webpack configuration was slightly modified to fit the needs of the project. Furthermore, since I wanted to use a stylesheet and still be able to use SCSS, I made a build step with Gulp to compile the SCSS source files to a minified production ready stylesheet. Versioning is of course done with Git.
Testing
For testing the application, I've implemented Jest for unit tests and end-to-end tests. To safeguard code quality, I've also implemented ESLint and an SCSS linter to check code conventions in JavaScript and SCSS respectively.
Deployments
If all tests pass, the application is deployed to a Kubernetes cluster using CI/CD.
Authorization and authentication
For authorization and authentication I have implemented OAuth2 with Auth0. This is a JWT based system to handle permissions within the application and to determine who can request what data.
Performance
To improve the performance of the application, I have used code splitting to make sure all routes and conditional content is lazy loaded when needed. This ensures the size of the main JavaScript bundle is much smaller.
Monitoring
For monitoring JavaScript errors on the client side of the customer, I have implemented an on-premise install of Sentry
