Welcome, dear readers, again to Newbie Impressions, a series where I give my first impressions concerning various programming tools and libraries.
Not too long ago I talked about React, its pros and cons. And now I'm going to take a look at a library that some might consider similar: Vue.js.
Right off the bat you can't help but compare Vue to React. They share pretty much the same niche, being view libraries that both take advantage of virtual DOM. However, you can quickly see the differences in approach.
Where React decides to create said DOM via pure JavaScript (created from the
syntactic sugar of JSX), Vue uses the more familiar, more "old-school" approach
of using templates sprinkled with directives. Where React stubbornly decides
not to use any two-way data bindings, Vue's v-model directives make it much
easier to process user input. Where React is bound to being self-contained, not
exposing any component directly, Vue has no problem with an application being
just a JavaScript object that re-renders every time you update its properties.
One of Vue.js' major merits is its ease of approach. You can just include the
library itself via a <script> tag from a CDN and get going without any build
system whatsoever. Here's a simple Vue app in its entirety:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, Vue!</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<template id="app_tmpl">
<div>
<div><input type="text" v-model="name" /></div>
<div v-show="name">Hello, {{ name }}!</div>
</div>
</template>
<script>
var app = new Vue({
el: '#app',
template: "#app_tmpl",
data: {
name: null
}
})
</script>
</body>
</html>
In this simple app, we managed to have an input, tie it to our app's data
via the v-model directive, display it in another element and even have a bit
of conditional rendering with v-show. Pretty neat in my humble opinion.
Overall, my impressions of Vue are incredibly positive. It's easy to get started: you don't need any transpiler to use it and some of its patterns are familiar to Backbone and Knockout users. It doesn't suffer from some of React's "purity" problems that make component interaction so hard. It even has a nifty way to create complete components in one file, with scoped CSS and everything. You would need a building system for that though.
My only complaint is that, unlike React, it doesn't take any advantage of modern ES6+ features. It's explainable, since Vue's authors clearly wanted their library to be available as a no-strings-attached drop-in from a CDN. However, I do believe some ES6+ features would enhance this already awesome library.
Thank you very much for reading this article! Please let me know what you think by leaving a comment below.