Vue has always been one of the most popular JavaScript frameworks. On the other side React is one of the most popular JavaScript libraries. Both of them gained a lot much popularity in a short span of time. So its become really tough to choose the best one. Although both of them are used for SPA’s and mobile app development. So let’s check out the better-suited option with a comparison of Vue vs React.

What is SPA

SPA stands for Single Page Application. Its become much popular that many giant tech companies all over the world are using it. Its become really easy to create SPA with the router and component-based architecture of Vue and React. However its quite important to optimize SPA’s for SEO. So, first of all, make sure SPA is required otherwise Multi Page Applications are good enough.

What’s mobile app development

There are 2 kinds of a mobile app we can develop with JavaScript. They are called Hybrid app and Native app. Basically Hybrid apps are multiple platforms compatible so that we can write once run everywhere. Java or Kotlin is for Android and Obj C or Swift for iOS native app development. However, React and Vue both have some awesome frameworks to built Hybrid as well as Native apps.

History of Vue and React

vue js logoVue is one of the best frameworks I have ever found. Its developed by Evan You who was one of the employees of Google. He has been worked with Angular JS for a long time at Google. However, he finds Angular much heavier so he thought of making something of his own with the most awesome features of Angular. Finally, in February 2014 he has released Vue the lightweight framework.
Vue.js 2 Cook book
React-LogoReact is developed by one of the Software Engineer of Facebook Jordan Walke. It was initially released in March 2013. Soon it becomes much popular among JavaScript developers. Later in 2015 Facebook has announced another great framework React Native based on React. It makes the task easy to develop mobile apps with React.
React Up Running Building Web Applications

Vue vs React

There is a list of terms that we should focus on to choose the best option. So let’s check each of them one by one.

Popularity

Vue and React both are much popular among JavaScript developers. According to GitHub React has 81k+ starts with 15k+ forks. On the other side, Vue has 74k+ starts with 10k+ starts. I know we can’t define Vue and React’s popularity just on the basis of Github so let’s check out their trends too.

vue usage statistics

According to the usage statistics of last year, Vue has been used in more than 50k+ websites all over the internet.

react usage statisticsReact beats Vue in terms of popularity according to this usage statistics. As you can see more than 134k websites are using React.

So from the above section of Vue vs React we can see both are much popular. While React has released a year ago of Vue that gives it a plus point. However, the way Vue 2 is growing it will surely give a tough competition to React in terms of popularity.

Learning curve

When it comes to learning a new framework or library the learning curve plays a vital role. The smaller the learning curve is the easier it will be to get started. Let’s check out each of them with a simple hello world example.

First of all, we can include React or Vue in our project in multiple ways. I will always suggest using CLI as it provides support for rapid development. However, for this piece of article, I will use the CDN of both to include directly in out HTML.

<body>
	<div id="app">
	  	<p v-html="message"></p>
	</div>
	<!-- vue cdn -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.min.js"></script>
	<script>
		new Vue({
		  	el: '#app',
		  	data: {
		    	message: '<h1>Hello world</h1>'
		  	}
		})
	</script>
</body>

So in the above code as you can see there’s a single parent div inside of that we are rendering the Hello World. I am not going deep into the syntax as I have already made a Vue js tutorial for absolute beginners. So if you are new to Vue you can definitely check that out.

Now let’s move to React and see how we can do the same with it.

<body>
	<div id="root"></div>
	<!-- react cdn -->
	<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
	<script>
		ReactDOM.render(React.createElement(
		  'h1',
		  null,
		  'Hello, world!'
		), document.getElementById('root'));
	</script>
</body>

In the above code react is placing Hello World inside an h1 tag and rendering it to display inside the root. However, I have used plain JavaScript but its advised to use JSX for React.

As you can see both of the frameworks are doing the same work just with different syntax. I have found Vue to be more beginner friendly and easier to learn as compared to React.

However, its totally depended on the programmer and his personal preferences.

Job market

The job market for both is good enough. Upwork is one of the most popular freelance marketplaces for many freelance programmers. So let’s search out jobs with Vue and React and see the result shows.

upwork react jobs

As you can see there are more than 1k active jobs available at Upwork. However, it includes jobs for react native also. The result is pretty good now let’s see jobs for Vue.

upwork vue jobs

As you can see there are very few jobs available as compared to React. However, it’s just the results for the keyword Vue. As you know we can develop some great mobile apps with Vue so you can also bid for that too. In addition to that Vue js jobs is another great site to search jobs for Vue developers.

Scope for mobile app development

Mobile app development

React native is really good for native app development with React. Its one of the most important things that pushed the React’s popularity. On the other side, Vue has some great frameworks to develop mobile appsWeex is one of the most popular choices to create native apps with Vue. Anyway, Framework 7 with Vue is also an ideal choice.

So you can see from Vue vs React comparison that both of them are good for mobile app development.
Learning React Native: Building Native Mobile Apps

Performance

Both of the frameworks use virtual DOM and that makes each of them blazing fast. Yet the production build of React is quite bigger than Vue is size. Let’s see how much time it takes to create 1000 rows in Vue and React.

vue vs react benchmark performance

As you can see React takes around 22ms more than Vue. Now let’s check out the memory usage of both after creating 1000 rows.

vue vs react benchmark memory

On the other side according to the js framework benchmarks available on GitHub Vue is the clear winner. It processes faster and consumes less memory than React.

Anyway, Vue vs React performance difference is just in milliseconds but both of them are really powerful.

So from the above list of comparison of Vue vs React we can clearly see both of them are dominating the JavaScript market. Personally, I prefer to use Vue due to its easy to use nature and clean architecture. However, if you are not satisfied with both you can check out the best javascript frameworks list.

Finally, its totally depended on the programmer and his or her skills. No matter which framework or library you are using if you core JavaScript knowledge is strong enough you can play with anything. If you are not quite satisfied with your JavaScript skills and want to manipulate the new concepts then check out Best javascript books.

Categories: Javascript

Subham Mitra

A coder who loves to solve real-world problems through coding.

3 Comments

Sadiq · November 21, 2017 at 6:37 pm

How can i create a website just like this. Which frameworks were used?

Emem Umoh · November 21, 2017 at 10:09 pm

You did not conclude on the learning curve, any reason for that?

    subham · November 22, 2017 at 1:51 pm

    Just updated the section you can check out now

Leave a Reply

Your email address will not be published. Required fields are marked *