React ou Vue? Que tal os dois ao mesmo tempo?

Nos últimos anos surgiram muitas bibliotecas e frameworks JavaScript para criar interfaces de usuário. Entre as mais famosas no mercado, duas ganharam muito destaque e por muitas vezes causam intriga entre os desenvolvedores. Estamos falando do React e do Vue.

Ambas partem do princípio de que se você sabe HTML, CSS e JavaScript. Você está pronto para usá-las. Apesar das diferenças de funcionamento entre elas, uma e outra conseguem ser incorporadas aos poucos nos projetos e tem uma curva de aprendizado muito pequena. E com a recente mudança de licença do React, ambos são open source MIT.

Para resolver o conflito entre os desenvolvedores que defendem suas bibliotecas, uma empresa chinesa chamada SmallComfort fez o que parecia impossível: executar o Vue dentro do React/React Native. Isso é feito através da biblioteca react-vue.

O projeto é composto de vários módulos, e com isso, oferece três maneiras de usá-lo:

1. Utilizar o reactive-system do Vue para usar a reatividade em um componente React
2. Utilizar o react-vue-loader para executar componentes Vue no React
3. Usar o react-vue-native-scripts para rodar o Vue dentro do React Native

Vamos dar uma olhada rápida em cada caso de uso.

Sistema de Reatividade

Uma das características mais distintas do Vue é seu sistema de reatividade não obstrusivo. Graças ao design da hierarquia do Vue, os desenvolvedores conseguiram abstrair isso para utilizar na renderização de componentes React.

Para isso, o primeiro passo é instalar o pacote via npm:

npm install --save react-vue

Com isso, já podemos utilizar o sistema de reatividade no React. Basta usar a tag @observe.

import React, { Component } from 'react';
import Vue, { observer } from 'react-vue';

const store = new Vue({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increase () {
      this.count ++;
    }
  }
});

@observer
export default class Demo extends Component {
  render () {
    return <h1 onClick={store.increase}>{store.count}</h1>;
  }
}

Veja que com este código e com a mudança dos dados, a view é atualizada. A maior parte da mágica do Vue fica disponível do React, mesmo que seja Vuex. Toda a API e documentação está disponível aqui. Além disso, há um ótimo projeto de exemplo que pode ser baixado e executado com um npm install e npm run dev. Basta fazer o fork aqui.

Componentes Vue

O segundo módulo, react-vue-loader, compila o componente Vue dentro do componente React. Com isso, ele permite que consigamos rodar os componentes React no Vue e vice-versa.

Para isso, basta instalar os seguintes pacotes npm:

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-loader

Feito isso, já conseguimos brincar com a renderização dos componentes. Por exemplo, podemos ter um componente React com Vue e/ou um Vue com React:

// Componente React (One.js) renderizando componente Vue (Two.vue)

import React, { Component } from 'react';
import Two from './Two';

export default class One extends Component {
  render() {
    return <Two>Hello Vue</Two>;
  }
}

// Componente Vue (Two.vue) renderizando um componente React (three.js)

<!-- Two.vue -->
<template>
  <div @click="count++">
    <three>{{count}}</three>
    <slot></slot>
  </div>
</template>

<script>
  import Three from './Three'
  export default {
    components: { Three },
    data () {
      return {
        count: 0
      }
    }
  }
</script>

// Componente React (Three.js)

import React, { Component } from 'react';

export default class Three extends Component {
  render () {
    return <span>{this.props.children}</span>
  }

Bem incrível, não é mesmo? Toda a API e documentação estão disponíveis aqui.

React Native

Por fim, mas não menos importante, o módulo react-vue-native-scripts nos permite utilizar o Vue de maneira muito fácil dentro do React Native.

Para tal, utilizamos os seguintes pacotes via npm:

npm install --save react-vue react-vue-helper
npm install --save-dev react-vue-native-scripts

Todos os componentes do React Native existem como componentes built-in no Vue. Isso significa que é possível utilizar o React Native assim:

<template>
  <view>
    <view>
      <text>Hello react vue</text>
    </view>
    <animated:view>
      <text>Hello animation</text>
    </animated:view>
  </view>
</template>

O mesmo código em JSX seria:

import React, { Component } from 'react';
import { View, Text, Animated } from 'react-native';

export default class Demo extends Component {
  render() {
    return (
      <View>
        <View>
          <Text>Hello react native</Text>
        </View>
        <Animated.View>
          <Text>Hello animation</Text>
        </Animated.View>
      </View>
    );
  }

Além da documentação de toda a API, há também um projeto de demonstração chamado HackerNews, que mostra o funcionamento do módulo. Basta dar um fork e executá-lo na sua máquina.

Conclusão

Com a explosão do ecossistema JavaScript, muitas bibliotecas surgiram e continuarão surgindo por um bom tempo. Na discussão de “qual é a melhor”, é preciso lembrar que não existe ferramenta perfeita, mas sim, a que melhor atende ao projeto. Tanto o Vue quanto o React são bibliotecas fortíssimas e bastante consagradas. Cabe ao desenvolvedor escolher qual lhe agrada mais. Bibliotecas como o react-vue ou o vuera – outra alternativa para trabalhar com React e Vue unidos – ajudam o desenvolvedor a tirar o proveito do melhor das duas tecnologias, podendo até mesmo ajudar na transição mais suave de uma para outra.