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.
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.
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.
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.
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:
- 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.
- 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.
- 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 props, data 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.
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.
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.
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.
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.
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.
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.