Frameworks

Desde hace unos años es habitual el uso de frameworks y librerías de renderizado para el front-end que simplifiquen el control de flujo en nuestras webs, como por ejemplo en el caso del desarrollo de aplicaciones SPA (Single Page Application o aplicación de página única).

Además, la aparición de las aplicaciones web progresivas o PWA, aplicaciones web instalables en nuestro móvil, incrementó aún más este uso, abriendo un potencial mercado para una gran cantidad de soluciones que nos permitieran desarrollar una web completamente adaptada a nuestras necesidades y creando un importante cambio de paradigma en el mundo del desarrollo web.

Similitudes entre React y Vue

Para comentar las similitudes entre ambas soluciones es necesario primero tener un poco de contexto sobre el origen y funcionalidad de ambas herramientas.

React es una librería de código abierto creada por Facebook en 2013 que inicialmente fue usada de forma interna para la propia creación de la red social. Es una librería basada en la gestión del renderizado y en la componentización de las diferentes partes de una aplicación web.

Vue, también conocido como Vue.js, fue inicialmente desarrollado por Evan You en 2014 después de su experiencia trabajando con AngularJS en una gran cantidad de proyectos. Su objetivo principal es gestionar el flujo de una aplicación permitiendo su incorporación progresiva en proyectos ya existentes y manteniendo un peso muy bajo.

Sin duda, tanto por motivación a la hora de crearlas como por funcionamiento, ambas herramientas comparten muchas características comunes que forman parte del paradigma actual en el desarrollo front-end, por eso veamos los puntos comunes antes de comenzar la comparativa:

• Ambas están basadas en JavaScript - Aunque esto es bastante obvio debido a que es el lenguaje del front-end, hay que hacer notar que TypeScript no es necesario como en el caso de Angular, aunque es opcional en ambos casos.

• Ambas se centran en el diseño de interfaces reactivas - Las dos ofrecen un potente sistema para creaciones de interfaces interactivos basados en la reactividad con el usuario y la composición de los componentes.

• Ambas optan por el uso de un DOM virtual - Es decir, en sendos casos se opta por mantener el estado de los datos de la aplicación en una representación del DOM real almacenada en memoria, de forma que cualquier cambio altere esta copia virtual y los cambios sobre el DOM real se apliquen comparando las diferencias entre ambos. En la web de O'Reilly es posible encontrar el siguiente diagrama que explica de una forma muy visual dicho proceso:

• En los dos casos es posible encontrar potentes herramientas de desarrollo - Que generalmente se integran con el propio navegador y permiten inspeccionar el DOM virtual y el estado particular de cada componente, así como de las propiedades que recibe.

Ventajas de React sobre Vue

Pese a que como hemos podido observar comparten una gran cantidad de similitudes, también debido a que Vue y React comparten una comunidad con unos objetivos similares, hay ciertas características de React que lo diferencian y potencian en gran manera respecto de Vue y que enriquecen su experiencia de uso:

• Uso de JSX para el renderizado de componentes - El uso de JSX, un lenguaje de renderizado extensión de la sintaxis de JavaScript, permite enlazar con facilidad la lógica del componente con la expresión de su renderizado, accediendo directamente a las variables y referencias de JavaScript. Además el linter, la comprobación de tipos y el autocompletado son aspectos que se encuentran mucho más avanzados que en el motor de plantillas disponible en Vue. Un ejemplo simple de su potencia sería este sencillo script:

react
  function formatName(user) {
    return user.firstName + ' ' + user.lastName;
  }
  
  const user = {
    firstName: 'Manolito',
    lastName: 'Gafotas'
  };
  
  const element = (
    ¡Bienvenido, {formatName(user)}!
  );
  
  ReactDOM.render(
    element,
    document.getElementById('root')
  );

Donde podemos observar cómo podemos introducir directamente cualquier función que nos devuelva un elemento JSX válido (Una cadena en este caso). En este caso concreto React inyectará en el elemento de id root un encabezado de primer nivel con el texto ¡Bienvenido Manolito Gafotas!

• React es no-opinionado - Aunque existen diferentes opiniones de uso, como la proporcionada por el famoso create-react-app, React está prácticamente libre de opiniones, de hecho, incluso el rendering es opcional y el flujo puede ser alterado de cualquier manera y para cualquier componente. Todo ello a diferencia de Vue, donde la instancia se encuentra aislada y es necesario seguir el flujo dado para que funcione de manera correcta.

• Tiene una gran compañía detrás que utiliza y refina el producto - Aunque tanto React como Vue poseen una robusta comunidad que aporta continuamente a ambas herramientas, React tiene detrás a una importante compañía como es Facebook, que no sólo es su creadora, sino que lo utiliza diariamente para todos sus productos (Incluyendo Facebook e Instagram), de forma que los arreglos necesarios para el correcto funcionamiento de las plataformas son luego portados al proyecto base.

Ventajas de Vue sobre React

Ya hemos visto las ventajas que hacen que React sea una opción deseable: Cómodo lenguaje de renderizado, libertad de flujo, potente apoyo económico y de desarrollo... Sin embargo, Vue no queda atrás en cuanto a ventajas y brilla en una serie de puntos por los que Evan You diseñó concretamente el framework:

• Optimización en la detección del cambio de estado - En React por defecto cada componente se renderiza de nuevo cuando es detectado un nuevo cambio de estado o un cambio en las propiedades, para evitar esto es necesario usar PureComponent o implementar el ciclo de vida shouldComponentUpdate con las condiciones exactas para la nueva renderización y evitar pérdida de ciclos de renderizado. Sin embargo en Vue las dependencias del componente se rastrean de manera automática de forma que el sistema sabe con exactitud qué componentes deben renderizarse de nuevo a cada cambio de estado, es decir, el equivalente en React a una implementación automática de shouldComponentUpdate.

• Facilidad para migrar un proyecto existente - El uso de plantillas basadas en HTML y la facilidad para introducir la librería (En una simple etiqueta script) e instanciar el framework permite que reorientar un proyecto en JavaScript puro sea mucho más sencillo con Vue que con React, ya que la lógica es perfectamente reutilizable y sólo es necesario componentizar los cambios que se realizaran anteriormente.

• El CSS es compacto y con visibilidad por componentes - Vue permite escribir una etiqueta style por componente y utilizar una propiedad scoped que asegurará que se creen nombres de clase únicos por componente, de esta manera no hay que preocuparse porque un cambio de CSS aplicado a una clase en un componente pueda afectar a una declaración de otra clase en un componente distinto. Por ejemplo:

  Vue
  <style scoped>
      div:hover {
          background: orange;
      }
  </style>

Esto a la hora de compilar producirá una inserción de un atributo con un nombre autogenerado (Por ejemplo data-v-32a123) y div:hover pasará a ser div[data-v-32a123]:hover. De igual manera Vue soporta cualquier preprocesador o post-procesador manteniendo las mismas ventajas.

React o Vue, ¿cuál elegir?

Elegir una herramienta de desarrollo para el front siempre es un tema complicado, entran en juego muchos factores, incluyendo en muchos casos la experiencia y la preferencia personal de los propios desarrolladores. Pero es tarea de un desarrollador utilizar la herramienta adecuada para el trabajo en particular, por ello estas son las directrices generales que suelo usar a la hora de decantarme por una de las dos.

Cuándo usar React

• Si queremos desarrollar una SPA (Single Page Application) - La potencia de React está pensada principalmente para crear aplicaciones de página única, sobre todo aquellas basadas en la reactividad del usuario. Además, gracias a create-react-app crear una PWA o aplicación web progresiva para la SPA es una tarea realmente sencilla y añade una potencia extra.
• Si la componentización es intensiva - Es decir, en el caso de preveer la existencia de muchos componentes, incluyendo anidaciones, ya que React destaca gracias a la posibilidad de implementar funciones de detección de cambio personalizadas que se adapten a la composición. No hay que olvidar que React fue creada con el objetivo en mente de crear una herramienta que simplificara la gestión de la gran cantidad de componentes que conforma Facebook.

Cuándo usar Vue

• Si queremos adaptar un proyecto existente - Dado lo fácil de instanciar de Vue y la facilidad para introducirlo en cualquier página, es una opción ideal para modernizar antiguos proyectos y reconvertirlos con el mínimo esfuerzo. De hecho, es habitual encontrar Vue introducido sólo en páginas concretas de ciertas webs que requieran una complejidad por encima de la media.
• Si queremos una solución liviana - Otros de los factores que destacan en Vue es su reducido peso, muy recomendado en proyectos ya sobrecargando o cuyo bundle total no deba de superar cierto peso por optimización de velocidad.

Más allá de estas directrices y bajo igualdad de condiciones Vue y React resultan opciones iguales de válidas, aproximadamente igual de eficientes y con comunidades muy volcadas y librerías adicionales muy potentes. Por ello os invitamos a probar ambas y decidir, y qué mejor forma que echarle un vistazo a nuestro curso de React para principiantes y a nuestro completo curso de Vue.js que os darán una mayor perspectiva a la hora de elegir adecuadamente.