The popularity of Vue.js has been climbing pretty fast. It hasn’t reached the levels of Angular or React yet, but in the year that the current VueJS repo has existed on Github, it has garnered approximately 2,700 watchers (more than Angular), 47,000 stars (more than twice as many as Angular and more than 3/4 of React’s). They also have more closed issues than React and only a tiny 58 open issues (compared to over 500 for React and over 1,000 for Angular).
This obvious growth in popularity begs the question, “Why is Vue.js gaining so much ground despite having several great frameworks already?”, and likewise, “What does Vue.js offer that the other frameworks and libraries don’t?” You’d think that if you can answer the 2nd question, you’d have the answer to the first question, right? Well, the quick answer to the 2nd question is
What? If it’s not offering anything new, why wasn’t it just ignored? Well, let’s try a long answer to the second question, then:
“Technically it does not have any great new features. However, it does offer a unique combination of features.”
So, it’s not really the features themselves, but the combination of features that Vue.js employs that is drawing the development community in. So what are these features, and where did Vue.js steal them from? Well, that information is on my guest post at AppendTo with the familiar title of Where Did Vue.js Come From?.
This feature is probably one of the best features that React introduced to the world (though I’m still quite partial to how they changed the way we think by making React focus so much on composable and nestable components rather than views, which I talk about in the article on AppendTo). Virtual DOM revolutionized the way we render our views/components so that we don’t have to worry about the logic of only updating the few pieces that need to be updated but also don’t incur a huge performance hit due to re-rendering the entire view.
Vue’s rendering algorithm is generally faster than React’s, and because all state and props are “reactive” in Vue, and they handle detecting what changes take place, it’s even simpler to work with because you’ll never need to implement
shouldcomponentupdate to optimize it. So Vue not only “stole” this feature, they improved it in multiple ways (though technically they used someone else’s virtual DOM implementation rather than creating their own)! I’m curious if reactivity was taken from something else though. I know Angular 1 does something similar with scope, but it’s “dirty checked,” rather than applying.
CLI Tool for Quickly Bootstrapping New Projects
Vue-CLI enables you to easily grab a base project structure, answer a few questions, and be immediately set up and ready to start a new Vue project in seconds. I believe Ember was the first to release their own CLI tool as a companion to their framework (feel free to correct me if I’m wrong), and while Ember’s community hasn’t reached the size of the other top frameworks, this is definitely a great reason to consider Ember (and Vue). It’s awesome to see that Angular has followed suit as well (it’s currently in Release Candidate status).
Vue’s CLI tool doesn’t quite have as many features, though, because it is only designed to initialize a project and to build the project, but that’s primarily because there’s nothing for Vue to scaffold out except components, and there are multiple, perfectly acceptable ways to create components, so you can do what you want in this case.
Do you know of any other features that should be on this list? Vue.js seems so simple in my mind that it’s difficult to come up with features for it. Let me know in the comments below what you like best about Vue, or whatever you can think of to tell me (hopefully it’s at least relatively on topic). :) God bless and happy coding!