React vs. Vue (3)

2020-08-22

Part III - React vs. Vue

Just so that you don’t have to read through the whole article, let me tell you right away. I prefer Vue over React. I prefer it because it is a workhorse and I was able to create UI functionality faster than with React. Having tried out these two technologies on the same project, I can say with confidence that Vue was also easier and more fun. React is certainly a serious contender with aspects worthwhile considering, most notably its functional nature and its large ecosystem. However, if I had a greenfield project or legacy project porting to do, I would certainly choose Vue for the web UI. The reason is that Vue gives developers a more powerful and comprehensive set of tools. It builds on the strengths of React and Angular and then adds some impressive features of its own. Vue gets two things right: reactive data binding and extensibility. In conjunction these are very powerful. With power comes responsibility, of course. It would be possible to go overboard and abuse these features. However, the foundation of the Vue framework is very sound. Despite of it being newer than React and Angular, it can be considered a mature framework.

Neither Vue nor React contain any actual UI components. Of course, one could create components from scratch using just HTML5 and CSS3, but most developers will want to add a ready-made UI component library to make their lives easier. There are many excellent libraries available for both React and Vue. I worked with Vuetify for Vue and Material UI for React. Both are semantic component libraries based on Google’s “Material Design”. They both have support for responsive design and -besides components- they both provide scaffolding for styles, typography, layout, icons and color themes. In terms of components, Vuetify’s selection is more comprehensive. Aiming at an all-in-one solution, it contains everything but the kitchen sink. Autocomplete, calendar, datepicker, carousel, treeview, expansion panels and timelines are some examples for its more advanced components. It also integrates with the Vue CLI and tooling. With Material UI, you have covered all the basics, like inputs, comboboxes, tooltips, tables and such. But you might have to look for additional third-party components every now and then. For example, I used the excellent material-table component in my project to simplify the task of displaying data tables.

React vs Vue

One thing I like about Material UI is its grid implementation and its support for responsive layouts. Even for very complex layouts, the code remains clear and readable. What I do not like is its CSS-in-Javascript approach. To be honest, hiding away CSS styles in complex data structures made styling quite difficult. You have to create JavaScript objects which are basically mini themes for individual components or views. This approach seemed a little opaque to me. Vue on the other hand, allows you to define “scoped” CSS. This is just regular declarative CSS that is visible only to a single component in the same file where it is defined, thus avoiding CSS name collisions. It allows you to define simple and readable CSS identifiers across your codebase. Brilliant! Of course, you can still apply global CSS style sheets, or SASS, LESS, or any other pre-processed stylesheet in Vue. Material UI comes with approx. 1100 predefined Material icons. Vuetify didn’t specify an exact number, but it looks like there are more than 3000 icons on the icon page. Both component libraries are designed in a way that components are elemental, which means they can be used independently of each other. Both libraries also contain utilities and baseline functionality that helps programmers to create their own components.

Let’s talk about application design. There are many similarities between Vue and React, including the one-way dataflow, virtual DOM rendering, and support for TypeScript and Flow. And then, there are also many differences, the most important perhaps relating to application design itself. React is primarily concerned with UI rendering and state management. Application design is completely left to the developer; React is “unopinionated” in this regard. Vue provides more structure in the form of single file components which themselves have a well-defined internal structure. Perhaps we can call this a “sensibly opinionated” component design. It means there are some conventions that provide developers with a baseline to build on. But that’s about it. Vue doesn’t dictate design beyond the level of components. Interestingly, working with React felt at times more restrictive to me, despite of its unopinionated nature. This may sound counter-intuitive, but once you have chosen to prefer certain React patterns, such as using functional components and hooks over class components and lifecycle methods, implementations become more uniform and simultaneously more restricted. It becomes harder to implement certain functionality and it takes more lines of code to write. The main reason is that you have to write code to perform state changes and trigger rerendering manually, whereas in Vue this happens automatically. I also found the React useEffect hook a bit unwieldy compared to the React lifecycle methods and the Vue lifecycle methods.

You can bet there is a reason behind this, and in my opinion the reason is found in the respective design philosophies of React and Vue. React was designed by and for a large corporation. It was created to be used in the context of Facebook applications in order to solve certain problems in UI programming. Large corporations have more staff, more interfaces, more rules and more complexity. In a large company, technology decisions affect many people and there may be constant fluctuation of individuals and teams working on different aspects of a large scale system. Im such an environment, conventions are very important. If people understand and apply the same conventions, they can collaborate more effectively. React is ideal in this scenario, because it emphasizes and enforces conventions in a minimalist way. Vue, on the other hand was created by an ex-Google engineer who designed the system to his own liking. Evan You created Vue to bring together the things he liked best about other existing frameworks, such as Angular and React. In doing so, he set out to achieve a balance in scope, rendering, and state management that falls somewhere between Angular and React. Vue gives developers more choices and more responsibilities than React. Perhaps one could say that React is corporation-oriented, while Vue is more developer-oriented.

To summarise, React is great for organisations that prefer layered, strictly defined and highly customisable solutions for progressive scope. There is a large React ecosystem which addresses exactly this need. Vue is ideal for organisations that emphasize productivity and prefer out-of-the-box solutions for standard problems. Vue accomplishes this without being overwhelming and simultaneously maintains efficiency and balance.