Point of Vue — Part 3 — Facing React

React is a popular choice for companies selecting a frontend framework.
at misterBIT we have selected Vue over React for all current projects.

In this article I will go through different aspects and compare them, with simple code samples so you can easily experience the superiority of Vue yourself.

Side note: please please do not take it personal, I have full appreciation for all frameworks and maintainers, we are just developers seeking for the best tool to finish the job and go make love.

Quick History

First, a small memorial for Mootools, Ember, Prototype, and knockout

React was born at times (2014), when the frontend community was slowly finding out that AngularJS (AKA Angular 1) — the framework many of us fell in love with, had a big problem hidden inside, curved deeply in the bones of the framework — it was named : the watchers problem

With AngularJS, it turned out that once you hit a low roof of ~2000 watchers, things quickly begin to slow down. it was a disaster, and libraries such as bind-once were made to attempt to solve it, but apparently it was an incurable disease.

It was then when Facebook introduced React and ideas such as Flux and Redux to developers, along with the use of VirtualDOM, so that the problem of efficient change detection was solved using explicit setState calls

With that, the watchers-problem that made the ship of AngularJS sink, was solved with React — there is no need to dirty-check for changes as they are all explicitly handled with setState.

At Oct 2014 Google announced a full rewrite of AngularJS into Angular(2).

Unfortunately — NG2 became an endless journey, and a huge, over engineered and prematurely abstracted framework that is actually still in the making. But enough with angular, I already expressed my feelings here.

With React one can build an app with much changing state and many components and it will render quickly and sweetly.

OK, so why not just go with React

React is a small idealistic library that is about doing one thing right (POSIX philosophy) and that thing is efficient component rendering, but there is so much more in frontend development than rendering components with props and children, and we can use a framework that truly supports that.

I will touch upon many points here, we will go through:

· The power of Directives

· Passing and Validating Props

· Working with Forms and Inputs

· Content Distribution

· Getting a REF

· Event’s Modifiers

· Routing

· State management

· Project Structuring,

· Dynamic Components!

· Scoped CSS

· Animations

· Hooks

· The CLI

Are you still here? g thanks!

Oh, no directives?..

When comparing React with NG1, Vue or NG2, one thing is clearly missing, it is called directives, and they are an important tool.

To demonstrate that, here is a simple render function from React:

Here is the same functionality with vueJS, showing why directives are a great help for coding descriptive — easy to read and maintain markups.

Directives are great!

When needed, In Vue, there are also render functions and JSX suppot, You can even use HTML pre-processors (i.e. Pug) but in most cases using templates and directives produce easy to read, expressive code.

Sometimes, it is also useful to create your own directives so you can add behavior to an element without adding markup:

I’ve added a sandbox with some examples if you want to go deeper with that:

Passing and Validating Props

React is all about props and children, so we get prop’s validation support, something like this:

React Props Validation

Lets compare to VueJS props validations:

Vue Props Validation

Lets compare propF above to how you do custom prop validation in React:

React custom prop validation

Working with Forms and Inputs

One of the most complex zones in apps is handling user inputs. Vue kept the model binding we had from NG1, its nice, simple and works great for most use cases:

Here is a larger example, with different types, multiple values, etc:

two way data binding inputs with Vue

React, being idealistic and taking the Flux idea religiously will need us to do something like this, for each input(!):

React input binding

In Vue, we can even easily use v-model on custom components:

HTML’s built-in input types won’t always meet your needs

Event’s Modifiers

One of my favorite features of Vue, here are some examples:

Those are common daily use cases, and React has none of that.

Getting a REF

sometimes, it is needed to get a reference to the actual DOM element (e.g. — embedding a google map or drawing on canvas):

Similarly, In React, it will look like that:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}

Content Distribution

When building rich UI, it is necessary to compose components allowing parent to inject (transclude) markup and bindings to a child component, in Vue, it may look like that:

the great-box component has a slot ready

When the above component is used, the parent can inject content inside that component:

React is about props and children, so it looks like this:

React children for content distribution

Vue has a powerful <slot> mechanism including named slots:

Here is a simple sandbox you can play with:

… and also scoped slots — those helps a lot while creating UI component libraries, here is a another sandbox:

Communication with slots content in React will (sadly) look like that:

Vue has powerful simple solutions for all challenges, here is a tabs component in less than 50 code and markup lines:

Building Tabs components in React will look like this (see the full article here)

Routing

Modern single page apps need good routing support, Vuejs router is as powerful as the famous UIRouter we had in NG1. It comes from the core team and is a first class citizen in the framework. You can do nested routing, named routes, route to an open modal, or whatever in your heart.

e.g. Nested Route in a User-Account page

Here is the code:

Vue Router sample with Nested Routes

React has various options coming from the community, usually there is no routing file, you just stack them and look them up in the source:

State Management

React developers mainly use Redux or Mobx

This article is getting too long so I will not compare Redux with Mobx here, but you can find a basic comparison here, but AFAIK most React developers use Redux.

Anyhow, I never thought switch cases will become so popular, and that so many developers would be spending time coding pure reducers and enforcing immutability.

For state management Vue developers use Vuex which is a simple and elegant reactive solution.

Vue developers get all the benefits without the boilerplate:

Dynamic Components!

Dynamic component is a feature that is required in many projects (generic forms builders, page builders, etc).

It is also a feature that helps us experiment with the framework internal mechanisms. both Frameworks provide a simple enough solution:

The Vue Way

For React, see this article.

However, with Vue If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a <keep-alive> element:

And even better, it also works for routes!

Scoping your style and pushing your limits

Vue has built in support for scoped CSS, in this example I’m also showing Typescript and decorators built in support:

Project Structuring

Structuring the project folders correctly is important, especially at times when many back-end developers are switching to Frontend and come with their own luggage.

So what is React’s best practice for that?

well, it is — move files around until it feels right (See here)

This is why when I step into React projects (as misterBIT CTO, I see quite a few new ones every month) — I never know what to expect, as every team curves its own way.

But most webapps has a common ground, here is a simple example:

Simple folder structure for a multi-app SPA

Powerful CLI, someone?

React has a nice boilerplate project called create-react-app, it is nice to get you started, then you eject as all config is hidden, then you are on your own.

Vue CLI is a true companion for developers, allowing adding and removing plugins, and so much more:

Animations

Good webapps use animations to awake the data, direct and reward the user, and in general create a great user experience, React does not help here. Vue? you guessed it:

React Hooks are coming

Few months ago, it was announced by Dan Abramov that React is shifting much of the syntax to a freshly born idea called Hooks.

So, expect most of the code above to slowly become irrelevant and deprecated, along with a pile of other articles, heaps of books, tutorials, best practices, infrastructure and UI libraries.

The framework will still be called React, and for a while you will still be able to use classes or find the right solution for your current challenge in stack overflow or such.

Personally I think Facebook is making the same mistake Google made when naming their new framework the same as the previous one, leaving us floating in an ocean of broken pieces of documentation, irrelevant articles and misleading advises.

Conclusions?

VueJS introduces reactive data while keeping the benefits of directives and templating languages. it has a clear road map and it catches like fire.

Several months ago, Vue has become the most starred framework in Github, here is a rare image of the tie moment at June 2018:

If you are curious here is the current state React | Vue.

If you are a React or an Angular developer, Vue will be a fresh breeze of air for you!

Again, I have full appreciation for all frameworks and maintainers, I am talking from my experience and from a wide perspective of participating in building the internet for the past 25 years.

Thanks for reading, if you find anything wrong or misleading please let me know.