Skip to content

Instantly share code, notes, and snippets.

@takshaktiwari
Last active February 28, 2022 05:37
Show Gist options
  • Save takshaktiwari/32dace126308895acb27d9b510985a5f to your computer and use it in GitHub Desktop.
Save takshaktiwari/32dace126308895acb27d9b510985a5f to your computer and use it in GitHub Desktop.
Vue Intro / Features / Why to use

Why It’s Popular:


Put simply, it’s a view-oriented product. The view is the most essential part of everything that occurs inside the system, and all information is only validated if it interacts with views correctly. Creating just a single view is pretty basic, and here lies the main advantage and desire to use VueJS – the simplicity, and the low entry barrier. All you need to do is load the interface and add JavaScript to begin. Data is then sent to the view directly using simple syntax, where VueJS automatically renders the elements without coding – an instance of the system can then be used for the element’s rendering.

The tool allows for modification of parts of the code by keeping the information in the data object while the updates affect other linked parts in real time.

The Pros of Vue.js


Tiny size

This point will be as small as Vue itself: the downloaded zip with the framework weighs 18 KB. As a featherweight, the framework is not only a fast to download and install the library, it also positively impacts your SEO and UX.

Virtual DOM rendering and performance

Vue is an exceptionally fast tool. At an 22.9KB after gzipping, this technology will probably have a long life ahead of it. A Document Object Model (DOM) is something you’ll probably encounter when rendering web pages. A DOM is a representation of HTML pages with its styles, elements, and page content as objects. The objects stored as a tree structure are generated by a browser when loading a page.

Reactive two-way data binding

Another benefit in DOM manipulations is two-way data binding inherited by Vue from Angular. Two-way data binding is a connection between model data updates and view (UI). Bound components contain data that can be updated from time to time. With the help of two-way data binding, it’s easier to update related components and track data the updates.

Single-file components and readability

Every piece of your future application/web page in Vue is a component. Components represent encapsulated elements of your interface. In Vue.js, components can be written in HTML, CSS, and JavaScript without dividing them into separate files.

Component reusability.

Encapsulated components are basically chunks of code that can be reused as templates for similar system elements.

Code readability.

As all the components are stored in separate files (and each component is just a single file), the code is easier to read and understand, which makes it easier to maintain and fix.

Good for unit-testing.

Unit-testing is a QA activity aimed at checking how the smallest parts of the app work on their own. Having components greatly simplifies this task.

Integration capabilities and flexibility

An important aspect of any emerging technology is the ability to integrate with existing applications. With Vue.js it’s as easy as pie, because it relies only on JavaScript and doesn’t require any other tools to work.

Solid tooling ecosystem

During its 5 years of existence, Vue.js has gained a powerful set of tools to work with. The upcoming release of Vue CLI 3 is a complete rewrite that will deliver heaps of new functions. Vue CLI 3 will support Babel and TypeScript out of the box, provide unit testing, end-to-end testing tools, and a plugin installation system. And if that isn’t enough, Vue also has its own browser debugging tools, server renderer, and state manager.

Community support

As we’ve mentioned, Vue.js exists thanks to its community. Because of that, community members are pretty active both in the Discord chat and forum. As evidence of community activities, just look at the number of Vue.js tags on Stack Overflow that now numbers more than 41 thousand.

Other features:

  1. Vue has a simpler API and design for a web developer to build a simple single-page application in a single day.

  2. VueJS has integrated methods that are triggered whenever the component is reloaded. It is used whenever we want to change a component’s state that isn’t necessarily related to the instance data being mutated.

  3. VueJS is modular which helps in adding third-party packages in VueJS. Vue.js web-pack template does not restrict access to its advanced feature set such as CSS extraction, hot module reloading, linting etc.

  4. VueJS enables users to write their template in an HTML file or JavaScript file using virtual nodes.

  5. VueJS has a great tooling feature that is the new Vue CLI i.e. 3.x to kick start a new Project with things like Routing, Unit Testing, CSS Preprocessors, State Store, Linting, Typescript, PWA etc.

  6. One of the interesting features of VueJS is that it tracks component dependencies during render which allows the system to already know which components require re-render when the form changes and which does not.

  7. VueJS is simple and easy to learn which makes it easier to adapt and an ideal choice for startups that want to quickly design high-performance web applications with an easy-to-read code.

  8. Vue provides an interface for any modifications that is displayed on the page based on the current URL path.

  9. VueJS uses a front-end router that enables the intentional transition of the browser path to occur on buttons or links.

  10. VueJS comes with a Vue-router package that enables an API to update the application's URL, email password resets with email verification links and supports the back button. The Vue-router helps in mapping routes they belong to, indicating where children should render to the parent /root routes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment