Need advice about which tool to choose?Ask the StackShare community!
What Should I Use? React or Vue?
By Josh Dzielak
How They Handle Rendering HTML and CSS
React and Vue are very similar in their approach to handling the DOM (Document Object Model). They both utilize a Virtual DOM approach to rendering and re-rendering elements on a browser. Frameworks that employ this approach keep a virtual copy of the browser’s DOM. They then use this copy to determine how to best render new changes to the browser’s actual DOM.
While React and Vue both utilize the same approach to the DOM, the manner by which they render HTML & CSS is different. Let’s take a look.
HTML & CSS in React
We’ll start off by talking about how React handles rendering elements on the web page. React does this via Components. A basic React Component might looks something like this:
Javascript ```js
import React, { Component } from 'react'; import ReactDOM from 'react-dom';
class App extends Component { state = { count: 0 };
increaseCount() => { const previousCount = this.state.count; this.setState({ count: previousCount + 1 }); };
render() { return (
ReactDOM.render(, document.getElementById('root')); ```
HTML
js
<html>
<header></header>
<body>
<div id="root"></div>
</body>
</html>
React’s approach to handling HTML and CSS comes from utilizing JSX. JSX allows developers to define their HTML templates (and often CSS rendering) within Javascript files. While CSS processing can be done by a variety of libraries (like StyledComponents), the definition of HTML structure from within render() is a signature feature of React.
In our example, we used the ReactDOM class to search for an entry point (in our case a div with the id of “root”), and render the App component.
If we wanted to add more Component to our React application, we could inject them within the component template:
render() {
<div>
<MyComponent />
<MyOtherComponent />
</div>
}
HTML & CSS in Vue
Vue also utilizes a Component-based approach towards rendering HTML and CSS code in the browser. The means that the framework goes about this is a bit different from React. Vue’s out-of-the box approach towards this is by using HTML templating to define how components are rendered.
Here’s an example:
Javascript
js
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({ el: '#components-demo' });
HTML
js
<html>
<header></header>
<body>
<div id="components-demo">
<button-counter></button-counter>
</div>
</body>
</html>
Vue’s approach towards rendering HTML and CSS relies more on actual HTML templating to define how our Components are structured and ordered. In our example, any Vue component tag under the Components-demo div is going to be rendered. If you recall our React example from above, this structuring lived in the React Component.
This doesn’t exclude completely exclude templating from the Vue Component file, though. We still define certain sections of HTML in our template section of our Component. However, specifically in this example, all of the code being defined there is being acted upon by Javascript.
Vue also allows you to utilize the concept of Single File Components. This approach allows you to include your CSS, Templating, and Component Logic - all in a single file. Single File Components offer an effective means to including CSS in Components without having to install a CSS specific library on top of Vue. However, if you have a CSS library you like to use, Vue likely has support for it. Libraries like Vue Loader are helping developers utilize CSS Modules within their Vue Components.
While Vue has HTML templating out of the box, it also supports JSX templating via a Babel extension. The way we approach Vue templating with JSX is different from React, but it provides a way for developers to embrace Vue without ditching JSX.
In Review
React * HTML is rendered in JS (JSX) * CSS is increasingly being rendered in JS
Vue * HTML templates by default. * Supports JSX through extensions * Utilizes style tags in Components by default * Supports a variety of CSS in JS libraries
State Management
React’s Flux and Redux
The React community is well known for bringing forth two popular ideas in the Javascript community: Flux and Redux. While the ideas, themes, and implementations of these ideas aren’t strictly found only in the React community, React apps have benefited the most from them.
Facebook created Flux as a pattern to structure their React architecture across their various apps and services. Flux is based around the idea that all data being managed by a React application - no matter how big or small - is going to be flowing in one direction.
A couple of React developers decided to take the Flux pattern and create a functional-Javascript library out of it called Redux. Redux is essentially taking the primary ideas of Flux and adding a few spins to it. The ideas around actions and dispatchers still exist in Flux as well.
The React community has used Flux and Redux to both achieve scaling heights that not many of us thought possible. Facebook’s adoption and continued support of these ideas has also greatly influenced how people scale React.
Vue’s Spin on Redux
Vue is a much younger framework compared to React. Partially because of its age, it doesn’t have a giant company like Facebook backing and helping develop new patterns and ideas for it yet. However, despite Vue’s smaller following, it can still utilize Flux and Redux in similar ways that React does. So, you won’t have to abandon the idea of using Flux or Redux if you use Vue.
Vue does have a version of Redux: Vuex. It’s a library based around the idea of managing a state with one-way data flows - just like Redux. Vuex is also heavily inspired by the Elm programming language. So, if you’re into Elm-based functional views, it could be a good reason to check out Vue and Vuex. In Review
React is the tried-and-testing framework for creating Javascript applications at scale. There’s no doubt about that. However, Vue has the potential to not only use the same patterns, but create new flavors of it own. If you’re really into Elm and vibe with what Vue has going on, it might be a viable alternative for you and your team. However, you will be going down a road less traveled.
Amount of Control Available to Developers
Every framework has a variation of control that they allow to developers. This comes from two perspectives: an available public API and documentation or resources available to developers.
React Documentation
Facebook has done a great job at documenting a the features, methodologies, and thought process behind React. However, one of the biggest places that needs improvement is guidance on how build and structure your applications. React’s stance on this to not be too opinionated on how to accomplish this. The blessing is that a lot of creativity and innovation has come out of this space (see Flux and Redux). The curse of it lies within the thought that it's pretty difficult to figure out the the best way to build a React app is - since everyone has somewhat of a unique spin on how to create it. Combine that with a few years of API deprecations and you’re stuck wandering around the internet looking for a how-to article that’s most relevant to the React version you’re building against.
Vue Documentation
Vue has very similar documentation coverage and ideas that React has. However, they do include a bit more “official” documentation coverage than React has. Because of this, its offering more of an opinion than React does on how to build and structure applications. However, if you’ve experienced the pain points of React documentation and learning, this could be a welcome change.
Vue is a younger framework and because of that less resources are going to be out there on how to do certain things. If you’re coming from React, this could be a little annoying at first. However, resources around Vue are starting to grow at a pretty steady pace, so the gap between the two is shortening. React and Vue API Accessibility
React offers a few more lifecycle hooks than Vue (componentDidCatch, shouldComponentUpdate). While these hooks aren’t a dominant upper-hand that React has over Vue, they’re certainly useful to have.
Vue is going to offer developers a more API methods from within the HTML Vue templates. This is because Vue relies more on templates than React. So, if you’re into embedding more functionality in your HTML template tags, Vue might be the better choice.
In Review
Vue’s tendency towards more official documentation on certain functionality and design patterns certainly makes it a more refined experience to onboard into as a framework. However, React offers virtually the same experience with a bit more fragmented documentation. Even in places where React’s documentation doesn’t shine, developers have been able to create some amazing resources to help fill the knowledge gap. It's just not all in one central place.
Overall, there’s not a huge difference between the amount of API accessibility each framework offers. This is especially cemented by the fact that they’re both frameworks that focus solely on the user-interface side of things. They support various types of routing and middleware libraries, but they don’t make any sort of effort towards funneling developers to choose one over the other.
React vs Vue.js: What are the differences?
- React vs Vue.js Performance: React utilizes a virtual DOM to make updates efficiently, while Vue.js has a more optimized reactivity system and faster rendering compared to React under certain circumstances.
- Component Structure: React uses JSX for defining components, whereas Vue.js uses templates with optional JSX-like syntax, allowing for more flexibility in component structures.
- State Management: React relies on external libraries like Redux for state management, while Vue.js has Vuex, an official centralized state management solution built specifically for Vue applications.
- Learning Curve: React has a steeper learning curve due to its JSX syntax and unidirectional data flow, while Vue.js is more beginner-friendly with its clear and concise documentation and simpler syntax.
- Ecosystem: React has a larger ecosystem with more third-party libraries and tools available, while Vue.js offers a more cohesive ecosystem with official solutions for common challenges like routing and state management.
- Community Support: React has a larger community and is backed by Facebook, making it more widely adopted and supported in terms of resources and updates, whereas Vue.js has a growing community and is supported by tech giants like Alibaba and Baidu.
In Summary, React and Vue.js differ in performance, component structure, state management, learning curve, ecosystem, and community support.
What is the best MVC stack to build mobile-friendly, light-weight, and fast single-page application with Spring Boot as back-end (Java)? Is Bootstrap still required to front-end layer these days?
The idea is to host on-premise initially with the potential to move to the cloud. Which combo would have minimal developer ramp-up time and low long-term maintenance costs (BAU support)?
React might be a good option if you're considering a mobile app for the future, because of react native. Although, Vue.js has the easiest learning curve and offers a better developer ramp-up time. Vue.js is great to build SPAs, very clean and organized and you won't have a lot of long-term maintenance problems (like AngularJS, for example). Bootstrap can still be used, but with flexbox there's no need anymore.
I recommend React because of less memory occupant compare to Angular, but this will depend on your organisation flexibility. When you use React you need to import different libraries as per your need. On the other side angular is a complete framework.
Performance-wise I vote for react js as it loads up quickly and lighter on the mobile. You can make good PWA with SSR as well.
If you are new to all three react will be a good choice considering, react-native will be useful if you want to build cross platform mobile application today or tomorrow. If you are talking about bootstrap styling framework than it's a choice you can style ur components by ur self or use bootstrap 4.0 framework. The complete stack mentioned above is platform agnostic u can run it anywhere you want be it cloud or on-premise.
Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.
For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.
How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...
In my view, the upside of React is you're likely to find more existing, robust design systems (e.g. sets of components containing anything from buttons to datepickers) in the React ecosystem than Vue. UI frameworks aside, momentjs comes in when you want operate on the date(times) you get back from whatever datepicker you choose (e.g. date formatting, date match).
I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?
I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.
It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.
I chose to use Vue.js a few years ago mainly for the easy learning curve. I have no experience with React, so I won't make any comparison here. Regarding available components, I never felt locked in because of Vue when looking for components. It happens that a component I wish to use is not available as a Vue component (and nobody published any Vue wrapper for it), but in such cases I was able to quickly hack a Vue wrapper component. In the end I don't think a decision to choose one framework over another should be made solely because of the number of components available. (And not all components in either framework is maintained, bug free, documented or easy to use)
I would also go with React. The learning curve can be a little more difficult but as soon as you got the concepts it's really easy to create things. As everybody has mentioned the React community is huge and it keeps growing, anything you may need for your project there are super high probabilities that you will find it.
React is great, Vue.js is also great. But I'm personally using React, because React is changing the way I look at how JavaScript should be. This is a really big plus for me. Vue is good, but it's just another alternative. Also, too many big companies are using React, that means you can trust it for big projects.
I'd have to concur that I'd advise React. In addition to the reasons mentioned, the developer pool is significantly larger (and also slightly more expensive) for React. In time, engineering costs will even out as more and more teams adopt it. The community support is fantastic, and the available components significant.
Both have their pro's and con's; however to agree what has been mentioned here before; Using Vue.js will be easier as it's learning curve isn't steep; plus learning Vue.js will teach you fundamentals which (in a sense) can be applied to React as well. Community support for React is indeed very big, but Vue.js is also still growing. Component wise, I wouldn't worry to much about that, writing your own components is also a good tool for learning a language.
Having developed in both Vue.js and React, I agree with your assessment of Vue. It does feel light and easier to understand and therefore learn. Seeing that Vue has some genetic roots with React, I would say start your friend out on Vue. If they need to learn React later, that should give them a good foundation. If you have a Pluralsight subscription, look for my course on Vue.js and feel free to use the demo project as a starting point.
Would start with Vue especially if you want to progress more quickly and don't want/need to spend time learning React just for the sake of it. You can always pick up React later if necessary. I would caution about using "more readily available React components" just because they exist.
Anything that interacts with the Internet, websites, applications, etc., while it may be more complex to build, will be easier to maintain in the long run. React offers more flexibility, a much larger support base for knowledge and opinion, and is just as stable asVue.
To make the best comparison in my opinion, think of React as the Android OS and Vue more like iOS. While Vue may be advantageous in some cases, it is limited by constricting parameters. On the other hand, while React may be more complex and incorporate more open-source/third-party constructs, it is supported by over 50,000 npm packages and allows for the use of JSX. Which I might add, once learned, becomes second nature to employ and offers more flexibility.
It all depends. Vue.js is smaller, and from what I saw (benchmarks) faster. It's also slightly more intuitive and easier to grasp. React is more popular, and the adoption rate is much higher.
Again, it all depends.
If I may, my personal choice would perhaps be either React or Svelte.
We did a comparison between React, Vue and Angular and while found each capable of supporting our needs, we ended up using VueJS because of its ease of use, the ability to use templates, large and growing community and good documentation. After developing on it for a around 4 months we re-evaluated and agreed that we had made the right choice and continue to migrate our products/platform to it.
I would recommend both of them since Vue is a UI library and helps you to design beautiful website while react allows you to handle backend problems like comment management and onspot reloading more efficiently also react includes useState and react is a framework while vue is a library
It is hard to say which is good. I've used both. Vue is easier. But I feel more comfortable with React. That is why I chose React.
VueJS hands down. Which components do you need? Have a look at Vuetify, mature project, plenty of components ready to plug and play. If on the other side you need more customization, have a look at tailwindcss. VueJS is much cleaner and IMO will overtake React soon. It's simply a better React.
Virtual dom and JSX. Vue is just a baby to the race. React has it's mobile platform version as react native . so it would be easy for you and you wont reinvent the wheel again for mobile apps.
As others have stated there are more canned components available for React, but your observation about it's complexity is an important one. There are architectural aspects of Vue.js that lead to cleaner more concise solutions. As React apps get bigger they become a little unwieldy. Depending on your requirements you need to weigh those competing concerns. Our team is using React, but I am beginning to question that choice as time goes on. Another consideration is that Vue.js is becoming more mature as we speak. Also as others join the project, react developers should be productive in Vue.js within days. Just my 2 cents...
We choose React for our client-side implementation because of React's virtual DOM implementation and component rendering optimization. It can help our app to be more stable and easier to debug. Also, react has strong support from the dev community. There is an enormous amount of reacting libraries we could use, which will speed up our development process.
As a backend dev, it was quite easy to go with vue over react. Important note that Im now talking about Vue2 maybe the are crucial changes in third version, but the second one is super easy to get into without spending too much time learning concepts. And vue-cli is just a breeze to start a project with.
What a debate to wade into - React vs. Vue.js. Prototyping of applications is much, much faster in Vue.js. React, I believe, has a much heavier developer learning experience - so hiring pure Javascript developers allows us to work in a much more framework agnostic way. However, React still has a place within our application stack - it's much more performant out of the box.
Starting a new company in 2020, with a whole new stack, is a really interesting opportunity for me to look back over the last 20 years of my career with web software and make the right decision for my company.
And, I went with the most radical decision– which is to ignore "sexy" / "hype" technologies almost entirely, and go back to a stack that I first used over 15 years ago.
For my purposes, we are building a video streaming platform, where I wanted rapid customer-facing feature development, high testability, simple scaling, and ease of hiring great, experienced talent. To be clear, our web platform is NOT responsible for handling the actual bits and bytes of the video itself, that's an entirely different stack. It simply needs to manage the business rules and the customers experience of the video content.
I reviewed a lot of different technologies, but none of them seemed to fit the bill as well as Rails did! The hype train had long left the station with Rails, and the community is a little more sparse than it was previously. And, to be honest, Ruby was the language that was easiest for developers, but I find that most languages out there have adopted many of it's innovations for ease of use – or at least corrected their own.
Even with all of that, Rails still seems like the best framework for developing web applications that are no more complex than they need to be. And that's key to me, because it's very easy to go use React and Redux and GraphQL and a whole host of AWS Lamba's to power my blog... but you simply don't actually NEED that.
There are two choices I made in our stack that were new for me personally, and very different than what I would have chosen even 5 years ago.
1) Postgres - I decided to switch from MySql to Postgres for this project. I wanted to use UUID's instead of numeric primary keys, and knew I'd have a couple places where better JSON/object support would be key. Mysql remains far more popular, but almost every developer I respect has switched and preferred Postgres with a strong passion. It's not "sexy" but it's considered "better".
2) Stimulus.js - This was definitely the biggest and wildest choice to make. Stimulus is a Javascript framework by my old friend Sam Stephenson (Prototype.js, rbenv, turbolinks) and DHH, and it is a sort of radical declaration that your Javascript in the browser can be both powerful and modern AND simple. It leans heavily on the belief that HTML-is-good and that data-* attributes are good. It focuses on the actions and interactions and not on the rendering aspects. It took me a while to wrap my head around, and I still have to remind myself, that server-side-HTML is how you solve many problems with this stack, and avoid trying to re-render things just in the browser. So far, I'm happy with this choice, but it is definitely a radical departure from the current trends.
Have you ever stuck with the question that which one is the best front-end framework for you?
With continuous web development progress, the trends of the latest front-end technologies are also continuously changing with more and more sophisticated web features. These top front-end frameworks and libraries have made your complex web tasks more flexible and efficient.
Check out top front end frameworks and their features at https://www.nmtechedge.com/2020/09/24/top-4-trending-front-end-frameworks-2020/
I honestly think the best choice for which framework you use should come down to your team's skills. If you have one Senior Dev that is great at React, but like 3-4 mid-level devs, and a handful of junior devs that know Vue.js ... maybe look at using Vue.js a little more seriously.
Yes, there are pros and cons to framework decisions, but I honestly see a LOT of teams not even consider whether a specific framework is a good fit.
I honestly think the best choice for which framework you use should come down to your team's skills. If you have one Senior Dev that is great at React, but like 3-4 mid-level devs, and a handful of junior devs that know Angular ... maybe look at using Angular a little more seriously.
Yes, there are pros and cons to framework decisions, but I honestly see a LOT of teams not even consider whether a specific framework is a good fit.
I have made an extended effort to drop frameworks completely if they are not actually needed. While I still use JS Frameworks like Vue, Angular and React ( if I have too ), I see far too often devs / teams deciding to build a single page site entirely in a framework, rather than just using HTML, CSS and a little JS.
I personally feel it's important to know when a framework is a good solution, and maybe when it's overkill.
It was easier to find people who've worked on React than Vue. Angular did not have this problem, but seemed way too bloated compared to React. Angular also brings in restrictions working within their MVC framework. React on the other hand only handles the view/rendering part and rest of the control is left to the developers. React has a very active community, support and has lots of ready-to-use plugins/libraries available.
It is a very versatile library that provides great development speed. Although, with a bad organization, maintaining projects can be a disaster. With a good architecture, this does not happen.
Angular is obviously powerful and robust. I do not rule it out for any future application, in fact with the arrival of micro frontends and cross-functional teams I think it could be useful. However, if I have to build a stack from scratch again, I'm left with react.