What is VueJS?

Learn what is VueJS, Framework, Framework Vs Library, What is declarative, Component-based programming model, History of VueJs, etc.
Submitted by Venkatesan C, on February 18, 2022

VueJS is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

The above explanation has the following terms,

JavaScript framework
Building user interfaces
Declarative
Component-based programming model

You might have the following questions.

What is a framework?
What is declarative?
What is it about component-based programming model?

What is a Framework?

A framework is a set of tools in programming on which to build well-structured, reliable software systems.
It means that a framework will provide a structured and formal approach to do a thing, in Vue's case, designing user interfaces in a reliable and productive way.
Usually, frameworks have a lot of best practices and design principles in place to make the development process easier, make the application more performant and efficient.

Framework Vs Library

Frameworks differ from Libraries in the sense of control. It means that, with frameworks, you won't have the control to do certain things, but with libraries, you have control over the code.
You can use a Math library in every kind of application wherever it is necessary but you cannot use the VueJS (a framework for building user interfaces), to build, say, a machine learning model.

VueJS is a Progressive framework to build web user interfaces.

What is progressive?

By Progressive, the VueJS team means that VueJs is designed to be flexible and incrementally adoptable.

Let's say we want to use VueJS in only a part of a big application, we can do that.
If you want to develop an entire application from the ground up, VueJs got us covered.
You developed a part of an application in VueJs, now you want to extend VueJs across the app, yes you can do it.

You can use VueJs on your project according to the requirements.

Depending on your use case, VueJs can be used in different ways:

Enhancing static HTML without a build step
Embedding as Web Components on any page
Single-Page Application (SPA) [ A complete app that runs on the browser instead on the server]
Server-Side-Rendering (SSR) [ Websites with pages, that has dynamic data over time, where the entire page is generated in the server and sent to the browser]
Static-Site-Generation (SSG) [ Websites that contains static content pages]
Targeting desktop, mobile, WebGL or even the terminal

This is why VueJS team call VueJS "The Progressive Framework": it's a framework that can grow with you and adapt to your needs.

What is declarative?

Declarative is the concept of writing the code, in a way of what you want to do rather than stating the details of how you do it. You just have to code what you want to do, not the details of how to do it.

Component-based programming model

In web development, when we design sites, we traditionally code a page in three different files, each concerning a specific aspect. The three files are:

HTML - concerning the structure (what comes after what)
CSS - concerning the style of the site (colors, border radius, font-family, animations etc.)
JS - concerning the functionality of the site (what needs to come when we click on something, changing something etc.)

This is called separation of concerns, where a site is split into three different files each having a concern.

What does it have to do with the component-based programming model?

Component-based is a way of coding the sites in such a way that a site is broken down into simple components like

Navigation component
Header component
Footer
Carousel
Video section
About section
Testimonial sections

Advantage of component-based programming model over traditional "separation of concerns":

Consider a case where we have the same user information across 100 pages in a web application, now you have to change the user information in all 100 pages.
Traditionally, you have to change the user info in all 100 HTML pages manually. In the worst-case modify all the 100 js and 100 CSS files as well. This means you have to make 300 changes in the worst case to your application.
If we go with the component-based programming model, we can put that user information into a single entity consisting of HTML, CSS, and JS code into a single file or a module ( a component ) and reuse the component with just a simple function call wherever we want to use it. So if we make changes to the component alone, it will get reflected in all the places, since components are reused rather than re-coded several times.

So, VueJs is a progressive framework to build web user interfaces in a declarative way using the component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

History of VueJS

VueJS was created by Evan You after working for Google using AngularJs in several projects.
He stated the reason for creating VueJs as follows: "I figured, what if I could just extract the part that I liked about Angular and build something lightweight".
The first source code was committed in July 2013, and released the following February, in 2014 as VueJs 1.0.

Why VueJs?

There are two ways to look at this question, one based on how popular and mature the language is and its features.

On the side of popularity and maturity

VueJs has over 193k stars in GitHub, which is the 5^th most starred GitHub project. So popularity is of no question here and VueJs has a large and great community which means mostly you will find answers for the problems that you might face.
Due to Evan, You's Chinese origin and great Chinese documentation of VueJs, it is popular among Chinese developers.

On the side of features side, these are the reasons that VueJS team recommends VueJS

VueJs is approachable
- Meaning that it is easier to get started learning VueJs compared to other front-end libraries or frameworks
- VueJs is declarative and follows the component-based solution
- VueJs will make the process of building complex user interfaces trouble-free by abstracting away the difficult part
VueJs is versatile
- Create powerful single-page applications from scratch using build tools like web pack.
- Incorporate VueJs into existing legacy projects using CDN links in a script tag and make progressive enhancements.
VueJs is performant
- A full-featured VueJs 2 project with Vuex + VueJs Router included (~30 KB gzipped) is still significantly lighter than an out-of-the-box, AOT-compiled application generated by angular-cli (~65KB gzipped).
- VueJs takes care of a lot of optimizations on its own, so there's no need for developers to worry about tweaking the application as it grows.

Let's understand the other core features through a code sample from VueJS,

import { createApp } from 'vue'
createApp({
    data() {
        return {
            count: 0 
        } 
    } 
}).mount('#app')

<div id="app">
    <button @click="count++"> Count is: {{ count }} </button>
</div>

In the above code, createApp() is a Vue function that helps you to create a Vue Application, in which it has a data method returning an object of key count and value 0. Further, the createApp() method is chained to a mounting method, where "#app" is passed as an argument. This means to attach an object { count: 0 } to the div element of id="app", to keep track of its state.

The div element has an "@click" attribute which is used to bind the click event and count value. When the user clicks on the button, increment the value to one since it's given count++ as the value.

Now when the user clicks on the button, the value gets increased to 1.

Output:

Clicking on the button 5 times increases the count to 5.

The above example demonstrates the two core features of Vue:

Declarative Rendering: VueJs extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
Reactivity: VueJs automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.