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:
- Utilizar o reactive-system do Vue para usar a reatividade em um componente React
- Utilizar o react-vue-loader para executar componentes Vue no React
- 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.