Getting Up Close and Personal with VueJS
Amidst the tug-of-war going on between the most popular JS frameworks Angular and React, I found solace with another kid on the block namely VueJS(pronounced /vjuː/). But this kid is as powerful and plush as the already existing frameworks out there. In fact, the folks at Vue claim it to be more powerful and performant than any other JS framework. Check out this link for more info.
Let’s see how to and why there’s even a need to delve into this yet another UI framework.
It’s very easy to jumpstart on Vue for beginners since the scaffolding is really a breeze when it comes to Vue.
It’s as simple as this
Unlike other frameworks out there, it’s really simple to start using Vue. To be specific, I’m talking about Angular in which I honestly don’t bother to learn about another module loader be it SystemJS or rollup with those verbose configurations. While Angular enforces you to use TypeScript and React coerces you to use JSX, Vue inculcates pure web standards like real html, css and JS.
When it comes to data binding, Vue is no less than various plush frameworks out there. It supports all kinds of data and event binding syntaxes and even more. Consider this pug template snippet
And here’s the script for the same
For binding the html attributes and component input properties, you can use the
v-bind directive or a shorthand property
:attrName while providing a valid JS expression in the right side of the equal operator.
The data looks like this
This part I love the most over Angular’s since it‘s more improved
And for the sake of brevity, you can use this @ notation too
Here’s the JS for the same, nothing fancy here.
And here comes the most solicited feature that I like, Event Modifiers, i.e there’s no more need to
stopPropagation inside your event handler function. You can easily do that declaratively inside your template like this
How succinct! Isn’t it? These little features of Vue attributes to its ease of use and brevity which not only speeds up the development time but also makes the code look less verbose.
Single File Components
So far, we have just witnessed how Vue syntax looks like. But talking in more practical sense, you might be wondering how can I use this simple looking library to substitute my existing mammoth project built over maybe Angular or React?
The thing with Vue is that, it comes in all the forms you like, be it a teensy hobby project or a corporate level project. You as a developer are given full liberty to tailor it according to your needs.
Consider this Vue component that holds all of the three things together encapsulated in a single file.
So, as you can see, a single file is holding template tag, style tag and a script tag making it really comprehensive just at the first look. And there’s not even a single thing that breaches the W3C guidelines. In fact, this is the most W3C true-blue version of creating a web component I’ve ever seen after Polymer.
The Sassy way
Astute readers might observe from the previous example, I’ve used SASS for the styling needs and pug for templating. All you need to do is set the lang attribute of template and style tags and install pug and sass related packages from npm
Vue.js is pretty cool in that it works with lots of HTML template languages out of the box.
So, all you need to do is
and for SASS
Ever since the inception of Flux with React, Centralised State Management pattern has become an elixir for creating any heavy web app these days. While there’s insanely popular Redux, Vue does State Management in it’s own way through a library Vuex.
The core concept is same as Redux which includes immutability, central management of state etc. Only the jargon differs a bit. Reducers are apparently called mutations and the actions commit these mutations to make a change in the state. Also, actions can be async too inherently unlike Redux where you have to remain dependent on
redux-thunk middleware to handle this “special case” of asynchronicity.
Here’s an example from the docs
and then an action can be dispatched on some user’s or asynchronous event as
If you’re concerned about the rapid first meaningful paint for your public facing B2C web app. You must look for integration with NUXT for Universal or Server Side Rendering. You can easily generate a Nuxt powered Vue app with vue-cli as
$ vue init nuxt/starter project-name
It’ll provide you with a folder sturucture which gets automatically translated to Vue Router internally. For eg, you can create parameterised routes by creating a file name prefixed with underscore.
Also, for loading some data prior to rendering a view, it provides with a
asyncData lifecycle hook in which you can perform some asynchronous task and hydrate your view when it’s visible. It’s with full support of async/await proposal.
Vue has emanated to decrease the development efforts while alleviating the problems present with other JS frameworks in the market. Keeping this in mind, the Vue team has provided us with this beautiful CLI for scaffolding your first Vue project swiftly.
$ vue init pwa project-name
Vue offers various scaffolding templates. You may choose any of them based on your requirement.
And that’s all you need to hit to start working like a pro with all the production ready build scripts for you without worrying about webpack configs and all.
Vue Dev Tools
Debugging has never been such a breeze. Thanks to this awesome devtools by the Vue team with the support for both Vue Component level and Vuex level debugging.
Yet another reason for picking Vue for your next project.
While the dev community is going frenzy over whether to choose React or Angular, I believe it won’t be a wrong move to choose Vue because not only it inhabits all the already existing features of other frameworks but also it does it in a better, clean and standardised way. Also, as evident, Vue takes the W3C specs and proposals quite seriously, so I don’t see it being tossed away any sooner amidst the bloodshed of JS frameworks.
True, choosing Vue will impact your project but in a positive way by reducing your development time and minimising your bundle size too.
So after getting “up close and personal” with Vue, I’m totally sold! What about you?
Thank You! Happy Coding 🤓