Why choose VueJS: 5 reasons to be the next framework

why choose vuejs

Sharing is caring!

Throughout these years, I have been fortunate to be able to work with different JavaScript frameworks. Each of them has had, for me, their strengths and weaknesses. I have never had an unconditional attachment to any of them and that has made me see frameworks for what they are. Tools that can help us as much as make us have a good headache. This has made it possible to highly value what functionalities are necessary. Nevertheless, what arguments to take into account when choosing one or the other depending on the context in which I have found myself. That intended me to write about why choose VueJS.

Background to say why to choose VueJS

Looking at it with perspective, we have seen how these frameworks have passed through different generations and how they have matured.

In what I usually consider the 3rd Generation, we find quite mature frameworks.

These help us perform a large number of tasks that can execute in different browsers at the same time.

ReactJS, Angular and EmberJS are the most widely used frameworks on the market and have proven to be a guarantee of robustness and scalability.

To this shortlist, VueJS has joined a season ago.

A framework that I have been working with for a long time and from which I have tried to study each functionality.

In this post, I would like to expose five reasons why choose VueJS and why it became my favourite JavaScript framework.

I hope that these reasons convince you so that in your next proof of concept or personal project, you give it a chance.

1. A framework to learn and use progressively

VueJS calls itself a progressive framework.

When we face a development with VueJS, we can indicate which parts of the framework we want to include.

VueJS is modularizing in different separate libraries that allow us to add functionality whenever we need them.

Modularization in framework libraries is not something new in front development.

Both ReactJS and Angular have a similar organization of their base code.

What sets VueJS apart from other alternatives is how well decoupled these parts are.

How easy it is to extend core functionality, and how well all its parts work once you decide to include more modules.

The main core of VueJS is formed by a library in charge of rendering views in the browser.

Its way of organizing the code is by means of small components that contain all the HTML, CSS and JavaScript necessary to function as a separate piece.

These pieces composed in a hierarchical tree of components until our application is formed.

Using this library is as easy as importing the script into our HTML page.

If all we need as developers is a better way to organize and render our little visual components, we just stayed there and wouldn’t include anything else.

At the moment that our application begins to grow.

We have libraries to manage the routes of our application as a Vue-router or libraries to manage the global state of the application, such as vuex.

If our application had to have great optimization or have good SEO, we can include and work with vue-server-rendering.

And so it would happen to us with many more functionalities.

The number of libraries that are available (whether created by official developers or by the community) is so large.

It covers such a spectrum of functionalities that it will be difficult for us to find ourselves helpless.

This is the major reason why choose VueJS.

2. Intuitive, modern and easy to use functionalities

VueJS has not reinvented the wheel.

Our green friend was created as a personal project by Evan You, a former Google developer, in an attempt to simplify the operation of AngularJS.

The framework became so easy and simple to use.

Once its creator decided to upload it to the Github repositories, the community was using it in more and more projects.

Companies like Xiaomi, Alibaba or Gitlab are some of its great exponents. If we look at the statistics of the expectations of users in the year 2018 we find that many people and companies are interested in knowing and using it.

choose vuejs

But why this hype? Why does the community have such good words about this framework?

In my point of view, it is due to how well Evan You has been able to transfer all the good that other frameworks like Angular, ReactJS and EmberJS had.

Discarded what the developer did not provide or was complex to use.

If we had to define VueJS by four of its conceptual aspects they would be these:

  1. The data at the centre of everything: In VueJS, the components manage an internal data model. These components are designed under the MVVM pattern. This means that the developer does not have to worry so much about how or when he renders a model on screen and rather more about how the logic that manages that model has to be. HTML rendering is delegated to the library. We simply play with data, methods and HTML templates where we indicate when each part of the model has to be painted.
  2. The component system is reactive: VueJS knows how to communicate very well through asynchronous events. A child component can communicate with its parent component through events. Two parts of the system can communicate through events. A component’s own models are capable of sending events to indicate when to render. The component system becomes a living organism that reacts very well to change and performs actions programmed by the developer. This is because the component’s data model is wrapped by special getters and setters in charge of managing these reactions.
  3. No friction with other libraries or resources: When I faced ReactJS I suffered a bit with the concept that everything was JS. Having JSX did not help me with his learning. Angular half forced me to include TypeScript to write components. I like TypeScript, what I don’t like is that they impose tools on me. VueJS is the most aware of this: Use whatever you want, use whatever tool you feel comfortable with, focus on writing HTML, CSS and JavaScript. If you want to add JSX or TypeScript do it. If you don’t want to include it now, do it later. This makes developing in VueJS more intuitive. It is almost like working with native JavaScript. Particularly, it seems to be a very natural step if you come from working with jQuery.
  4. Everything is where it needs to be. When I started with VueJS, I realized that I was looking at the documentation less than in other tools. I assimilated the syntax before. Even my own intuition allowed me to use the library without having to look at the documentation beforehand. This was because the VueJS API naming is quite intuitive. With knowing what propsdata and methods mean and what can I include in these parts, I could start doing a lot, with very little knowledge. In fact, if I don’t explain what each of these parts of the API is about, chances are you knew what I’m talking about. It is one of the virtues of VueJS. Be easy, intuitive and lightly loaded. Each part is in the place it should be. This is difficult to understand until something is developed in VueJS, but believe me, if you give it a chance, you will notice.

3. A very varied ecosystem that covers everything necessary

Another reason why choose VueJs is its ecosystem.

When I opt for one work tool or another, I try to make the development experience as comfortable as possible.

VueJS has a series of tools around it that help the developer know at all times what he is doing and how he is doing it.

There are three tools that help me a lot when working with VueJS.

One of them is the special command line (CLI) that they have created on NodeJS.

This tool allows you to start a project with a boilerplate (or base template) configured to our liking in an easy and simple way.

Simply by downloading the Vue-CLI tool from npm, we can create an initial structure with which to work that complies with the style guide agreed by the community.

In my view, it is the best way to get to know the platform.

Also, once we are developing, what helps me the most is knowing what I am doing and if I am doing it well are the debugging processes.

It is true that Firefox and Google Chrome already have exceptional tools to debug code.

But there are a number of internal concepts that VueJS manages such as status, properties, or events that standard tools are often unaware of.

The VueJS development team maintains a Chrome extension that allows us to see how our component tree is rendered.

Greate reason to choose VueJS for your development.

How events throw and log, how the internal state of each component save or how the global state of the component is behaving.

This is a good tool that will help us a lot in our day today. Just go to the Chrome store and download it.

download vuejs

But this does not stop here and is that in addition to finding facilities when starting and debugging a project with VueJS.

We have plugins for the most used IDEs today.

In my case, I use Visual Studio Code (VSC) to develop front-end applications and I really like having a plugin installed to perform different VueJS actions called Vetur.

This plugin allows me to have IntelliSense of the Vue syntax in VSC.

It allows me to write components faster thanks to the default snippets it has.

It allows me to have my code painted and stylized so that at all times I know what the reserved words of the framework are.

Lastly, it allows me to use tools like Prettier just by using a keyboard shortcut.

How you see is a very useful tool.

The good thing about these tools is that they are constantly evolving. Whenever a new version of the framework comes out.

The community and core team take care of keeping it up to date and are always adding extra functionality to make developers’ work a little easier.

4. A very active community

All of the above may be very good, but if there is not a good group of people behind a project as important as this, it can hardly matter.

How many times has it happened to us?

That we have used a bookstore and over time.

Have we had to maintain it because its creator has not supported it?

In that sense, we simply have to look at this official VueJS repository called ‘ Awesome VueJS ‘.

This repository includes all the relevant resources that the community is creating on this tool: Books, talks, libraries, posts, manuals … everything we can think of is here.

VueJS is an Open Source project that has a very lively community.

Do you need more reasons to why choose VueJS?

Also, it is a ‘real’ Open Source project.

What do I mean by ‘real’?

I mean that it is a project managed, developed, evolved and proposed by and for the community.

If we look at its more direct competitors, both Angular (created by Google) and ReactJS (created by Facebook) have a more rigid and less open Open Source system than we would like.

The roadmap, the versioning, the decisions, always or almost taken from the teams formed by these two great companies.

In this case, the VueJS model is more similar to the EmberJS model.

If you’re familiar with EmberJS why not choose VueJS.

Community-funded projects, created by the community, with no giants to care about them.

This, as in everything, can be a double-edged sword.

The essence of free software, the spirit of sharing with the community, is present in VueJS.

There are no third party interests.

There are no sudden changes due to business decisions.

Simply try to follow a roadmap that can satisfy everyone starting from a conceptual basis.

This is good because it gives you independence and gives you a sense of closeness.

The community at VueJS feels heard.

Many parts of the framework have removed or improved by issues that opened in the project repositories.

Plans like VueJS rendering on native Web Components have been under pressure from the community.

However, VueJS suffers from an evil that if it is not taken into account over time.

It may be the end of the project: VueJS still depends too much on its creator.

If you review the project’s commits and statistics, you can see that Evan You still tops many of the activity rankings.

There are beginning to be important people in the project (like Sarah Drasner or Guillaume Chau ).

But it seems that everything still revolves around the eastern developer.

This, no matter how bad your free software system seems to us, will not happen in other more corporate frameworks.

Google, ReactJS will continue to maintain because they are within the development strategy of their companies.

What can this change?

Well yes, maybe, but that we know we have this.

VueJS looks like a project that will continue to function very well in the medium-long term, but it is normal to monitor community movements.

5. All the component code is in a single file

Okay, so maybe it’s nothing new either to choose VueJS.

We commented that in ReactJS everything was transformed into JavaScript.

Therefore, all the code of a component, be it HTML (JSX in this case), CSS and JavaScript will be found in a single file with a .jsx extension.

And perhaps these systems do not see it as an advantage.

What about the separation of concepts? Should we no longer separate the content, its style and its business logic?

Well, yes, in VueJS, the components also store everything necessary in files with a .vue extension.

These files contain all the HTML, CSS and JavaScript of a component.

So how is it different from ReactJS? It differs in that in VueJS, the concepts are together in one file.

But not scrambled.

On this occasion, we observe a component that represents a typical search engine.

It is the SearchBox.Vue component.

This component is responsible for rendering a form with an <input /> element and a <button /> element.

What it does is save what the user inserts in the query variable and emit an event to the parent component with this information when the user clicks on the button.

Do you see what I’m saying?

All the HTML, CSS and JS are together, but not scrambled.

Thanks to the template, script and style tags.

I have separate concepts, but together, this way it is easier to reuse files in more than one project.

All content is clearer.

If the developer is working on a particular component, it has everything insight.

The good thing again about VueJS is that if this Single File Component doesn’t convince you.

You can keep saving the concepts of each file separately.

Conclusion

I think it is quite important to know the reason why a tool is chosen.

Depending on the context, developing with one or the other framework can help us to work better as a team.

Working on a personal project alone is not the same as working with a team of twenty developers.

Working on a large and complex project is not the same as working on a small one with a well-defined scope.

It is not the same to work with colleagues who have baggage in front than with a team with more multidisciplinary profiles.

These points that I have presented here are my reasons.

These are the reasons why VueJS has convinced me for my context and my framework.

Maybe you, a framework with a rich community is not important.

Maybe the features that I have told you and that add more value to me.

Do not contribute anything to you or that does not provide you enough to make a drastic change to VueJS.

Therefore, do not get carried away by my words and, as it should be done, be careful, do not trust anyone.

Try things for yourself in development as limited as possible, or on the contrary, take the framework to its limits if you need a very demanding context.

Maybe, as happened to me, when you do these tests, your API convinces you more.

Its workflow hooks you, you feel comfortable in its philosophy, in its concepts, that you are so well developing with VueJS that perhaps not only find my reasons valid (or wrong).

If not, find your own reasons for why choose VueJS.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares