Diferencias entre Vue.js y React

Si hace unos días lanzábamos a la batalla a Vue.js vs Angular, esta vez le toca el turno a uno de los protagonistas, Vue.js, pero esta vez con React. En este post vamos a ver algunas de las principales diferencias entre dos de los frameworks que más crecimiento están alcanzando.

Como amante de la programación, seguro que has escuchado hablar de React, el framework de moda. De hecho, casi toda la plataforma de Facebook o Instagram están realizadas con React. React causó un poco de revuelo cuando salió por ser muy diferente a otros frameworks coetáneos como jQuery, Backbone.js y Angular 1. Su principal valor fue que popularizó un DOM virtual y creó una nueva sintaxis llamada JSX que permite a los desarrolladores escribir HTML en JavaScript.

Vue.js es un framework de JavaScript muy similar, cuyo objetivo es abordar los mismos problemas que React pero de forma diferente. Vue utiliza un sistema de plantillas en lugar de JSX, lo que facilita su integración en aplicaciones ya existentes. Como las plantillas usan HTML normal, Vue puede integrarse fácilmente en el código, sin necesidad de compilación. Además, la curva de aprendizaje es mucho más liviana que la de otros frameworks parecidos. Tambien cabe destacar que si bien está siendo muy utilizado, no tiene el respaldo de una compañía como Facebook, como pueda tenerlo React.

Aspectos similares

React y Vue tienen mucho en común, ya que ambos son frameworks de JavaScript de UI enfocados únicamente a la parte front-end.

• DOM virtual: Una de las mayores similitudes entre Vue.js (a partir de la versión 2.0) y React es el uso de lo que se llama un ‘DOM Virtual’. Un DOM virtual es una representación virtual del árbol DOM. Actualizar el DOM real frecuentemente es una tarea muy pesada. Sin embargo, actualizar objetos en JavaScript es relativamente ligero en comparación. Con un DOM virtual, se crea un objeto en JavaScript que representa el árbol DOM real. Las actualizaciones de cualquier elemento se realizan en el DOM virtual en lugar del DOM real. Cuando se cambia algo, se crea un nuevo objeto DOM virtual y se determinan los cambios entre lo antiguo y lo nuevo. Estos cambios se aplican entonces al DOM real.

• Arquitectura basada en componentes: Tanto React como Vue fomentan una arquitectura basada en componentes. Esto significa, la separación de la aplicación en distintos trozos de funcionalidad relacionada con una forma definida para cada trozo que forman la aplicación completa.

   

  [BANNER_SUSCRIPCION]

Principales diferencias

• Templating vs JSX: La mayor diferencia entre React y Vue es cómo se hace la plantilla. En Vue, se usa el HTML tradicional para plantillas. Este enfoque aprovecha los atributos personalizados en elementos HTML estándar. Los atributos también se pueden utilizar en componentes de un solo archivo, aunque requiere un paso de compilación para convertir la sintaxis del componente en JavaScript y HTML válidos. Vue fomenta el uso de HTML para desarrollar, mientras que utiliza un método familiar parecido al de Angular para mostrar el contenido dinámico con la sintaxis de estilo “bigote” ({ }). Por esta razón, Vue es seguramente más fácil de integrar en las aplicaciones existentes.
  React por su parte recomienda que se escriba todo el código de plantilla en JavaScript usando una “extensión de sintaxis a JavaScript” llamada JSX. JSX es JavaScript con alguna sintaxis de XML. Sin embargo, una vez que te acostumbras a él, se hace mucho más flexible y robusto.

• Gestión de estado vs propiedades de objeto: Si está familiarizado con React, sabrá que el estado de la aplicación es un concepto clave. Incluso hay frameworks dedicados a la gestión de objetos de estado de gran escala como Redux. Además, los datos de estado en las aplicaciones de React son inmutables, lo que significa que no se puede cambiar directamente (aunque esto no es estrictamente cierto). En React necesitas usar el método setState() para modificar cualquier cosa en el estado local. Sin embargo, con Vue no se requiere un objeto de estado local y los datos se administran a través de la propiedad data del objeto Vue. Además, no hay necesidad de llamar a una función de administración de estado como setState(), ya que el parámetro de datos en el objeto Vue actúa como titular de datos de aplicación.

• React Native: Un área donde React claramente tiene una ventaja es la capacidad de crear aplicaciones móviles nativas con React Native. La capacidad de usar JavaScript, CSS y HTML para crear aplicaciones móviles nativas legítimas es un cambio de juego. La comunidad de Vue y el gigante de comercio electrónico Alibaba Group están trabajando para crear la versión de Vue de React Native llamada Weex, pero aún está en desarrollo y claramente es una desventaja.

¿Cuál elegir?

Si necesitas un nuevo framework para la interfaz de usuario de JavaScript, cualquiera de los dos dará un rendimiento excepcional. React parece ser más popular, pero Vue está ganando adeptos rápidamente. Si lo que necesitas es integrar un nuevo framework de JavaScript en una base de código existente, elegiría Vue. Si la necesidad está en construir una aplicación móvil con tecnologías web, React (por ahora) es el ganador claro.