Vue vs React

Frontend Project from start to finish

Hi, Nick Barth here, I’m an experienced freelance fullstack developer, currently on contract for Braingineers. In the past I have created and maintained both Vue and React production apps, but on this project, I had the opportunity to build two apps simultaneously. I thought this would be a fun opportunity to compare two of the most popular frameworks from a developers perspective.

While having both React and Vue work side-by-side invites comparison, these frameworks do not have to be binary. Within a project, both frameworks can co-exist, and with careful evaluation of pros and cons, you may be able to use both next to eachother in your next project.

The client facing app.

Internal Tooling? Don’t care about style? Big Old CRUD? React.

I decided on using React for the internal tooling, as the ecosystem was more mature, and we would be leaning heavily on libraries, specifically material-ui. With no designs, and no real requirements other than standard CRUD operations, I made the decision to leave nothing in question, and allow myself to be steered by the tenants of material design.

The introduction of hooks excited me for this, as there would be a large number of forms, and with hooks I’d be able to share common functionality between the forms. Context makes for an easy out of the box state management solution. Both of these new features were major selling points for this use-case of React.

Handrolled? Client-facing? Pixel Perfect? Vue.

Vue was chosen for the client-facing app; as I handrolled all of our UI primitives, I wanted flexibility and precision. We were blessed with a beautiful design, courtesy of Sander Crombach, and in short, we wanted this to look fantastic.

While, styling can be pixel perfect on both Vue and React, I found Vue’s native systems way more enjoyable to work with. The fact that we were writing all of our UI meant we could safely ignore the large ecosystem of prebuilt component libraries React has. This meant I had to be careful to build an iterable and maintainable codebase, which Vue’s opinionated approach was better suited for.

Below we are going to compare some aspects of our two projects.