All about Vue.js

#javascript #codenewbie

If you've been studying JavaScript, chances are you've come across a few frameworks. Most people are familiar with Angular and React, in this blog I will tell you about the pros and cons of Vue.js

Okay, first thing first: What is Vue.js?

According to vuejs.org

Vue.js is a progressive framework for JavaScript used to build web interfaces and single page applications

Vue was created by Evan You and uses "high decoupling", which allows developers to progressively create user interfaces. Vue is often called the "combination of React and Angular" because it uses concepts such as directives and components to control and show UIs. Once small advantage that Vue has over React is that Vue has the ability to control HTML that has already been rendered by the server. Anyway, I promised pros and cons so here are pros and cons.

The Pros

In 2019 Vue became the second most loved framework. The main reasons for this are:

Size, because it is so small Vue is very fast to download and also positively impact your SEO and UX.
Flexibility, Vue is flexible and scalable. This means that it can be used for a huge SPA as well as used for a smaller component that will be integrated using a different technology such as React or Angular. Since the backend is build with JavaScript it can be added to existing applications with no problem.
Useful conventions, Vue helps developers avoid writing a lot of boilerplate code by enforcing effort-saving conventions. These include native support for things like animations, state management, and composing components. It's important to note that even things like classnames are essentially built into Vue.
Easy to learn, most developers say that the learning curve for Vue is not very steep, and for most developers it will be the easiest framework to learn. Vue has excellent documentation to fit every developer's needs.

The Cons

Like all good things in life, there are some cons to consider, especially some to consider if, like myself, you learned React first.

Templates, The biggest feature of Vue.js is by the template syntax to write interfaces. A lot of developers state that the template syntax adds a layer of abstraction between what is written and what is displayed in the browser. Having to keep in mind that Vue.js templates are not simply JavaScript does add a layer of complexity. This is an example of templating

<div v-if="a && b">
<div :class="{a: true, b:false}"></div>
<button @click="trigger('hello')">hello</button>

Custom Events, In Vue children must use events as a way to communicate to parent components. If you are used to react it's a lot different then just passing props down from the parent component to children.

Events in Vue look a little this

<template>
  <div id="app">
    <button v-on:click="greet('hi')">Greet hi</button>
    <button v-on:click="greet('what')">Ask what</button>
  </div>
</template>

<script>

export default {
  name: 'app',

  methods: {
    greet(value) {
      alert(value)
    }
  }
}
</script>

Smaller community, Because Vue is still relatively new and still evolving it's not as popular as React or angular. Since it is evolving so fast many tutorials you find online may be outdated and if you find yourself stuck on a problem it may take quite some time to find a solution. For smaller projects this isn't as much of an issue, but this problem rears its ugly head when working on larger projects.

So should I try it?

Vue is pretty popular when it comes to creating beautiful SPA's. There are plenty of other frameworks that can accomplish this as well. I would definitely suggest using Vue for smaller scale projects and since you can probably learn it in a weekend I would suggest that you look into it after reading this blog.

Check it out here Vue.js.

Latest comments (4)

Felix G • Dec 16 '20

What I really like about Vue.js: You don't have to handle it as framework, you can use it as simple library. This comes very handy if you have an existing project, for example with jQuery. And want build new elements into it. So, you can use both. And at the end, you may want to replace jQuery at all.