7 Simple Reasons Why You Need To Learn VueJS Today

Tech Daily Feb 18, 2020

Front-end frameworks like Angular, React and Vue has come a long way. Back in the day, we had HTML and CSS. JavaScript was a strict no-go.

Days of JQuery and bootsrap

Then V8 and SpiderMonkey engines by Google and Mozilla improved, hardware support leapfroged and browser technology in general, matured. People started using JavaScript more and more, phones started passing the ACID3 Test and the internet in general started to look and feel better.

Then came JQuery, JQuery mobile, Twitter bootstrap, the former two brought interactiveness while the latter brought easy to use plug and play themable components.

Responsive Web Design and Mobile First Web design

Then came Responsive Web Design and Mobile first design. You think about the mobile first and then scale it up to fit your browser. Mobile devices started ruling the web. At this point, JQuery and bootstrap started feeling a bit out of place and phones and JQuery didn't mix well; phones were too slow.

Then started the era of Web Applications, dynamic, beautifully themed, minimal and animated pages that got something done. Web pages, from being a passive mode of transmitting information, became an active and interactive mode of communication with the end user.

Angular and React

AngularJS came as a way to simplify binding data to the UI. React was a similar concept developed by facebook which had JSX, a way to combine JavaScript inside the HTML itself.

VueJS
Then came VueJS, an elegant, simple and easy to learn library that "just works". So, below are some points on why should you start using VueJS today.

Reason #1: VueJS is Deceivingly simple to learn

Well written and well presented docs over at https://vuejs.org made it very simple and easy to learn. The concepts are intuitive, learning is a joy and you can quickly see the results.

It is so simple to learn that, if you're trying to learn to build SPAs (Single Page Applications) and not starting with VueJS, you're taking the long way.

Reason #2: VueJS is Progressive and compatible

That means, you don't have to learn entire VueJS to start using it. Use a simple https://unpkg.com/vue package within an app, instantiate a div and you can use the data bindings, conditional rendering, computed values, two way binding, watchers and many more functionalities out of the box.

That means, if you already have a web page, you can make progressive enhancements without the commitment needed to rewrite it entirely.

Reason #3: Vue CLI is easy to use and Hot Reload is the icing on the cake

The Vue CLI is simply one of the better CLIs available. The default webpack configuration need very little tinkering, in fact, we have delivered some pretty big projects with Vue and have made no changes to webpack configuration whatsoever.

Hot Reload means, you can write some code, and the changes are reflected in real time. Without any need for reloading your browser window. This also adds the benefit of saving your state, if you have complex logic, saved states save a lot of time.

Reason #4: Vue's excellent Component system and seamless LESS/SCSS support

In Vue you can have multiple abstracted components, each component is contained in a .vue file which has three root tags <template>, <style> and <script>.

The <template> tag contains the HTML (within a single root element) for the component.

The <style> contains the necessary styling information required to style that component. You can easily can add a lang attribute to use scss/less instead. <style lang="scss"> is all that is required to start writing scss. And you can add a scoped attribute to contain the css within that single component.

the below code represents what a vue component looks like with the style, markup and logic in a single file.

<template>
<div class="content">
  <input placeholder="Enter your name" v-model="name" />
  <p> {{name}} </p>
</div>
</template>

<style lang="scss" scoped>
.content {
  input {
  width: 100%;
  borders: none;
  padding: 5px;
  font-size: 18px;
  }
  
  p {
   color: purple;
   font-size: large;
  }
}
 </style>
 
 <script>
 export default {
 	data: (() => {
      name: ""
    })
 }
 </script>
A Sample Vue Component

Reason #5: Write ES6 without worrying about browser compatibility, optional TS support

With support for Babel and Webpack out of the box with sane defaults, mean that you can use ES6 features such as map, filter, async/await and all of them without worrying about compatibility. That is taken care by babel and webpack. Your focus is on writing.

With optional TypeScript support (highly not recommended in Vue 2.x) it is even possible to write Vue apps in TypeScript.

Reason #6: Declarative and Reactive Programming with MVVM

Vue popularized MVVM into the world of web development. With MVVM comes the benefit of declarative.

With Vue's declarative rendering, you define in your template, what needs to be rendered under which circumstances. And reactive programming ensures that any interaction can change the state of a component, and the output changes without you having to do anything.

MVVM in different from MVC. In MVC you need to write your Controller, but in Vue you declare your template, bind data with the inputs, and the when any input changes, the state (ViewModel) updates automatically, and whenever state is updated, the changes are reflected automatically (ModelView)

If you have never done any MVC, it can get quite tricky to initially understand, but once you discover it, a lightbulb moment happens. MVVM is like a smartphone, you don't realize you needed it until you have it. And you can't go back.

Reason #7: Virtual DOM

Virtual DOM keeps a copy of the real DOM in memory. Any changes you make in vue is applied to the Virtual DOM only, and Vue periodically compares that with the Real DOM and updates only what is necessary.

if you are adding 50 elements to a <div> in JS, you'd be triggering 50 redraws, but in Vue, those 50 elements will be saved in Virtual DOM, and in a single redraw will render all of the 50 elements. Which significantly improves the user experience and makes it very efficient.

Reactivity is not unique to Vue, angular has it (React, unfortunately doesn't). Virtual DOM is not unique to Vue, either, React has it. But Vue's implementation has it both.

Bonus Reason #8: Watchers, computed properties and lifecycle hooks

In every component of Vue, we have computed properties, hooks and watchers to manipulate many aspects of the component and various stages.

Suppose you are taking the first name and last name seperately, you can have a computed propety like below, that will display the full name in real time

<template>
<div>
 <input v-model="firstName" placeholder="First Name">
 <input v-model="lastName" placeholder="Last Name">
 <p> {{fullName}} </p>
</div>
</template>

<script>
export default {
  data: (()=> {
  	firstName: "",
    lastName: "",
  }),
  computed: {
  	fullName(){
      `${this.firstName} ${this.lastName}`
    }
  }
</script>

Watchers enable you to "watch" any property, be it defined or computed, a function is triggered each time that property updates.

While lifecycle hooks mean that you can run blocks of code at seperate stages in the lifecycle of a component.

Did these tips were enough to convince you to start learning vue? Use the share button to convince your friends.

Vue is an excellent framework. Instead of giving us a million options at once, vue gives us a million options, one at a time. This really helps with the learning curve, you can get something done with vue within a day. And as you progress you keep "discovering" new features and add them to your arsenal.

Thanks for Vueing!

Sohan Basak

Hi, I am Sohan. A software engineer by profession, I am really passionate about algorithms, AI/ML, Maths and Physics. Play the guitar as a hobby, the maths behind music is fascinating.