Tech Review Series: Vue

We continue our tech review series dedicated to frontend development and today we’ll talk about Vue. Even though it’s a really young framework that does not have any big corporate name behind its back, Vue is often listed among the most popular frontend frameworks. Not to mention the fact that Vue is used by such brands as BMW and Nintendo, this framework is definitely worth paying attention to.

Vue: a brief history and the current state

Vue was first created in 2013 by Evan You who worked in Google back then. According to Evan, he did a lot of prototyping in the browser and used Angular a lot. He liked the data binding method and the data-driven DOM management that Angular offered and that inspired him to think of an equally efficient but more lightweight framework. And this is how Vue was born.

In 2014, Vue saw its first official release when You launched it on GitHub. The new framework received approximately several hundred stars in the first week and was voted to the front page of Hacker News. People seemed to really like Vue’s simplicity and approachability and that’s how it started growing in popularity.

So where does Vue stand today? Let’s have a look at some numbers that will give us a clear picture.

First, there is a report of early 2020 by Statista. The report lists the developers’ frameworks of choice and Vue came in 7th which is not bad at all. In another report from 2020 but from HackerRank, Vue comes in 8th but shows steady growth throughout the years (since HackerRank compared the responses of developers with the previous years). 

Things get more interesting when we dig deeper into the actual use of Vue against other frameworks. For example, Vue has more live sites than Angular does (despite Angular ranking 3d in the Statista report). As for the NPM-stat, Vue has more GitHub stars than React and almost the same number of packages as Angular has.

And remember we talked about BMW and Nintendo in the very beginning? These are not the only brands that favor Vue – the list also includes such names as Behance, Grammarly, Wizzair, and Gitlab. Considering the steadily growing popularity of Vue and its usage by the world’s biggest companies, it’s safe to assume that Vue has earned its fame for a reason.

Vue: technology type

Vue is an open-source JavaScript framework for creating interactive web interfaces. Its main focus is the view layer and the core of Vue consists of components and data binding. However, there are a few things that make Vue stand out.

Vue is known as a “progressive framework” – a term given to Vue by its creator. A unique feature of Vue is its combination of a bare core with a minimal set of features with a variety of adaptable pieces (i.e. a solution for state management, a CLI, a routing solution). This makes Vue much less opinionated about the user’s problems and choices if compared to other frameworks. In short, there is a whole array of useful features, all working smoothly and all well-documented but you don’t have to use them unless you need to.

As for the most distinctive Vue features, they are:

• Virtual DOM: contributes to the application’s speed;
• Components: enable developers to create custom reusable elements;
• Event handling: done with the v-on attribute;
• A built-in transition component: provides different ways of applying transition to the elements;
• Built-in directives: provide flexibility when working with frontend elements.

Vue is also known as a very beginner-friendly framework. First, it uses JS, CSS, and HTML separately which makes it easier to understand and manage. Second, it doesn’t demand you to have extensive knowledge of npm or Babel in order to get started – but as your needs grow, Vue will provide you with all the necessary tools.  

Oh, and one more great thing about Vue – it’s incredibly lightweight. Weighing about 80KB, Vue offers very fast performance and this is another advantage of working with Vue.

Reactivity in Vue

With reactive programming, the changes that you applied to the application state will also be rendered in the DOM. Sounds quite convenient, doesn’t it? Unfortunately, not all development tools are naturally reactive – JavaScript, for instance, is not.

React, on the other hand, comes with reactivity in its package and has a very powerful reactive system. Reactivity in Vue is realized by using proxy and the system in Vue 3 slightly differs from the one in Vue 2. In Vue 3, the reactivity system now has better support for monitoring changes in data due to the use of proxy objects.

In Vue reactive system, a ‘proxy’ object allows you to create a proxy for another object. This proxy can intercept and redefine fundamental operations for that object and hence, realize reactive programming in Vue.

The use of Vue: most common cases

Even though Vue is a quite universal framework that is suitable for almost any kind of project, its light weight and high speed make it a perfect fit for a number of specific use cases.

Applications with interactive elements and rich animation

Animation and transitions are trending these days as people perceive them really well and interact with them better than with other UI elements. Hence, if you plan to build an app with rich animation and transitions, Vue is your framework of choice.

We’ve already mentioned that it has a built-in transition component for applying the transition effect to the elements. Vue also enables developers to easily add external animation libraries to the app, thus increasing the app’s interactivity a lot. 

Vue allows multiple ways of working on animation – all you need to do is apply a custom attribute and do a bit of CSS coding. And voila, you can tweak the animation as needed. And considering that Vue works at an almost lightning speed, it allows to quickly assemble your MVP, both in terms of design and API. The reusable components that Vue offers also contribute to the speed of development and reduce time to market.

Prototyping

If you need to quickly create a working prototype, Vue is a great option. Its components can be written in pure HTML, CSS, or JavaScript which adds to the simplicity of using Vue. As well, this framework has very well-written and extensive documentation which is another big advantage, especially for beginners.

One more feature that makes Vue suitable for prototyping is that its CLI allows to quickly create a production-ready setup. And for those who don’t want to work with the CLI, Vue offers an option of using Vue UI (graphical user interface).

Vue Pros and Cons

We’ve talked a lot about how great Vue is – so are there any pitfalls to be aware of? Even though Vue doesn’t have too many obvious disadvantages, there are a few things to consider when choosing a development tool to use for your project.   

Expert Opinion

Vue is an open-source progressive framework for JavaScript that is used to build web interfaces and SPA’s and can also be used both for desktop ( Electron ) and mobile app (NativeScript, Capacitor) development.
Unlike other frameworks, Vue.js can be used as a library and as a fully-fledged framework. It can be modified, changed, and scaled depending on your needs which makes Vue highly flexible and suitable for a huge variety of projects.

The most distinct Vue advantages include its well-written documentation and an impressive list of officially supported tools (Vue CLI, Vue Router, Vuex, browser, and IDE development tools). In addition, Vue’s community and ecosystem are constantly growing which means you will always be able to receive the necessary support and information.

If you already have an application and want to add some interactivity to it, Vue can help. Since it’s based on JavaScript, it can be easily integrated into any project using JS. However, you can also use Vue to create the frontend part of an application from scratch. As for its performance, Vue uses virtual DOM which makes it really swift. In this framework, dependencies of a component are automatically tracked during its render, so the system knows exactly which components actually need to re-render when the state changes.

Summing up, Vue is a lightweight and swift framework that offers you immense flexibility. Vue may not be the best choice for complex and large applications so I highly recommend playing to its strengths and using Vue for quick prototyping and small and middle-sized project development.

Frontend Engineer

Nikolaj

Conclusion

At SoftTeco, we work with different types of projects and for some of them, Vue is the best option. Being so quick and efficient, this framework is great when you need an interactive and feature-rich application or require to launch it quickly.

Don’t forget to sign up for our newsletter and receive informative articles on web and mobile development! And if you have any questions left, leave us a comment and we’ll be happy to answer them.