Battle of the Javascript Frameworks: React vs Vue.

Team member, James Rowe

James

The battle of the ages is right here people. Bigger than the clash between Godzilla and Kong. This is the fight between React and Vue. Prepare yourselves.

comic

In the blue corner we have React. The big boy of the website development world, React was first released by the robot people over at Facebook in 2013. Using JSX to combine HTML and CSS into Javascript, React feels very familiar for a lot of Javascript developers. This has allowed it to become one of the most popular web frameworks out there, being used by companies both large and small, including Pinterest, Uber, Airbnb, Twitter, and Netflix. It’s also worth noting that a lot of the services belonging to Facebook, like Whatsapp and Instagram, use React in their web applications as well.

React’s corporate backing led to there being doubts regarding its licence, but since its release React has operated under an MIT licence, which isn’t likely to change given its widespread usage. React also has a large open-source community behind it, meaning a rich ecosystem of open-source packages have been developed to augment your web application.

Now, in the green corner we have Vue. Vue wasn’t developed by a large company like Facebook. Vue was created by a single person – ex-Google employee Evan You, who wanted to take the best parts of current front-end Javascript frameworks, and improve upon them to make writing web applications faster and easier. 

A speedometer in the dark

Released in 2014, Vue has seen a surge in popularity in recent years. Vue has the option for components to be built using JSX like React, but by default, Vue uses HTML templates. This allows for the separation of HTML, CSS, and JS which you don’t get in React and with HTML templates being familiar to a lot of web developers, Vue has a much shallower learning curve than React. This means it can be the ideal solution for startups and small to medium-sized businesses who need to quickly build and test their MVP product. 

The similarities

On the surface, React and Vue could be siblings as there are a lot of similarities between the two packages: 

  • They use a Virtual DOM, so instead of having to re-render the whole page when data changes, React and Vue only re-render the components that changed.
  • Both React and Vue focus on the view library, with features like routing and state management being separate packages.
  • React and Vue operate under MIT licenses, meaning they are open-source packages.
  • They both have a strong focus on component-based UI development, encouraging code reusability and allowing for a much quicker development process.

Yet as you start to look closer, it becomes clear that these two frameworks, whilst definitely related, aren’t siblings, more like one of those cousins that you were super close with as children, but now only ever see at the occasional wedding and funeral.

party-min
The differences

The biggest difference between these two frameworks has to be how components are constructed. As previously mentioned, React primarily uses JSX, and closely follows Javascript’s functional programming paradigm, with components being Javascript functions (although Javascript classes can also be used). Vue components are built using HTML templates, although there is an option to write in JSX as well.

External packages for key features such as routing and state management for Vue are built and managed by the Vue team, and so are kept inline and up-to-date with the latest Vue release. However, with React, such packages are not developed by Facebook but instead by the React community, which has led to the community being a bit more fragmented than Vue’s, but does mean there is a much wider choice of packages out there for React developers.

One of the main attractions of React is its scalability. Facebook first built React because at the time their site was built using server-side rendering (using php), and for the amount of traffic coming through the site at the time, this just wasn’t good enough. As a result, when React was built it was built with large-scale applications in mind, and this is where it shines. It can be added to a site incrementally and used for adding interactivity to your site with things like forms, but in a lot of cases, this may be a slight overkill.

Vue on the other hand is much more lightweight than React, and so is perfect for just adding things like forms and other interactive sections to your site. That said, Vue works just as well for large applications as it does small, being currently used on sites including Trustpilot, Behance, Euronews, and Vice.

Let’s compare speeeeeed

When it comes to picking which framework to use for your site, one of the factors that you might think will help you make a choice is how quickly and efficiently they can carry out certain tasks. Well, you’d be wrong. The performance of React and Vue are actually very similar. Specific metrics can be found here, and they’ll show you that both frameworks perform the set tasks in very similar timeframes, with at most 100 milliseconds difference between the two.

It’s all a popularity contest…

As with most things in life, the choice between these two frameworks comes down to a popularity contest. With both being fairly similar in a lot of ways, and there being ups and downs to each framework, often it’ll be down to what you and your development team know better and prefer the most.

A survey by Stack Overflow in 2020 (found here), asked 65000 developers what technologies and frameworks they loved and dreaded the most. For most loved frameworks, React came 2nd with 68.9% of developers declaring their love for it, and Vue came 3rd with 66% of developers loving it. As expected, the results for most dreaded frameworks are the reverse. React took the 2nd to last spot and Vue just above.

If we look to Github, we see a different story. React has 168,000 stars on Github, yet Vue has 183,000. Vue overtook React around 2018, and has been increasing its lead ever since. At the time of writing, React has 11,663,952 weekly downloads on NPM. That’s 9 million more than Vue at 2,556,719. 

A gold winners medal on a blue ribbon is placed on a black surface covered in glittery sprinkles
Now if you were coming here in the hope that there was going to be a victor in this battle, I’m afraid you’re going to be bitterly disappointed… 

Much like myself, the dev community is divided. Both frameworks have their strengths and also things they aren’t so good at. React has a steep learning curve but its JSX-based architecture can pay off in the long run. Vue is great for small to medium scale projects due to being much easier to learn than React, yet doesn’t scale quite as well. 

In the end, it’ll mostly come down to personal preference. Have a play around with both frameworks and see which suits you and your needs best.

More from the Pinboard.

Paul -

How to Make Your WordPress Website more Secure.

View
A collage of various drinking places in nottingham city centre

Rachel -

The Ultimate List of Outdoor Drinking Spaces in Nottingham City Centre.

View