Throughout these years, I have been lucky enough to work with different JavaScript frameworks. Each of them has had, for me, their strengths and weaknesses. I have never had an unconditional attachment with any of them and that has made me see the frameworks as what they are: tools that can help us as much as make us have a good headache. This has made me to assess what functionalities are necessary and what arguments to take into account when deciding on one or the other depending on the context in which I have found myself.
Looking at it with perspective, in a very short time, we have seen how these frameworks have been going through different generations and how they have been maturing. You could say that today, in what I usually consider the 3rd Generation, we find quite mature frameworks that help us perform a large number of tasks that can be executed in different browsers at once.
ReactJS, Angular, and EmberJS are the frameworks that represent the most use in the market and have proven to be a guarantee of robustness and scalability. To this triple, VueJS is another framework that should be reckoned with. A framework with which I have been working for a long time and from which I have tried to study each functionality.
In this post, I would like to explain five reasons that have made VueJS become my favorite JavaScript framework. I hope these reasons convince you that in your next proof of concept or personal project, you give the framework an opportunity.
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, in separate libraries, allow you to add functionality when you need them.
The modularization in libraries of a framework is not something new in front development. Both ReactJS and Angular have a similar organization of their base code. What differentiates VueJS 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 it is decided 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 an independent piece. These pieces are composed in a hierarchical tree of components to form our application. Using this library is as easy as importing the script into our HTML page.
The number of libraries that are counted (whether created by official developers or by the community) is so large and covers such a spectrum of functionalities, it will be difficult for us to find ourselves helpless and without that usefulness that is indispensable to us.
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 began to be so easy and simple to use that, once its creator decided to upload it to 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 usage expectations in 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?
From my point of view, it is due to how well Evan You has been able to transfer all the good things the other frameworks like Angular, ReactJS, and EmberJS have, and to discard what the developer did not provide or was complex to use.
If we had to define VueJS for four of its conceptual aspects, these would be:
The data as the center of everything: In VueJS, the components manage an internal data model. These components are designed under the MVVM pattern. 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. The own models of a component 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 data model of the component is wrapped by special getters and setters responsible for managing these reactions.
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 their learning. Angular forced me to include TypeScript to write components. I like TypeScript, what I do not like is that they impose tools on me. VueJS is aware of this: Use whatever you want, use the tool with which you are comfortable, focus on writing HTML, CSS, and JavaScript. If you want to add JSX or TypeScript, do it. If you do not want to include it now, do it later. This makes developing VueJS more intuitive. It's almost like working with native JavaScript. In particular, it seems a very natural step if you come to work with jQuery.
Everything is in the place it has to be: When I started with VueJS, I realized that I looked at the documentation less than other frameworks. 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 naming of the VueJS API is quite intuitive. With knowing what props, data, and methods mean and what I can include in these parts, I could start doing a lot, with very little knowledge. In fact, if I do not explain what each of these parts of the API is about, the most likely thing is that you knew what I am talking about. It is one of the virtues of VueJS. It is easy, intuitive and not overloaded. Each part is in the place it should be.
3. A very diverse ecosystem that covers everything you need
When I choose a work tool or another, I want the development experience to be as comfortable as possible. VueJS has a series of tools around to 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 it comes to working with VueJS.
One of them is the special command line (CLI) created on NodeJS. This tool allows you to start a project with a boilerplate configured to our liking in an easy and simple way. By simply downloading the vue-cli tool from npm, we can create an initial structure which will comply with the style guide agreed by the community. From my point of view, it is the best way to start knowing the platform.
Also, once we are developing, what helps me the most to know what I am doing and if I am doing it well is 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 the status, properties or events that standard tools do not usually know.
The VueJS development team developed a Chrome extension that allows us to see how our component tree is rendered, how events are being launched and recorded, how the internal state of each component is saved, and how the global state of the component is behaving. This is a good tool that will help us a lot in our day to day. You just have to go to the Chrome store and download it.
Also, in finding facilities when starting and debugging a project with VueJS, we have plugins for the IDEs. In my case, I use Visual Studio Code (VSC) to develop front applications and I really like to have 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 that it has, it also allows me to colored and stylized my code so that I can know at all times the reserved words of the framework. Finally, it allows me to use tools like Prettier just by using a keyboard shortcut. Hope you see it as 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 the core team is in charge of keeping them up to date and they are always adding extra functionality to make the developers' work a bit easier.
4. A very active community
All of the above may be fine, but if there is not a good group of people behind such an important project, little can matter. How many times has it happened to us, that we have used a bookstore and with the passage of time, we had to be the one who had to keep it because its creator has not supported it? In the time of jQuery's splendor, it happened to me more than I would have liked.
In that sense, we simply have to look at this VueJS repository called 'Awesome VueJS'. This repository includes all those relevant resources that the community is creating about this tool: Books, talks, bookstores, posts, manuals ... everything that comes to mind is here.
VueJS is an Open Source project that has a very lively community. In addition, it is a 'real' Open Source project. What do I mean by 'real'? I want to say that it is a managed project, developed, evolved and proposed by and for the community. If we look at its most 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 version, the decisions are taken from the teams formed by these two large companies. In this case, the VueJS model is more similar to that of EmberJS. Projects funded by the community, created by the community, without any giant who cares about them.
This 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 based on conceptual bases. This is good because it gives you independence and gives you a sense of closeness.
The community in VueJS feels heard. Many parts of the framework have been removed or improved by the issues that have been opened in the project repositories.
Plans such as VueJS rendering in native Web Components have been impemented thanks to the pressure of the community.
However, VueJS suffers from an evil that if not taken into account over time, may be the end of the project: VueJS still depends too much on its creator. If you review the commits and statistics of the project, you can see that Evan You still drink 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.
5. All the code of a component is in a single file
Okay, maybe it's nothing new, either. We had commented that in ReactJS everything was transformed into JavaScript, therefore, all the code of a component, either HTML (JSX in this case), CSS and JavaScript will be found in a single file with extension .jsx. And maybe these systems do not see it as an advantage. What happens with the separation of concepts? Should we no longer separate the content, its style, and its business logic?
Well, yes, in VueJS, the components also save everything necessary in files with .vue extension. These files contain all the HTML, CSS and JavaScript of a component. So how is it different from ReactJS? It differs in VueJS, the concepts are together in a file, but not scrambled.
Conclusion
I think it 's quite important to know the reason why a framework is chosen. Depending on the context, developing with one or another framework can help us work better as a team. It is not the same to work alone on a personal project than to work with a team of twenty developers. It is not the same to work in a large and complex project as in a small one with a well-defined scope.
These points that I have discussed 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 functionalities that I have told you and that give me more value, do not contribute anything to you or that do not contribute enough to make a drastic change to VueJS.
Therefore, do not get carried away by my words and, as should be done, be careful, do not trust anyone. Test for yourself the things in a development as limited as possible, or on the contrary, take the framework to its limits if you need a very demanding context.
Posted on Utopian.io - Rewarding Open Source Contributors