Building in Vuejs

Tom Hopkins - Front-end Developer

Our developers are always playing around with new technologies, tools and ways of building beautiful, effective websites. A recent addition to our dev toolkit is the JavaScript framework Vuejs, which has been gaining popularity quickly over the last few years. It’s a fantastic tool for building interesting interactive apps, ranging from small widgets to larger scale complex applications (with a bit of effort!).

How we use Vuejs

The flexibility of Vuejs allows us to develop with it in a variety of ways; we have used it in our own Intranet application and most recently in a diagnostic survey tool for a global services organisation.

The Intranet is made up of a series of widgets, the most prominent being the news feed. We used Vuejs in building out the news feed widget as it allows us to very easily create features like infinite scrolling without much extra work. 

We also have future plans for the Intranet which involve the use of Vuejs. An example of this is a great addition to the news feed which enables us to poll for latest news being posted, making the news feed a live feed of the most up to date information! Useful when you need to keep your employees up to speed with the latest developments and communications. 

The most recent project on which we have used Vuejs is for one of our clients, a leading UK services company. They asked us to create a fun interactive survey to serve as a diagnostic tool to gather insight from a variety of audiences and sectors. It looks into how automation and artificial intelligence are going to impact the workplace and our jobs in the future.

The survey’s goal is not just to seek information from users, but to make them think about how prepared they are for future changes. Through the process of the survey, the questions give users room to breathe and think about the impacts that might hit their workplaces; at the end, the tool collects their information and provides them with useful insights to help their challenges going forward. 

If this were built in the normal way, this would be a large ‘boring’ form, quite unlikely to receive very much user engagement. With Vuejs we are able to create a multi-step survey tool with interesting interactions and animations, which are a great way to keep people engaged for longer periods of time, enhancing the chance of people completing the survey. 

The use of animation and the user journey method through the survey tool was important to maintain engagement, and Vuejs allows us to achieve this in a quick and effective way. Vuejs has inbuilt transformation tools which enable us to build animations that merge between the different input types; it also makes it very easy to craft custom user journeys - like a step by step survey tool - using its powerful templating functionality.

Why use Vuejs?

Vuejs has many competitors, some you might be aware of: Angular from Google which has been a strong contender for nearly a decade and React from Facebook with a similar tenure. 

So, why use Vuejs when we could reach for these other popular frameworks?

Starting with the comparison for Angular, we have used this once on a project to great success. However, from this experience, we learned that Augular’s strength lies in the large complex application camp - it’s not very good at small widget-like apps, which we often require.

Angular is very opinionated in the way you craft it - to its advantage as it makes the creation and maintaining of larger scale applications easier, especially with its great documentation. But we very rarely have a need to create large scale complex applications, as our focus is typically more on brand and marketing which doesn’t often require such a tool.

React lands on the opposite end of the spectrum, whereby it’s great for both small scale applications and large scale applications because of how unopinionated it is. 

There is very little to React at its core, which allows you to pick and choose whichever additions you want, enabling you to build more and more complex applications as you go. But this does mean that time and energy needs to be spent researching how others have gone about creating applications to React. There is no one piece of documentation on the best way to create an application using React, making it harder for a mixed team of developers to pick it up when we want to scale up the complexity.

Vuejs falls nicely in between these two. 

It’s a bit more structured on how to build applications, making it very easy for a mixed team of developers to pick up thanks to its great documentation and guides; at the same time it’s still open and flexible enough to do what we want - be that large and complex, or small and simple.

Conclusion

Vuejs is a great tool to reach for when you need lots of interaction on the page.

That doesn’t mean it’s always the tool to reach for. We believe in going with the right tool for the right job, so Vuejs is one of many options we use - and we have many plans to use it more in the future so watch this space!

Begin your move to more

We can build your competitive advantage and achieve your business ambitions through brand-led, multi-channel customer experiences