Why Vue (Not React) Is the New jQuery
jQuery was released in 2006, and within several years it became the most popular JavaScript library in use on the web (used by 70% of the top 100,000 sites online). At the time, there were many libraries similar to jQuery competing for this developer mindshare (Prototype, MooTools, Dojo, etc.). But jQuery emerged as the clear winner of the JavaScript library wars. So what gave jQuery that edge? This post describes several reasons, summing it up with this:
jQuery was made for people who don't program, everything else seems like it wasn't.
This was the critical factor - jQuery won the mindshare of developers because it empowered absolute beginners to accomplish amazing things. If you think about it, the only way to get the adoption numbers that jQuery did is by tapping into the large population of beginners. jQuery eliminated many barriers to entry by NOT requiring a programmer to be versed in best practices, design patterns, etc. To use jQuery, all you need to do is include the script in the HTML header and you’re good to go. The hello world looks like this:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hello World</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="message"></div>
<script>
$("#message").html("Hello from jQuery");
</script>
</body>
</html>The remarkable thing about this is that advanced jQuery code doesn’t require any more than this basic structure. This means that to become better at jQuery, you can focus on learning jQuery’s APIs, as opposed to any additional technologies. This ease gave new developers an accessible entry point into legitimate web development.
10 years later, jQuery still an excellent tool for developers, but demands to make websites work more like fully featured desktop applications have created the need for different tools. We’ve moved from the JavaScript library wars for developing web sites to the JavaScript framework wars for developing web applications. In 2015, React exploded in popularity, so much to the point that some claimed it was the new jQuery. Many experienced developers found React’s one way data flow and component based architecture to be simpler to maintain large web applications compared to using only jQuery. However, by catering towards these advanced developer needs, React has a large barrier to entry for beginning developers. Let’s take a look at React’s hello world:
<!DOCTYPE html>
<html>
<head>
<title>React Hello World</title>
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="greeting"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello from React</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting')
);
</script>
</body>
</html>It’s a bit more complex than jQuery - there are three separate scripts, some different looking JSX syntax (what looks like HTML in the JavaScript), and a little extra boilerplate code. But it’s not too bad. Unfortunately, once you get past hello world, you’re immediately told that no React developer programs this way! React uses Babel to transpile its JSX syntax into regular JavaScript. Babel is designed to be used in a build toolchain, which means you’ll need to use a tool like webpack. This means you’ll need to install dependencies using a tool like npm. This means you’ll need to learn Node style syntax to require dependencies in your JavaScript. Also, most React developers take heavy advantage of the new ES2015 syntax features, so you’ll need to learn this as well. These aren’t considered “advanced” requirements - these are the basics to get a realistic React app up and running.
Note that all of the above tools and technologies represent the terrific advancement of the JavaScript ecosystem and are very much worth learning. But there isn’t a clear path for a beginner to get there! The plethora of technologies needed to start a modern JavaScript project led to the recent term “JavaScript fatigue”. To be fair, these are the growing pains that come with JavaScript evolving from a simple scripting language into a full application platform. But the developments of the ecosystem are happening so rapidly that it is honestly dizzying for a newcomer to get started. This problem isn’t unique to React - most of today’s frameworks have a similar barrier to entry, which disempowers these new developers.
To put it in Rich Hickey’s terms, jQuery is easy to learn but complex to maintain, whereas React is hard to learn but simple to maintain. The ideal framework to win developer mindshare would be both simple and easy, but this can seem paradoxical. Writing web applications is by its nature more difficult than writing web sites, so it seems like a framework must be designed to be either easy or simple, but not both.
One framework has been emerging as an solution to this apparent paradox - Vue.js. Vue has built a reputation for being easy to get started with without compromising performance, while also providing a path to best practices (such as modular reusable components, similar to React). Let’s start by taking a look at Vue’s hello world:
<!DOCTYPE html>
<html>
<head>
<title>Vue Hello World</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello from Vue'
}
});
</script>
</body>
</html>This is practically as simple as the jQuery example - a single script tag and you’re up and running. The real benefit here is that to take advantage of more advanced Vue features, you don’t need to learn any new technologies! Here’s a basic Todo app:
<!DOCTYPE html>
<html>
<head>
<title>Vue Todo Example</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="(todo, index) in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo(index)">X</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function() {
var text = this.newTodo.trim();
if (text) {
this.todos.push({ text: text });
this.newTodo = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
});
</script>
</body>
</html>This code is based on the Getting Started guide - you should definitely look it over to better understand the code here. The point is that Vue doesn’t depend on all the newest tools and technologies to make a useful application. However, it can in fact take full advantage of the modern JavaScript ecosystem to use modules, single file components, routing, hot reloading, and more - everything you’d want from a modern framework. It is written with advanced developer needs in mind - it has excellent performance, keeping up with the fastest JavaScript frameworks, all with a small payload size (even smaller than jQuery)!
What this means is that Vue is easy to learn and be immediately productive, but also provides a path to simplicity with modern tools and patterns for managing larger codebases. This means you don’t have to abandon your “beginner” framework to choose the “correct” one in the end - Vue can scale with your knowledge so you can gradually start to learn the newest tools and best practices. This focus on both ease and simplicity gives Vue a unique advantage from both an adoption and retention standpoint amongst the JavaScript frameworks of today.
Currently Vue is not as well known as React (backed by Facebook) or Angular 2 (backed by Google). However, it is rapidly gaining mindshare - check out this developer survey for some recent statistics. It’s been heavily adopted by the Laravel community as one of their preferred frontend frameworks. Vue provides an answer to the issue of JavaScript fatigue, and it is a worthy successor to the legacy of jQuery as the ideal entry point for beginners to the world of modern frontend development.
Get Expert Advice
The Actualize Blog is where you can get expert advice and insights for learning to code from our CEO, Jay Wengrow. Subscribe to the Actualize Blog and get notified each time we publish a new article.