Was it just a few years ago when we built our websites by lovingly placing each tag in the file with care and grace? That era of handcrafted websites is long gone. Most modern websites are elaborate programs that are constantly pinging multiple data sources and then churning out a complex confection of tags nested inside of tags nested inside of other tags. It's layers of code built on top of libraries linked to frameworks that call in web services, all to put some words and pictures on the screen.
Two of the favorite choices today for creating these elaborate mechanisms are React and Vue.js, two chunks of code that might be called libraries or frameworks depending upon how you define the words. They are machines for taking your collection of components and turning them into endlessly morphing, instantly reactive displays. Don't say that they're setting the foundation for web sites because the term web app is a better fit.
React and Vue come from forward-thinking programmers with similar ideas. React is open source and officially supported by a team at Facebook. It’s an example of how companies embrace open source to both share and build a creative fervor behind their vision for the Internet. Vue came from Evan You, a former Googler who wanted to create a smaller, more nimble version that does more or less the same thing with just a touch less of awesomeness, or whatever the buzzword may be for features.
Both get much of their performance boost by forgoing the native routines for manipulating the blocks of the web page, the so-called DOM or Document Object Model. React and Vue create a parallel “virtual DOM” that tracks all of the moving parts and only at the last microsecond do they hand off a clean, optimized collection of tags to the browser to render. The goal is to keep the browser from touching or doing anything to the moving parts because the browser’s representation isn’t as fast or as trouble-free as the virtual DOM.
They also offer a sophisticated mechanism for organizing the parts of the site and the events that jump from one part to another. When clicks or keystrokes switch the focus, both React and Vue will handle the routing and state management so you can concentrate on the high-order job of putting the parts or components in the right place.
Both are also fairly similar in performance. This set of simple, independent tests from Stefan Krause that juggles lots of DOM objects shows that both React and Vue are in the middle of the pack. For some keyed items React is a bit faster, but Vue seems to use a bit less memory. Your results may differ, but these results suggest that for many basic jobs you won’t need to make your decision based on performance.
The differences between React and Vue don’t appear when you’re talking about the grand vision of the architecture. They’re more at the level of tactics, the kinds of chores and craft that fill up the daily clickstream. You won’t notice the difference when you’re sketching out the basic parts of the system on the whiteboard. You’ll start to feel it when you’re in the weeds and wondering the best way for component A to get component B to change its background color or something similar.
To help make sense of the dilemma, here is a list of reasons, grand and petty, for choosing between them.
React is big
It’s not big in an absolute sense. It’s just a bit more than 100K bytes, so it won’t slow down your web app too much when it loads. It’s more big in spirit. If there was a need for a slightly better, more ambitious way to create your application, the React team added it to the system. You don’t just build your components with templates, you use JSX, a clever language that has all of the power of JavaScript mixed together with the tags. If you want to juggle your state, you can use Redux, a sophisticated way to pass values. Redux feels like the React developers did not let anything get in their way for remaking the web into their ambition.
Vue isn’t big
Vue is a bit smaller, about half of the size of React when comparing recent versions. That small difference might save a microsecond in loading, something I swear you start to feel after developing with it over time. The real difference is in attitude. The Vue developers didn’t let their imagination run wild. When they could, they made do with more standard ways to build a site. Their templates are like the templates we’ve seen in the past. The way Vue uses CSS is similar. It’s less of a grand experiment than a streamlined plan for bringing a few clever ideas to the table.
React has JSX and JavaScript power
Components in React are built in a language called JSX. It’s technically a pre-processor for JavaScript and this means you can do most everything you want with JavaScript any time you’re laying out the basic tags in your component. If you need to check some data structure or extract some complex value from some chunk of data, you can pretty much toss that code right next to the tags you’ll use to represent it. Many React programmers like to say that they’re crafting a big JavaScript program that just happens to have some tags in it.
Vue doesn’t (and thank goodness)
Not everyone likes JSX. (And if you really love it but want to use Vue, you can rewire Vue to use JSX.) Some people find it hard to track when they’re writing JavaScript and when they’re writing HTML tags. The punctuation is different enough from regular JavaScript that you’re constantly trying to remember whether to hit that semi-colon key. And then some of the words are different. You don’t use the word “class” in the attributes of your HTML tags because it conflicts with JavaScript’s protected keyword and so you use “classname.” All of these little differences keep driving you a bit nuts.
Vue teams like to say that forgoing all of the cleverness of JSX shortens the learning curve and makes it possible for newcomers to understand the code quickly. The templates behave like templates that are largely full of HTML just like the websites they’ll become. The JavaScript is separated nicely. It’s just much less complex. If you’re happy with simplicity then Vue will be easier to take.
React is just the beginning
Indeed, you pretty much start off by adding extra libraries to handle standard chores like routing. Developers who choose React then turn to the next round of decisions like whether to use Redux or Flux or any of the other alternatives. React programmers love this flexibility and the innovation that comes from deep competition over all of the layers of the app.
Vue is more integrated
Vue comes with many of the basic decisions made for you. There’s one major system for maintaining state, Vuex, and most people use it. The same goes for dispatching requests with vue-router. You don’t absolutely need to use them, but they’re already deeply integrated and maintained by the same team that built all of the components. So why not? In general, much of what you want is probably there and semi-standardized.
React has React Native for native mobile apps
You can take much of your hard work for a web app and turn it into a mobile app by rebuilding it with React Native. It’s not as easy as some of the other approaches that just drop your JavaScript into a web component because React Native works with native components that are, in principle, faster and cleaner. Your constructs are converted into these native components instead of the HTML tags produced by regular React. There are differences that make this a bit of a challenge, especially if you use CSS extensively because the React Native components don’t speak it. But you can still reuse all of your React knowledge and instincts.
Vue is just gaining a native mobile path
Weex is an open source project that’s being incubated by the Apache Foundation. Vue developers can use it to build iOS, Android, and web apps all at once. Check out the clever playground, dotwe, for development and testing.
React lives for ES6
React is built with ES6, the latest version of JavaScript with all of the clever syntactic tools for packing and unpacking data structures. If you’re a big fan of the clean, simple code that ES6 embraces, then React is for you.
Vue is happy with ES5
Vue works with ES6 but you can get by with ES5-level code too. It’s not a limitation. It’s more a way the Vue library is a bit more flexible.
React enforces optimizable data structures
All of the React data structures are said to be immutable, a practice that makes it easier to write cleaner code. But what if you need to change the data? You call the “setState” method, which handles all of the changes and then triggers the right amount of updating of the screen. In theory, it will only re-render what needs to be changed.
Vue takes a more traditional approach
If you want to change a data element in Vue, you use the same standard dot syntax that’s used in everyday JavaScript. No need to change your habits.
React enforces a new way on JavaScript
React was a quantum leap forward. Instead of insisting that people separate their logic (JavaScript) from the display mechanism (HTML), React mixed the two together so you could bring some of the instantaneous, reactive magic of a desktop app to a web app. In the past, web developers aimed for the pure separation of the so-called model-view-controller pattern. React offered a way forward that seems liberating and infinitely flexible.
Vue is closer to old school JavaScript
The future is great but if you’ve got to get the code out the door, it’s better to stick with the tried and true mechanisms. Vue is closer to the old approach that separates the model, view, and controller.
Use both!
You don’t need to limit yourself to just one. If you really can’t choose, you can usually find some way to break apart the app into two chunks and let React handle one and Vue handle the other. Yes, your users will need to load two libraries and yes your team will need to remember when they’re writing Vue and when they’re crafting React, but you don’t need to pick only one path forward.
This isn’t just silly. If you’ve got Vue code and you want to switch over to React or vice versa, you can move slowly. You don’t need to rewrite the entire thing. They can coexist peacefully and bring us a tiny bit closer to the world wide web of everyone’s dreams.