Why Vuejs is so Awesome?

Anjana Gihan
JRC Tech Drive
Published in
8 min readSep 12, 2019

--

Little context about Vuejs

SPAs re the current trendiest web application development pattern used by most of users and for a good reason. It allows for responsive and more fluid user experience by loading a single HTML page that dynamically load as the user interacts. SPA app removes the need for constant page reloads. More interactivity means more JavaScript, so well-organized code and easy testable code is certainly important. This is one of the main reason why JavaScript frameworks come in.

There are lots of frameworks and libraries out there to maintain your code properly. Like Vue.js, Angular, React, Meteor, Ember.js to name a few. Each has its unique features. I’m going to explain why Vue.js is better than others and why we would use it.

Vue.js was developed by Evan You in 2014 after he left from Google.inc. His idea was to build a low weight and fast rendering framework, based on Angular. Vuejs features include:

· Ability to extend components to HTML elements.

· Simple state management ability for greater reactivity.

· Apply transitions to updated elements in the DOM.

· Hot reloading DOM.

Competitors

Everyone should know by now React is the key competitor. But in this year with over 140k stars on GitHub, Vue.js is becoming the trendiest JavaScript front-end framework, over the React and Angular in GitHub star count by a reasonable margin. When taking overall popularity, React is still in the up and Angular, thanks to its specificity, holds its position. So, why Vue that gain more attraction every month?

Vue can be effortlessly integrated into big projects for frontend development without external challenges and it is easily adaptable. Also, it can be effortlessly integrated into big projects for frontend development without external challenges. Without any additional plug-ins and external libraries, Vue.js helps to code robust and reliable applications. Today, Vue has a good number of sponsors and contributors.

Vue.js takes all the GitHub stars. Source: Tim Qian

On the JS front-end framework competition, however, React wins with Vue.js in terms of popularity and commercial usage. But, there’s no doubt Vue will stepping into developers’ reality slowly but progressively

“I think Vue got the highest satisfaction rating among frameworks in the State of JS this year (91.2%) — thanks to our users, and we aim to do even better! Hope we can change the mind of the 568 people who don’t want to use it again.”
Evan You
Creator of Vue.js

https://2018.stateofjs.com/

In fact, the number of developers who used Vue and would use it again grew from 19.6% in 2017 to 28.8% in 2018, according to the State of JavaScript survey. Vue obtained 91.2% as the framework with the highest satisfaction rating among users in the same survey.

Let’s take a look at the stats.

Percentage of “Heard of it, would like to learn” responses. Source: stateofjs.com

Why will Vue.js keep growing?

By building on the best ingredients of Angular and React and adding its own unique spice to the mix, Vue turned out tasty enough to induce constant appetite in JS developers.

Here’s why Vue gains more attraction.

Gentle Learning Curve

Vue’s gentle learning curve steals the hearts of beginners and advanced developers. After going over the materials included in the official guide, you can go ahead and start making your first Vue app — no prior knowledge of ES2015, TypeScript, JSX, or build systems required.

All you need to get going is a basic understanding of JavaScript, HTML, and CSS. Although not necessary, some experience with using frameworks is also welcome, even more so if you’re after building more complex web apps (more on that later).

Vue’s high accessibility helps fast-paced dev teams get all their creative juices going without having to spend a lot of time familiarizing themselves with additional syntax extensions. Putting together a team for a project or integrating Vue into one is easier and faster. And there aren’t many Vuejs developers in the field yet, developers experienced in React can easily switch to Vue and start delivering value within more or less a week.

Vue also cuts the time required to grasp the complexity common to, for example, Angular, which is particularly handy when writing simple web apps.

Modular and Flexible Development Environment

Web apps that used Vuejs are built with Vue components. While it already gives devs lots of flexibility and adaptability as per project needs, Vue’s single-file components are loosely coupled, which improves code reuse and decreases development time.

The component-based structure is ideal for building apps with the aim of future scaling. In Vue, building large-scale apps requires using a modularized build system from the get-go. But Vue gives devs some flexibility here because the bundlers recommended by Vue, Webpack or Browserify, come with the ability to later transform the source code with preprocessors of your choice.

Pleasure to Develop

Devs often highlight the altogether comfort with which they build apps in Vue. The freedom to structure the code as it pleases the developer and the unopinionated way of coding are the main reasons why there’s so much love for Vue.

Sorting through the codebase is hassle-free — practically everything you need is inside the .vue file. From the data model and template to CSS, properties, computed values, and methods, getting to know the job of a component spares you an additional headache.

Rich Ecosystem and Versatility

With a rich collection of libraries and set of tools facilitating development, the Vue world has everything a developer needs. The more notable tools that amplify coding experience are the excellent Vuex for state management and Vue-routing for routing and mapping your single-page app states to respective URLs. Vue also has its DevTools, which come as a browser extension. DevTools simplify application debugging and checking the state and hierarchy of components. They allow you to live-edit your app, track custom events, and time-travel debug your app to see previous versions and the changes made.

Vue’s ecosystem. Source: GitHub

Mobile Development

Vue allows developers a few answers for cross-platform mobile UI development. There’s Weex, created by the e-commerce platform Alibaba, and NativeScript with its vast repository of tools, components, and plugins. Recently, Ionic, too, got aboard the Vue mobile development team.

In contrary to React Native’s “Learn once, write anything”, both Weex and NativeScript say “Write it once, run it anywhere”. This approach enables you to manage the UI in a transparent and repeatable way between multiple platforms. That’s quite awesome.

Reactivity

Data in various HTML elements renders dynamically in modern web apps. Vue is provided with its exclusive reactivity mechanism that stimulates the user interface automatically. This approach saves a lot of time and additional lines of code that the developer can use to concentrate on launching other innovations and be more productive.

High Performance of Built Applications

Vue.js is fast. It’s not the fastest framework in the hood, but what’s currently available with Vue.js is plenty enough to deliver impeccable UX in SPAs as well as UIs.

In the mobile apps business, Vue deploys applications faster than Angular and React. Since 53% of users abandon mobile sites that take more than 3 seconds to load and the web is turning to mobile-first experience, Vue’s speed is an important perk to consider when choosing a JavaScript front-end framework.

HTML Templates

This is slightly questionable, but Vue’s HTML-based templates boost productivity, particularly for those of us with an HTML background. Vue’s templates also help to include reactivity characteristics into living web apps. The templates are compiled by Vue to must the virtual DOM render functionality. As a conclusion, during app state change, Vue offers the tiniest number of manipulations to the DOM.

Vibrant Community

Vue’s community is blooming and actively contributing to the development of the framework. Several big conferences take place annually all over the world that are devoted wholly to Vue.

Simple Art of Mastering Vue

Vue.js has wonderful official documentation that lets developers feel pretty much every viewpoint of Vue and its ecosystem. The official guide has patterns and specific information. API docs target most subjects devs might face while coding.

Tutorials

By from studying Vue via the official documentation, you can also master the art of coding in Vue by doing any of the accessible tutorials, with videos and examples included. The free courses lead you into Vue in an accurate and fun manner — especially Scrimba (recommended by Vue).

StackOverflow and Official Chat

For several code problems not included in courses and tutorials, you can ask a question on StackOverflow. New questions and answers pop up all the time, so there’s a good chance you will get your question answered regardless of its complexity.

And when you’re stuck with a pressing coding issue you won’t be left alone — you can ask fellow coders for help on the official Vue chat and receive a prompt answer.

Vue Is Evolving

Since its launch in 2014, a lot of developers were resistant to use Vue for fear of its abandonment, leaving everyone involved with a painstaking and costly task of merging into another framework. But that, of course, didn’t happen. In September 2018, Evan You announced Vue.js 3.0. But the exact time of Vue 3 release hasn’t been confirmed by Evan You yet, but it’s expected to be out in 2019. We likewise understand that currently, Vue is at v. 2.6.10. So, most hopeful we can assume Vue.js 3 beta and RC versions in late 2019 and the stable Vue 3 in the first months of 2020. And even though there’s no definite release date as of yet, what’s important about the update is that it’s based on contribution and public feedback. Externally corporate backing of known brands, Vue’s speedy rate of evolvement is an extraordinary feat.

Vue’s ecosystem is getting bigger and better, gaining more and more appreciation of the developers and businesses alike.

Who’s Using Vue?

Vue.js may not yet be the most popular JavaScript front-end framework, but it’s been embraced by big names such as Alibaba, Grammarly, Xiaomi, Laracasts, and Reuters. You can browse through plenty of UI components, websites, templates, plugins, apps and what have you that were built with Vue to get an even better understanding of Vue’s awesomeness.

As for support in the back-end part of the field, Laravel, the PHP framework, recommends using Vue.js for front-end development, although it’s not a requirement.

Should I Add Vue.js to My Tech Stack?

In short, yes. But, Vue is not the only outstanding and assuring JS front-end framework out there. You’ll probably be best off testing out and working with a few frameworks to see for yourself which ones work for your projects and intended use, and which do not.

So yet people love Vue, it’s not a complete framework. But let’s be honest: it’s as close to perfect as it can be. And if we’re trying frameworks by their learning curve, maintenance continuity, and ability to accelerate developer productivity, then Vue.js cleans like nothing else.

--

--