Author
VUE.JS Is Quickly Usurping Rival Frameworks. Why?
When Evan You created Vue.js did he know his wunderkind was set to become one of the most popular frameworks in the world? Vue.js has quickly gained traction over the past couple of years and is now being compared favourably to the big beasts of Angular and React.js. It’s also gobbling up market share as more and more developers opt for the forward-looking Vue.js framework for new applications.
| Team Size | Github Statistics | .js Leaderboard Stats |
|
|
|
The JavaScript Vue.js framework is increasingly considered by developers and IT managers as the future of web applications. At its best, Vue represents the best of both Angular and React.
K&C developer Andrew Khomakha is a fan. Here’s why he thinks Vue.js development is so good as well as highlighting some downsides which mean rival frameworks Angular and React still have a place depending upon the use case.
What Is Vue.js?
Vue.js is one of the fastest-evolving JS frameworks. It is described as an intuitive, fast and easy to integrate MVVM for the creation of interactive interfaces. Since its launch, the framework has seen the velocity of its success steadily increase. Despite being written by just one person, Vue.js has found its way into the hearts of developers. The framework now stands on the cusp of leapfrogging the dominant frameworks of Angular and React. The second iteration of Vue.js was released in 2016 and now websites such as Alibaba, Baidu, Xpedia, Nintendo, and Gitlab have adopted it as their framework.
What’s the Difference Between Vue.js, Angular, and React?
The main question I hear from my fellow developers and K&C’s clients is “Why Vue, rather than React?” Most developers still automatically choose between Angular and React development and regard Vue.js as a fallback plan.
So, why Vue? Why am I right and they are wrong?! Of course, I don’t mean to say that Vue.js is always the right framework for an application but I think it is a lot more often than developers typically choose it. I believe that can largely be put down to the fact they are simply more experienced in working with React and Angular and so naturally lean towards these more established frameworks. But let’s look at the facts.
If we first look at the characteristics of Angular and React, I think my position on Vue.js will become clearer.
Angular is a very ‘totalitarian’ framework. It dictates how code should be written. You can’t get creative. Undesignated actions stand a high chance of creating a code mess.
In React we can see another approach. There is a basis which helps the developer to undertake further actions. This offers more freedom in coding. React offers a wide variety of choice. For a render-function, you may use Flux or Redux as well. However, it takes a lot of the developer’s time to assemble the project.
For sure, React is more flexible than Angular but their shared weakness is that using both frameworks is time-consuming. And time-efficiency is where Vue.js excels. Which, if you’re a client of third-party web development service such as we offer at K&C, should be a priority. In fact, why would it be any less of a priority if you have an in-house development team? You still want them to be efficient!
Vue.js is similar to React in terms of many of the positives the framework represents. But the great templates that come with Vue are very time efficient. Shadow-dom, responsiveness and smooth parent to child communication. Vue’s single file components are also closer to the Custom Web Components specified in W3C Web Components. Vue complies with this specification and provides handy and thoroughly documented solutions which flawlessly integrate with other components like other frameworks focused on SPAs (single-page applications). Vue.js also focused on resolving the main problem of all SPAs (single-page applications) – SEO.
Vue.js vs. Angular
As I previously mentioned, Angular is a strict framework. It has clear-cut rules which must be followed. By no means does this make Angular a bad framework. In certain circumstances this is also a strength. Angular has managed to develop numerous sound solutions which can be quickly realized if you know how.
However, that is where we come across the first problem with Angular – a painful learning curve. A developer has to know a lot to be able to use Angular effectively. If they are not highly experienced they’ll quickly become bogged down in researching the exact way they have to write pieces of code. In contrast, Vue.js is a straightforward framework whose learning curve is so gentle that you can start writing code immediately if you are an experienced developer.
(Shameless plug warning! J) Another option is to talk to the K&C team, who can take responsibility for your web development project and minimize operational risks.
All in all, Vue.js and Angular are very similar. And developers benefit from that. If someone who can write code with Angular wants to use Vue, they will have no difficulty switching between the two because both have similar template languages (e.g., Angular – ngIf; Vue.js – v-if).
Example of Angular.js template syntax:
<label>Click me: <input type="checkbox" ng-model="checked"/></label> <br/> Show when checked: <span ng-if="checked" class="animate-if"> This is removed when the checkbox is unchecked. </span>
Example of Angular 2+ template syntax:
<h3> {{title}} <img src="{{heroImageUrl}}"> </h3> <div *ngFor="let hero of heroes"><span ngIf="hero.show">{{hero.name}}</div>
Example of Vue.js template syntax:
<p>Using v-html directive: <span v-html="rawHtml"></span></p> <img :src="imgLink"> <div v-bind:class="[{ active: isActive }, errorClass]"></div> <h1 v-if="someVariable">Yes</h1> <h1 v-else>No</h1> <span v-for="hero in heroes">{{hero}}</span>
Vue.js vs. React
Here the situation is similar to Angular. Vue.js allows us to write code just like React does. The most significant advantage of Vue is its built-in mechanism for working with templates that function without any additional settings.
Another thing that distinguishes Vue from other frameworks is its liberal approach. You can choose not to use Vue templates. And if your love for React still outweighs the convenience of Vue then you can write render functions as in React. However, a major disadvantage to React is that different parts of the project can be written in different styles. I’ll explain a little later why this is a problem.
Vue.js incorporates the best from the two other frameworks:
- from React – flexibility
- from Angular – instruments.
The bottomline: Vue.js is a perfect way to ‘give up’ Angular and React.
The React community did just that when it uncovered the ‘open’ issue with React’s license. As an open license is a very sensitive issue for the majority of developers, they left React. Even though React’s team posted a satisfactory explanation on Facebook that React.js, Jest, Flow and Immutable.js remained under the MIT license, the community had already taken fright and many still have concerns over the future of the frameworks supervised by large corporations. A great number of React’s users migrated to Vue as a result of its relative similarity and accessible learning curve.
Vue.js Pros
Learning curve
Vue.js allows for a smooth switch from Angular and React to Vue. One of our client projects here at K&C used the ideology of Flux but Angular templates. We appointed one of our employees to slice, knowing that he wouldn’t need to be familiar with logic or learn something new to work with Vue.js templates. He just started slicing. To my mind, Vue.js has the easiest learning curve of all the contemporary web development frameworks.
Light, Efficient Migration
Vue.js is the perfect solution if you want to migrate and rewrite a project at a lower cost. Based on my experience, I can say with confidence that it’s much easier to rewrite the project from Angular 1 to Vue.js than to Angular 2+. The same is true with React as it’s possible to continue using old logic implemented on Redux and Flux on the migrated project. Also, Vue.js appears to be quite flexible when engrafted onto a legacy project because there is no need to build it entirely; only rendering needs to be implemented.
Single-file components as a separate approach
In the glittering future of JavaScript and frontend development, single-file components are expected to become a distinct development approach. This is evident in Google’s realization of the Polymer Project. We can see similar dramatic progress at organization W3C. Today, Vue.js is striving to create the same things but through its own strengths. This suggests that in the future developers familiar with Vue.js will be at an advantage because they will already be familiar with single-file components.
Core development
As noted earlier, Angular and React are supported and used by large companies such as Facebook, Instagram, Whatsapp, and Google. Vue.js, in turn, is developed by a group of individuals whose work is supported through Patreon and other funding channels. Whether this model is right or not, decide for yourself. Matthias Götzke believes that the fact that Vue.js is developed by a small team works in the framework’s favour. It results in a lean code that hasn’t been ‘over-engineered’.
Effective community support
The framework Vue.js boasts that the people responsible for Vue.js development and maintenance are incredibly responsive and helpful. For example, if you work with Angular, months can pass before they deal with a problem. Vue.js support typically addresses a problem by the following morning and in around a week can come up with a ready solution.
Vue.js Cons
Deadly flexibility
Because Vue is an extremely flexible framework, a developer can write code using whatever form they need. However, unless there is coordination among developers it can end up with a code whose parts are written quite differently. Subsequently that code becomes hard to read and maintain.
Another issue is directly connected with writing code. There are no strict rules, only recommendations. For example, once during my experience with Vue.js, we didn’t want to write according to the standards given. And Vue enabled us to realize our personal vision without following any recommendations!
However, as happy as we were at the time, under the wrong circumstances a similar approach could turn out to be ‘toxic’ and lead to irreversible consequences for an application.
Two different ways to render the same result in Vue.js:
render: function (createElement) { return createElement( 'h' + this.level, // tag name this.$slots.default // array of children ) }
<script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> ... </script>
Too good to learn
Developers prefer simplicity, which is why they choose Vue.js. They hope to find the panacea to all the problems in the world of IT. And that blinds them. I understand that. It’s incredible to know that I only need to spare 5 minutes to launch a project using one of the previously written generators, so everything starts functioning immediately.
But this feeling of power can seduce some developers into writing code without understanding certain components, like Webpack, at all. And if this component is needed to make changes, these developers will subsequently be out of their depth and will have to waste additional time.
Support for old browsers
Because of the competitiveness between frameworks and the corporations that support them, Vue.js may not be able to provide proper support for old browsers. It can turn out to be unsuitable for technologically conservative clients who want to maintain legacy mobile devices or browsers.
Why and When Vue.js Should be Used?
As a Vue enthusiast that has worked with Angular 1 and 2 as well as React, I can argue that Vue can suit all web development projects from the simplest to large, complex applications and from big desktop projects to little messengers of all types. Vue is one of the fastest frameworks in regard to rendering and development speed. For me personally, today, Vue is the ideal solution when writing web development projects of any kind.
However, we can say Vue.js. is most relevant to:
- Small or middle-sized projects
- Projects that demand fast realization
- Potential for migration and/or future changes
- Limited time to read the documentation.
K&C’s Vue.js Development Experience
When I was originally assigned to a project, I had to rewrite from Angular 1 to Angular 2. At first, it was dreadfully laborious and time-consuming.
Later, when I had become familiar with Vue.js, I was abe to implement changes easier. The project’s requirements were rather stringent: we had to write down an Amazon-like application within two months. The decision to use Vue.js turned out to be a masterstroke! The front-end team even managed to outrun our colleagues who worked on the backend. We secure the client because the K&C team was the only development company among the other companies asked to bid who could complete the project to the strict deadline. And we did so thanks to Vue.js.
In my life as a developer, Vue.js has been a bolt from the blue. I felt as though I had been looking forever for something that would give me a competitive advantage and freedom in my development. I have found it in Vue.js. Even after two months of using it consistently this framework continues to impress me and I’m discovering more and more strengths.
What’ Does the Future Look Like For Vue.js?
It is difficult to predict the future for Vue.js right now because just a year ago very few people knew about it in any detail. In my opinion, the Vue.js framework is the optimal choice for a business. The quality of results has been proven by developers like me. Just because a new technology is buzzword in the IT world doesn’t mean you should implement it. But Vue.js goes above and beyond.
