Among the many JavaScript front-end frameworks, Vue.js stands out as a new favorite among developers, eagerly learned and applied in practice. It’s growing and gaining popularity fast. Touted as the progressive framework, Vue is approachable to learners and versatile in use. It helps teams achieve high performance and fully optimize their apps. Many large companies were eager to adopt it. We took a look at the most prominent examples to understand why Vue.js is becoming so popular in the world of front-end development.
Vue.js is a young framework that offers many possibilities and uses popular practices like component-based development (similarly to React). It’s a particularly useful aspect of Vue. Thanks to this approach, developers can isolate and build small components that can be reused in many places in an application. This speeds up work significantly, improves code quality and makes project structure cleaner. We usually use the term single-file components. Each has a template, its own script, and styles. Which is all that a component needs. No matter the framework, a website can be built out of these three elements. What we like about Vue is that if you open a Vue component, you have everything you need right there in the file. Thus, single-file components are a much-appreciated characteristic of Vue.
{% raw %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div>
<button @click="increment">{{ counter }}</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
increment() {
this.counter +=1
}
}
}
</script>
<style lang="scss" scoped>
button {
width: 30px;
height: 30px;
margin: 10px;
}
</style>{% endraw %}
Of course, if someone doesn’t like this approach, they can ignore it. It’s not mandatory to use single-file components in Vue.
Facebook’s Newsfeed
The social media moloch used Vue for the marketing of its app, trusting the technology for such a public-facing purpose. Though it might have been a project delivered by contractors and not Facebook’s engineers, it’s still a clear indicator of Vue’s maturity.
Many teams working on new projects these days pick Vue, because it’s a pleasure to work with. It’s easy to start a project in Vue, and since the framework is not difficult to learn, developers less familiar with it can catch up quickly. The code is clean, and it’s easy to incorporate code reviews into the process. Creating a simple website with Vue can be a good idea because development will be fast and efficient, and the end result will be reliable and easy to maintain.
Netflix
The team behind Netflix was eager enough to try Vue that they used it for internal projects. Both have to do with infrastructure management and operations. According to the team, the experience has been a blast.
That sounds believable, as user interfaces can be built quickly with Vue.js when there are many reusable elements in them - like buttons, sliders and checkboxes. And then, when you want to change how a component looks globally, you only need to change the code in one place. For admin panels, where components are reused very often, this is a great advantage.
Grammarly
Grammarly is a life-saving tool for anyone who writes anything at all on their computer. It helps with spell-checking, style and text clarity. Vue was used for Grammarly’s user interface, likely for the same reasons that convinced the Netflix team to use this framework.
Google Charts
Vue.js was used to build a reactive wrapper for the Google Charts library. The idea was likely to make the charts interactive. Vue.js can help you introduce automatic binding between the script and the template. If we take charts as an example: when a chart parameter changes, the template is automatically refreshed. So when you have a column representing the value of ’1’ and you change the value to ’2’, the column in your chart will automatically get higher. This is called data binding, a common aspect among frameworks, but it’s particularly nicely implemented in Vue. It allows developers to build interactive UI elements easily and quickly.
[My Nintendo](https://my.nintendo.com/?ref=madewithvuejs.com)
Well-known by gamers worldwide, Nintendo is a Japanese company delivering gaming hardware and video games. Their Nintendo Switch gaming console has been a hit since its release in 2017, shipping 3 million copies in the first month after launch. A reward system for Nintendo players’ accounts has been introduced using Vue.js.
Wizz Air
The airline used Vue as the main front-end framework for their website. This is a choice made by more and more companies. At iRonin, we use Vue in our Talent Management System. We started working with Vue a while ago and we don’t regret it. “It’s my personal favourite front-end framework,” says a Full-Stack Ruby on Rails Developer at iRonin. “It was easy to get into, but the deeper you go with Vue, the more you realise how complex and carefully designed the framework is.”
The New York Times
The NYT’s ‘Top Stories’ are built with Vue. For other websites like it - ones that depend on dynamic, real-time changes to website elements - can use Vue with great success. Reusable components helps if you have a website with a number of articles, as every article is a component with the same elements: title, author, text, header image. You can easily reuse single-file components to make the architecture clear and concise.
Adobe
Adobe’s Portfolio, which is a tool for building custom websites by creatives, uses Vue. The team had to migrate from their previous framework and integrate the new app with existing code, which turned out to be a breeze to do with Vue. The fact that Vue can be easily integrated into a website built with a different architecture and used only for particular elements of it was likely a big help.
GitLab
This tool for DevOps automation offers a suite of services that improve reporting, analytics, administration and code management, among other things. They needed a solution that would help them implement more complex features. They chose Vue.js and introduced it slowly, adding and migrating features while avoiding a full-scale rewrite. They achieved their goal while making their app more efficient along the way.
According to their blog post by Jacob Schatz, they originally chose Vue for its simplicity and ease of use. They knew that getting started with this framework wouldn’t require too much effort, as the documentation is satisfying and external libraries aren’t necessary for Vue. And integrating the framework into existing code was reportedly a breeze. Additionally, because Vue doesn’t require JQuery at all, working with it produces less code overall - and consequently takes less time.
Another benefit of Vue they enjoyed were its close ties to vanilla JavaScript. “I find it really interesting that the ones who spend the most time in Angular tend to not know JavaScript nearly as well,” wrote Schatz. But Vue.js has no such detrimental effect on those who choose to focus on it. This keeps GitLab’s team members’ minds fresh and their skills sharp. And after years of using Vue, they are still happy with their choice.
Behance
This well-known platform that allows designers to share their work with the world and create functional portfolios made a move to Vue from their own custom solutions. It was a move most companies in their position would eventually make. By using a framework (any framework), you end up with a more standardised application. The code and solutions tend to be somewhat uniform. This makes it easier to introduce a new developer to the team (as opposed to explaining how custom solutions work). Shuffling project teams becomes simpler and work can pick up faster after roster shifts. Additionally, Vue.js in particular keeps developers’ JavaScript skills sharp enough to more easily shift to a different framework, should the need arise.
Conclusions
Vue.js is a great front-end framework. It’s still young, but its fast growth is made obvious by how many established companies already use it. Vue helps developers start projects quickly, remove redundancy from their daily work and learn a lot along the way, which can bring unexpected value to any business. It’s no wonder teams are looking for ways to incorporate Vue into their stacks.
Web applications often share many similarities. This can be exploited to speed up development and reduce costs - if the right technology is applied.
At iRonin, we always focus on the client’s business needs when we choose the best technology for their project. This is why our services include Vue.js development.
