Are you an aficionado of HTML, CSS and JavaScript? Then Vue.js will be easy for you to approach! Its learning curve really is progressive, and there is no need to have worked with Angular or React before — so if you haven’t: don’t worry! In this article we look at the reasons to use Vue.js, what makes it distinctive compared with its two main competitors React and Angular, and a few of the functions and components the tool offers.
A modular architecture
Vue.js is an open-source JavaScript framework for building user interfaces, and it describes itself as “versatile”: halfway between a JavaScript library and a framework. Why that description? Because you can use it as a toolbox to apply Vue to certain parts of an existing project, or as a more complete package in order to develop an entire application, even a Single Page Application (SPA). As you will have gathered, Vue.js is a JavaScript framework that adapts, and in that sense it is very easy to integrate into a project. It imposes absolutely nothing on how you should handle your router, your dependencies, and so on.
State, View and Action: a three-part paradigm
Based on an MVVM pattern, Vue.js focuses mainly on the View layer — also called the ViewModel when it comes to writing the front end.
Like its competitors, Vue also breaks things down into components, which lets you use completely self-contained “pieces of DOM” with their own HTML structure, styling and functionality. So you can build all sorts of components, such as checklists and many more. More concretely, if you develop with Vue you will have to juggle three complementary parts, each of which affects the others.
These three parts therefore make up a three-way configuration for representing an element in Vue:
- State: this is where you create a
dataattribute and insert your variables — more broadly, the data that will be manipulated by the view. - View: the view is a declarative mapping of the state. You can sum it up as the part displayed on the front end, in other words what is handed to browsers for rendering. This is where you define the technical and stylistic structure (HTML, CSS, etc.) of your components.
- Action: a defined list of events, or rather of things a user can interact with. Through these interactions, the values of the variables in the State can be affected, which in turn can have an impact on the view.
One author, an active community and many projects
A detail worth noting: a single person is behind Vue.js! Which suggests that with this framework you are protecting yourself from the grip of a big tech company and its dumping practices — as Google demonstrated last year by raising its prices for the Google Maps APIs. That person is Evan You, a former Google developer who decided in 2014 to create his own framework under the MIT licence (so, open source). He has admitted drawing a great deal of inspiration from
Angular, taking the elements he found good and in line with his vision, in order to make a lighter framework. Vue.js is used by Netflix, Adobe, Alibaba and GitLab among others, and to date it has 134,344 stars, 19,085 forks and 269 contributors on its GitHub repository. Judged purely on quantity, these figures may look modest next to its two main competitors. But let us not forget that through Vue.js, Evan You is taking on Google and Facebook single-handedly.
The upsides of Vue.js
- Comprehensive documentation (more so than React’s) and very approachable
- A footprint of 23 kB
- A virtual DOM (since version 2)
- A UI/UX-friendly framework
- Genuine adaptability (what a model student)
- Simple to grasp and easy to use
- Lets you build user interfaces and SPAs, and can even help on an e-commerce project
- Ships natively with libraries such as Lodash and Axios
What sets Vue.js apart from its competitors?
- It does not come with CSS libraries
- It shares the same philosophy as its competitors: you share components, and inside those components you define the logic, and so on
- Vue lets you write HTML directly in the view. It also supports JSX and Pug (an HTML variant).
Vue.js vs React
With its virtual DOM and the way it handles components, Vue has plenty of similarities with React. What particularly sets it apart, however, is state management. On the one hand, it lets you separate what should be managed only within a component from what should be managed across the whole application. On the other, Vue handles state transitions automatically! In other words, as soon as you change your state (that is, your data), the view (your front end) changes automatically. Where React requires you to signal explicitly that the state data has changed, Vue does it implicitly: much simpler to use! In this way Vue.js is far simpler to use than React, and it lets you achieve results of equal quality on your Single Page Applications or even your e-commerce projects.
Vue.js vs Angular
It is hard to compare Vue and Angular because they are not on the same scale, even though they do resemble each other a great deal in how they work. Coming back to what was said above, Evan You (Vue.js’s developer) took a lot of inspiration from Angular, but wanted to make a lighter version of it. Their uses are therefore different. Angular is a more complete framework… but far more rigid! It does not come alone: it arrives with all of its little friends, which on top of that dictate how you must manage your project — through the router, dependency injection, the AJAX request system, the service system, and so on. So you are not going to use Angular if your only goal is to create components within an application. Vue, on the other hand, has no problem with that: it can work with any environment! What is more, Angular uses TypeScript by default, which can be a further obstacle if you do not know this compiled language.
A concrete example of what Vue.js can do
Media to re-attach: the French article embeds the CodePen “vuejs-example” by Alexis (@AlexisRaimond). The embed was lost during content extraction and must be copied over from the French version.
In this example, we first define a child component, blog-post, used to create an article structure and to link back to its parent. Further down there is a parent component, blog-posts-list, which uses the data attribute to initialise a counter and define the text to insert into the articles. In the HTML part there are a few display rules: v-for loops over the parent’s posts, while v-on:add-like lets the parent listen for the event the child sends via $emit('add-like') when the button in the child component is clicked.
