top

Why Must You Choose Vue.js Over ReactJS?

Over the last 10 years, our web pages have become more dynamic and powerful thanks to JavaScript. We’ve moved a lot of code that was normally on the server-side into our browser, leaving us with thousands of lines of JavaScript code connecting to various HTML and CSS files with no formal organization. Therefore, increasingly developers are using JavaScript frameworks like Angular, React or Vue.js.A few words of praise — Vue.jsVue is an approachable, versatile, and performant JavaScript framework that helps you create a more maintainable and testable codebase. Vue.js is a progressive JavaScript framework, which means if you have an existing server-side application you can plug Vue into just one part of your application that means a richer more interactive experience or if you want to build business logic into your front-end, Vue has the core libraries and the ecosystem you’ll need to scale like other front-end frameworks. Vue is more productive than React.js and allows you to take a web page and split it up into reusable components each having its own HTML CSS and JavaScript needed to render that piece of the page.Before… A little disclaimerI’m not the biggest fan of React and that’s just a personal thing. React is a great framework and if you like it, definite go for it nothing bad about it we see it being used by Facebook obviously and a lot of other companies too it is a framework which has proven itself however, I don’t like it that much I do know it I create some projects with it but I’m not the biggest fan of React whenever I had to use it I really had to force myself. This is one of the reasons I am writing this article.You hate mixing HTML with JavaScriptI like that, in React, we use JavaScript for everything but in practice, JSX isn’t my style because I don’t like mixing HTML and JavaScript. The problem is this that since JSX is just some tactical sugar to write HTML with JavaScript. We can’t write normal HTML. That’s why we have to use the class name instead of a class if you want to assign a CSS class. We have HTML and we have CSS. Why should I start writing everything in JavaScript and sacrifice all the features the native versions of HTML and CSS give us? I don’t get it I don’t like React. Again, that’s just my opinion. You may like it a lot of people like. It’s not my style though.var Fish = React.createClass({                 addToOrder : function(){                     this.props.addToOrder(this.props.index)                 },                 render : function(){                     var details = this.props.details                     var isAvailable = (details.status === "available" ? true : false)                     var buttonText = (isAvailable ? "Add To Order" : "Sold Out!")                     return(                         <li className="menu-fish">                             <img src={details.image} alt={details.name} />                             <h3 className="fish-name">                                 {details.name}                                 <span className="price">{helpers.formatPrice(details.price)}</span>                             </h3>                             <p>{details.desc}</p>                <button disabled={!isAvailable} onClick={this.addToOrder}>{buttonText}</button>                         </li>                     )                 }             }) Vue, on the other hand, has a clear separation between the template and the JavaScript code. I like Vue because it allows us to use HTML, normal CSS and JavaScript to connect all these things.You are a beginnerI think Vue.js is better than react.js for beginners. It’s due to this strange mixture of JavaScript and HTML that makes it really hard to learn and master React. It’s easy to create your first components. Writing really right and correct React code and understanding how everything works together takes time. How you loop through a couple of elements and output a list of items for each is challenging for newcomers for example. However, if the overall idea behind React really connects you, then there’s nothing wrong with it and it’s a great framework one of the most popular ones right now. But again, the reasons I mentioned might be reasons why you might not like it too.Moreover, Vue code is smaller than that of React.Vue :// vue.js (js) var Message =  new vue({ el : ‘#message’,             data : { message: ‘ ’ } }); <div id = “message”> <input type = “text”  v-model = “message” /> <span>{{message}}</span> </div>React :var Message = React.createClass({ getInitialState() { return { Message: ‘ ’ } }, handleMessageChange(e) {                        this.setState({ message : e.target.value}); }, render() { return ( <div id = “Message” > <input type = “text” onChange = {this.handleMessageChange } /> <span> {this.state.message} </span> </div> ) } }); You need official packagesReact also doesn’t bring all the features Vue brings. You have to add an extra router which is developed by the community. You have to separately add official state management package, which is again developed by the community. For Vue, all these packages are developed by the Vue team. You have a higher chance of these packages getting regular updates and working with the latest version. That well might not necessarily be the case. I will say that React has a very active and vibrant community. You will find the packages you need. But, at the end of the day, it’s just a community.You need faster applicationsWhile both React and Vue employ virtual DOM. It is much faster and performant in the case of Vue than in React.The founder of Vue.js addressed recognized DOM’s performance issues. However, the mentioned benchmarks are only relevant when you want blazing fast applications and most of the applications don’t need to do so much of row operations.Also, the size of the library is smaller in Vue, which makes the resulting applications performing well under slow internet connections.Ultimately… You want the best of both world: Angular and ReactFor me, Vue is a bit like best of React and Angular in a single package. It’s a great framework for a lot of great ideas from both the frameworks. You can use ES 5 and it will be absolutely fine. You can use ES 6 and will be great. You can use Typescript though is a bit harder but that’s not impossible to set up and not that hard anymore, to be honest. Nonetheless, you can choose the best framework that suits you.
Rated 4.0/5 based on 56 customer reviews
Normal Mode Dark Mode

Why Must You Choose Vue.js Over ReactJS?

Shahid Mansuri
Blog
25th May, 2018
Why Must You Choose Vue.js Over ReactJS?

Over the last 10 years, our web pages have become more dynamic and powerful thanks to JavaScript. We’ve moved a lot of code that was normally on the server-side into our browser, leaving us with thousands of lines of JavaScript code connecting to various HTML and CSS files with no formal organization. Therefore, increasingly developers are using JavaScript frameworks like Angular, React or Vue.js.


A few words of praise — Vue.js

Vue is an approachable, versatile, and performant JavaScript framework that helps you create a more maintainable and testable codebase. Vue.js is a progressive JavaScript framework, which means if you have an existing server-side application you can plug Vue into just one part of your application that means a richer more interactive experience or if you want to build business logic into your front-end, Vue has the core libraries and the ecosystem you’ll need to scale like other front-end frameworks. Vue is more productive than React.js and allows you to take a web page and split it up into reusable components each having its own HTML CSS and JavaScript needed to render that piece of the page.


Before… A little disclaimer

I’m not the biggest fan of React and that’s just a personal thing. React is a great framework and if you like it, definite go for it nothing bad about it we see it being used by Facebook obviously and a lot of other companies too it is a framework which has proven itself however, I don’t like it that much I do know it I create some projects with it but I’m not the biggest fan of React whenever I had to use it I really had to force myself. This is one of the reasons I am writing this article.


You hate mixing HTML with JavaScript

mixing HTML with JavaScript

I like that, in React, we use JavaScript for everything but in practice, JSX isn’t my style because I don’t like mixing HTML and JavaScript. The problem is this that since JSX is just some tactical sugar to write HTML with JavaScript. We can’t write normal HTML. That’s why we have to use the class name instead of a class if you want to assign a CSS class. We have HTML and we have CSS. Why should I start writing everything in JavaScript and sacrifice all the features the native versions of HTML and CSS give us? I don’t get it I don’t like React. Again, that’s just my opinion. You may like it a lot of people like. It’s not my style though.

var Fish = React.createClass({
                addToOrder : function(){
                    this.props.addToOrder(this.props.index)
                },
                render : function(){
                    var details = this.props.details
                    var isAvailable = (details.status === "available" ? true : false)
                    var buttonText = (isAvailable ? "Add To Order" : "Sold Out!")
                    return(
                        <li className="menu-fish">
                            <img src={details.image} alt={details.name} />
                            <h3 className="fish-name">
                                {details.name}
                                <span className="price">{helpers.formatPrice(details.price)}</span>
                            </h3>
                            <p>{details.desc}</p>
               <button disabled={!isAvailable} onClick={this.addToOrder}>{buttonText}</button>
                        </li>
                    )
                }
            })

Vue, on the other hand, has a clear separation between the template and the JavaScript code. I like Vue because it allows us to use HTML, normal CSS and JavaScript to connect all these things.


You are a beginner

I think Vue.js is better than react.js for beginners. It’s due to this strange mixture of JavaScript and HTML that makes it really hard to learn and master React. It’s easy to create your first components. Writing really right and correct React code and understanding how everything works together takes time. How you loop through a couple of elements and output a list of items for each is challenging for newcomers for example. However, if the overall idea behind React really connects you, then there’s nothing wrong with it and it’s a great framework one of the most popular ones right now. But again, the reasons I mentioned might be reasons why you might not like it too.

Moreover, Vue code is smaller than that of React.


Vue :

// vue.js (js)
var Message =  new vue({
el : ‘#message’,
            data : {
message: ‘ ’
}
});
<div id = “message”>
<input type = “text”  v-model = “message” />
<span>{{message}}</span>
</div>


React :

var Message = React.createClass({
getInitialState() {
return {
Message: ‘ ’
}
},
handleMessageChange(e) {
                       this.setState({ message : e.target.value});
},
render() {
return (
<div id = “Message” >
<input type = “text” onChange = {this.handleMessageChange } />
<span> {this.state.message} </span>
</div>
)
}
});


You need official packages

React also doesn’t bring all the features Vue brings. You have to add an extra router which is developed by the community. You have to separately add official state management package, which is again developed by the community. For Vue, all these packages are developed by the Vue team. You have a higher chance of these packages getting regular updates and working with the latest version. That well might not necessarily be the case. I will say that React has a very active and vibrant community. You will find the packages you need. But, at the end of the day, it’s just a community.


You need faster applications

While both React and Vue employ virtual DOM. It is much faster and performant in the case of Vue than in React.

 need faster applications

The founder of Vue.js addressed recognized DOM’s performance issues. However, the mentioned benchmarks are only relevant when you want blazing fast applications and most of the applications don’t need to do so much of row operations.

Also, the size of the library is smaller in Vue, which makes the resulting applications performing well under slow internet connections.


Ultimately… You want the best of both world: Angular and React

 best of both world: Angular and React

For me, Vue is a bit like best of React and Angular in a single package. It’s a great framework for a lot of great ideas from both the frameworks. You can use ES 5 and it will be absolutely fine. You can use ES 6 and will be great. You can use Typescript though is a bit harder but that’s not impossible to set up and not that hard anymore, to be honest. Nonetheless, you can choose the best framework that suits you.

Shahid

Shahid Mansuri

Blog author

Shahid Mansuri Co-founded Peerbits, one of the leading web application development company  USA, in 2011. His visionary leadership and flamboyant management style have yield fruitful results for the company. He believes in sharing his strong knowledge base with leaned concentration on entrepreneurship and business. Being an avid nature lover, he likes to flaunt his pajamas on beach during the vacations.

Leave a Reply

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

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs