iJS CONFERENCE Blog

Everything you need to know about Vue.js

Tips from a fellow developer

Feb 6, 2018

Although Vue.js creates compelling user interfaces efficiently and easily, it’s still not gaining much attention. That should change. In this article, Kayla Matthews explains why we should be paying more attention to this progressive JavaScript framework.

Vue.js is a progressive JavaScript framework that allows you to create compelling user interfaces efficiently and easily. The core development layer focuses on the general experience of your application, yet it leaves you free to import or integrate existing libraries and tools. The goal is – or at least should be – to build incredibly capable and robust single-page (SPA) applications.

But look, I’ll be honest. Unfortunately, Vue.js has not seen a lot of attention or traction out West – where I happen to spend most of my time. In the international development community, it’s a growing sensation, with many a praise floating about. The problem, however, is that it’s not a household name, certainly not like jQuery. In fact, I don’t think anything has ever been as popular as jQuery, so that’s not really a fair comparison in hindsight, but you get the point. To make matters worse, most people are not familiar with the framework, if they’ve even heard of it. It’s not completely off the radar, especially if you tend to stay on the leading edge of the development world. That said, it’s certainly not in use on a wide scale, at least not yet. That doesn’t mean it shouldn’t be, however – it should.

Discover the JavaScript/ECMAScript track of iJS 2018!

Here are some of the most important things I think you should know about this up-and-coming framework – not to mention, these are some great reasons why I think it should be adopted by more of the development community for JavaScript projects:

  1. It’s super easy to learn: I’m not going to advertise myself as full-time programmer or anything (I’m not), but I do have a history with Vue.js. The one thing I can unequivocally tell you is that it’s one of the easiest frameworks to learn and master. To get started, you only need a few lines of JavaScript, with a hint of HTML. But the best part is that a compiler is optional. To work with the framework, you only need to know a few basic technologies, and you’re good to go. It’s a great place to start for beginner to intermediate developers, especially if you want some hands-on experience.
  2. It’s crazy fast: Okay, admittedly, most front-end JavaScript frameworks are fast – well, most of the newer ones anyway. But to get a better idea for how responsive Vue.js is compared to others out there, take a look at this detailed Medium article. The official Vue.js team also compared the framework’s performance to similar options, such as React. If you couldn’t guess, Vue.js tends to be faster. This is because – like React – it relies on a virtual DOM. It’s much lighter-weight in comparison, though, especially during rendering. Furthermore, any dependencies are tracked during render, so the system knows what components need to re-render for state changes without additional dev input. That’s all before you take into account the fact that Vue.js works with native HTML and CSS, albeit through the use of templates.
  3. Official CLI at the ready: Even though a compiler is not necessary, a CLI is offered by the official Vue.js team to help get developers into the trenches faster. It also provides a more modern and convenient development environment, for those used to working with them. It comes bundled with different template options out of the box – including Browserify – but they’re easy to integrate on your own, too. If you need to scaffold applications promptly but don’t want to deal with boilerplate code, there’s no better place to be. As a bonus, you’ll be pleased to know the jump from 1.0 to 2.0 didn’t change much when it comes to working with or writing in Vue.js. Some deprecations happened, but I’d argue they were necessary and improved the framework. That’s important, because it means that you can expect the same support from future updates going forward. No, it’s never guaranteed, but it is a good representation of the design philosophies of the official team, which happens to be one guy in this case.
  4. The community is huge: When you’re working with a language or framework, what can really make or break the experience for you is the surrounding community. Are they supportive and knowledgeable? Can you find resources to help achieve your goals? If you can’t, are there community members you can ask for advice? How responsive are they? These things matter when you’re working in the industry, as you no doubt know. Sometimes, it’s just good to have like-minded folks who understand the field you work in to chat with. Vue.js has an ever-growing presence on GitHub, an incredibly active forum, international conferences and a large swath of educational resources and guides. Perhaps more surprising, Evan You, the creator of the framework is remarkably active in the community, too. In fact, if you ask a question or post a discussion on the official forums, you’re likely to see a response from him.

So, what’s your experience with Vue.js?

The list above offers some crucial reasons for why I think everyone should get involved with the framework or adopt it as a part of their JavaScript projects going forward. Yet, it doesn’t really give a picture of my personal experiences or show the challenges and obstacles I’ve dealt with, does it?

In terms of performance and convenience, I honestly just prefer using Vue.js over React – which is a default choice for many, albeit not the only one. It looks like I’m not alone in feeling this way, either (See Why we chose Vue.js over React). The community agrees, too, as you’ll see from this popularity graph from Google Trends.

Enough flexing my muscles, though. To keep it simple, I’ll say that Vue.js is one of the most elegant, concise and efficient frameworks I’ve had the pleasure of working with. It’s growing at an alarming rate, and the support is unprecedented. Even good old Laravel added Vue.js to core, which is a sign of things to come. Most importantly, it’s reliable, maintainable and interesting above all else. That last part is important more than you realize because you’ll be working with it constantly, plugging away at your keyboard and pouring over your code. If the framework or language is not at least semi-enjoyable for you, it’s going to be an awful trudge to the finish line – if you ever make it there.

The last major release or update, version 2 brought a variety of changes. Performance increased, server-side rendering was made possible, and render functions were largely enabled. Of course, being that the latest release is 2.5.3, there were incremental updates in-between, all improving the framework for the better. A couple of things I would like to see improve in the near future would be:

  • The runtime errors in templates could use an overhaul so as to be more descriptive. The JS code warnings are great, but at runtime you’ll be scratching your head a lot.
  • I’d love to see community components expanded and more become available. Most were built for older versions of the framework and need updating.

One other issue to note is that you will often come across Chinese comments accompanying the code in the community libraries. This is because – as you might have guessed – the framework is popular in China, and the author Evan You is Chinese as well. All in all, it’s improved my working environment for the better. I really believe it could do the same for you, too.

Free: download 40+ pages of JS wisdom


Extend your knowledge and improve your JS skills with iJS dossier!

40+ pages of deep insights into the world of JavaScript, TypeScript, node.js, React and more!

Get dossier for free now!

 

Sign up for the iJS newsletter and stay tuned to the latest JavaScript news!

 

BEHIND THE TRACKS OF iJS

JavaScript Practices & Tools

DevOps, Testing, Performance, Toolchain & SEO

Angular

Best-Practises with Angular

General Web Development

Broader web development topics

Node.js

All about Node.js

React

From Basic concepts to unidirectional data flows