Product update: Andre walks us through the front-end of an advanced data-analysis software

Lauren Macpherson
June 29, 2022
4
Min read

Our Lead Front-End Developer, Andre de Waard, takes us through the last 6 months of updates to data-analysis software A-Insights.

LM: Last year, our client A Insights rebranded from Annual Insight. Can you tell us what the company does and how the product has evolved since the rebrand?

AW: A Insights is an advanced data-analysis software that processes market data to provide insights and overviews. Helping companies and organisations improve performance by making data-driven decisions. For example, the software provides clients with competitive benchmarking and performance monitoring.

Since 2010, their focus has been on the Food and Agriculture industry. So 6 months ago we were working on updates to this portal. For the last few months however, we have been working to add a Public and Health sector portal.

Jelle Bot, our lead designer, created a UI kit to help with the design implementation. So the software has a completely new look that is consistent across all elements and assets.

M: ​​Having worked with A Insights for a number of years, has the way you approach the front end development changed over time?

AW: On the data side, we have always had our backend team create an additional API layer. This helps to structure the multiple API endpoints into one for me to send calls to. This makes it much cleaner and faster for the front-end to receive data. The backend team also build authentication and caching into this API layer.

On the design side, quite a lot has changed, as you would expect. Jelle Bot, our lead designer, created a UI kit to help with the design implementation. So the software has a completely new look that is consistent across all elements and assets.

The biggest changes

The biggest changes for me have been switching from Vue 2 to Vue 3 and using Typescript to eliminate the need for Vue X. The issue with Vue X is that it isn’t type-safe, which is fine if you’re working on a one-time project alone. But for a team with multiple devs or a project like this, which is spaced over time, you can’t always remember what values you used. Vue 3 and Typescript together have helped to ensure we don’t make mistakes or typing errors, as well as helping to write code by telling you what values you’ve used throughout the project.

We also use the composition API from Vue 3 instead of the options API. Also for the Vue X replacement. This makes it easier to use Typescript and reuse code. Plus, I simply find it easier to read.