Lauren Macpherson
April 19, 2022

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

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.

LM: ​​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 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.

LM: What’s next for A Insights?

AW: We are currently creating an early version of the Public and Health sector portal. It’s mostly down to the last ‘tweaking’ phase. Things like tables with lots of objects in a row pulling a lot of data at the same time, which is taking a little too long as Javascript is slowing it down. So we need to polish that up a bit so we get the functionality we want at a high speed.

Otherwise, we’ll keep gathering feedback from users so we can continue to improve the service for them.

Lauren Macpherson
I'm an avid sharer of the latest news, tools, and tricks relating to all aspects of product development. My main aim is to stay true to our Explain-Like-I'm-5 roots: keeping things simple and easy to understand. My other is to find any excuse to talk about gaming.

More reads

Only prototyping at the start of a project? You’re doing it wrong.
“At the heart of every new addition, improvement and update are the prototypes that help us to formulate the most successful route for the business.”
Read blog
Did gambling your budget on innovation during Covid pay off?
Who was right - those who froze budgets during the pandemic or those who invested in innovation?
Read blog