Disclaimer: In this post I list those things that triggered my interest on VueJs and I do not expect everyone to agree with the statements below. This is not a competition for the best front-end framework/library. The following post is a result of my exposure working on Angular, VueJs and React as a professional. Feel free to place your own thoughts on the comments and possibly end up in a robust conclusion. Finally, when mentioning Angular, I am talking about Angular 2+ and not AngularJs.

It's a fact that the decision for which library to use depends on which of those tools could cover your needs each time. As a professional I worked on the most popular ones (Angular, React, VueJs), I found all of them equally great, but I dare to say that VueJs is my favorite one. Like it is mentioned in several posts, VueJs is a combination of React and Angular and I totally agree with that - VueJs actually embrace the greatest features of Angular and React.

Googling around, I found out that most of the blogs are talking about the popularity of the front-end frameworks and libraries considering graphs and job postings, numbers of downloads per library etc. I will try to make my approach more practical, naming those features that VueJs "borrowed" from Angular and React and I like the most. Long story short, here we go:

Two-way data binding

..or else "model binding". By saying two-way data binding in a general term means that any changes to the model object, will affect the UI and vice versa. I find this feature very handy in terms of code maintenance and possibly readability. Two-way data binding is used in VueJs and Angular but not in React. When working with React, you have to manually bind the updates by calling a function from the event handler - most of the times this is nothing more than a lambda function which updates the state by setting the current value - but still this is a concern which could be avoided by having the two way data binding feature.

Easier integration in an existing project

Although all the three of them can fully cover the needs of a Single Page Application solution, there are also those cases where you just need to write a piece of more elegant javascript without having to carry on the whole framework/library. A real case scenario I usually face is when I want to add some ajax calls in a legacy Multiple Page Application (written let's say in .NET MVC with Razor) and I want to avoid using the "obsolete" to me JQuery. I am not saying that JQuery is not doing the job, but even pure javascript can do the job either. So since we are moving forward, I guess that a more modern solution could be more effective. This is where VueJs and React are dominating - it is quite easy to include a bit of VueJs or React code in a "non VueJs" or "non React" application. Although Angular introduced the Angular Elements it is still not a straight forward way to apply them outside an Angular application. Basically this is because Angular was introduced as a framework, when React and VueJs as libraries, so this is a nice starting point for the next listed feature.

Grow as you go approach - initial package size

Like it was mentioned before, Angular comes as a full solution for Single Page Applications so the initial package of (approx) 500KB contains all the relevant tools like the Router, HttpClient, built-in form validation, built-in pipes etc. As such, whether you need them or not, Angular will install them by default. VueJs and React (80KB and 100KB each) offer some more flexibility/scalability though. The initial installation is in a more frugal format and any extra packages can be installed thereafter. So at first place you get only what you need and as long as your needs grow, you can extend the setup with more tools.

Functional and Class components

Red wine, white wine.... I presume that this decision is mostly depending on each developer's style or even on the team's agreed code guide but still. Having the option to choose between Functional and Class components is offered in VueJs and React but not in Angular. I am not saying it's good or bad using one way over the other, but still it is a level of freedom that Angular is not supporting anyway. With Angular the only option is the Class components.

Built-in API

Following the previous thought, this one is a matter of personal preference as well. Comparing React and Angular, I find that Angular offers a massive API and this can be either good or bad. The Angular API covers tons of use cases in a new syntax, when React API is simpler and relies in a lower level (pure javascript). Obviously this is something that affects the learning curve as well. Thankfully VueJs contains a simple enough (to adapt quick) API but not that extensive like Angular. A conditional iteration in a VueJs component's template for example can be achieved by v-for and v-if (*ngIf, *ngFor in Angular) etc when in React we have to play with more pure javascript commands like map, spread operator etc. But again, this is a matter of personal preference.

Separation of Concerns

Separation of concerns is one of the fundamental principles when talking about professional coding. Organizing the code in sections by having each section responsible for a specific operation prevents a lot of problems in terms of code maintenance and readability. In VueJs and Angular the components hold the html, javascript and css in separate code blocks and that increases the readability possibly but for sure, it serves the Separation of Concerns Principle. On the other hand, React introduces the JSX syntax which is a mixture of javascript and html because of the belief that those two are a bit of tied to each other.

To summarize, there is no good and bad library/framework. The first step in order to choose what suits our case, is to consider the needs of this case in depth. All the three mentioned tools (Angular, VueJs and React) were built by skillful developers and the aim was to be used efficiently by developers. As a personal preference though, VueJs is my favorite tool for the reasons mentioned above. Your opinions are also welcome

☕ Buy Me A Coffee