Saltar al contenido

Etiqueta: comparacion

React vs Vue: ¿Cuál usar?

Este es un artículo que quería publicar hace un par de años. Quería escribir una comparación breve de React vs Vue para que cualquier persona con deseos de empezar con un nuevo proyecto o aprender front-end tenga una base de cual elegir. Pero siempre quedaba en borrador porque sentía que necesitaba mas experiencia con React (Vue lo uso diariamente en mi trabajo). Pero con la actualización de mis plugins de WordPress he logrado trabajar mas con React y poder hacer una comparación.

Comparación inicial entre React vs Vue

Algo que tienes que tener claro es que ambas tecnologías son librerias. No incluyen todos los componentes para hacer SPA. Pero si permiten crearlas y son la base para crear buenas interfaces dinámicas y ligeras.

Ambas tienen una funcionalidad similar pero con una sintaxis y forma de resolverlo diferente. Por ello, cuando quieres saber de React vs Vue debes enfocarte en cual se te hace mas fácil o te beneficia para tu próximo proyecto.

Ninguna es mejor que la otra, y todo se reduce a facilidad de conseguir programadores, documentación y cual se adapta a tu manera de pensar. Por eso lee los siguentes puntos que me parecen importante para que puedas elegir tu próxima librería de frontend.

Curva de aprendizaje y sintaxis

En mi opinión Vue es el mas fácil de aprender. La sintaxis es HTML con unos atributos especiales como v-if, v-if, v-model que permiten controlar el flujo de ejecución o generación del HTML, de resto es HTML estándar usando {{ }} (doble llaves) para mostrar las variables.

Actualmente posee dos formas de crear los componentes: usando Composition API y Options API. La diferencia entre ellas, es que la primera es parecida a la de React y esta enfocada en la facilidad de importar y reutilizar código. El otro, es la versión clasica donde creamos un objeto del componente con llamadas a los metodos, propiedades, datos, entre otras cosas.

También Vue tiene conceptos como variables computadas y asignación de modelos, que abstraen procesos que se harían manuales en otras librerias pero aqui se hacen de forma automática y podemos, por ejemplo, tener una variable que se compute automaticamente ante cambios, sin preocuparnos por desarrollar el proceso de actualización de la misma.

Aquí puedes ver un ejemplo de un componente sencillo que usa Composition API:

import { ref } from 'vue';

export default {
  setup() {
    const mostrarMensaje = ref(false);
    const nombre = 'María';

    const toggleMostrarMensaje = () => {
      mostrarMensaje.value = !mostrarMensaje.value;
    };

    return {
      mostrarMensaje,
      nombre,
      toggleMostrarMensaje
    };
  },
  render() {
    return (
      <div> 
        <h1>¡Bienvenido/a, {nombre}!</h1>
        <button onClick={toggleMostrarMensaje}>
          <span v-if="mostrarMensaje">Mostrar mensaje</span>
          <span v-else>Ocultar mensaje</span>
        </button>
        <p v-if="mostrarMensaje">Este es un ejemplo de sintaxis de renderización en Vue.</p>
      </div>
    );
  }
};

En cambio React usa JSX para renderizar los componentes. Es una sintaxis que mezcla XML con JS. Utiliza JS para controlar la lógica de renderizado y luego etiquetas HTML para definir los componentes y elementos de la página. Pero no es 100% igual, hay atributos como las clases que se llaman className, en vez de class y otros detalles que debes aprender.

Respecto a la parte de datos, utiliza algo llamado hooks que nos permite reutilizar el código mas facilmente. Aqui la data se maneja con estados. En mi opinión en React como no se abstraen tantas cosas, puedes tener mayor control de tu componente pero requiere que comprendas mejor el ciclo de video de ellos para obtener mejores resultados.

Aquí puedes ver un ejemplo de un componente sencillo que usa hooks:

import React, { useState } from 'react';

const Saludo = () => {
  const [mostrarMensaje, setMostrarMensaje] = useState(false);
  const nombre = 'María';

  const toggleMostrarMensaje = () => {
    setMostrarMensaje(!mostrarMensaje);
  };

  return (
      <div>
        <h1>¡Bienvenido/a, {nombre}!</h1>
        <button onClick={toggleMostrarMensaje}>
              { mostrarMensaje ? 'Ocultar mensaje' : 'Mostrar mensaje'}
        </button>
        { mostrarMensaje && <p>Este es un ejemplo de React JSX.</p> }
      </div>
  );
};

export default Saludo;

Aunque si observan ambos casos la sintaxis es muy similar, con saber buen HTML, no importa si es React vs Vue. Respecto a la sintaxis general

Documentación y comunidad

React debido a su popularidad posee una comunidad mas grande que provee mayor información y contenido. La documentación oficial es muy buena y enseña su uso sin importar que no tengas experiencia en la librería. Está dirigida a todo publico y me parece que nunca tuve dificultad para conseguir información para resolver problemas con React.

Vue también tiene una documentación muy buena, pero no es tan detallada. La comunidad es mas pequeña y en algunos casos debido a esto, no encontrarás mucha información o tutorial como los que existen en React.

En realidad ambos tienen documentación que te permiten aprender a usar estas tecnologías, solo que la de React tiene mas forma de tutorial y por el tamaño de su comunidad, te será mas fácil de encontrar solución a tus problemas.

Developer tools

Ambas librerías poseen herramientas para los navegadores a través de una extensión. En mi opinión las de Vue son mas cómodas, soporta gran variedad de tecnologías, permite ver mejora la información y son mas sencillas.

En cambio las de React, me pareció menos potente. A pesar de que puedes ver todos los componentes, no puedes editarlo o hacer operaciones avanzadas sobre los componentes. Y hay limitaciones como no poder usarlas dentro de un iframe que le quitan puntos.

Herramientas de desarrollo de React en Firefox

Pero ambas funcionan correctamente, permiten interactuar con los componentes y cumplen con el objetivo principal de ayudar al programador ver como se renderizan los componentes y ver las variables internas.

Mis recomendaciones

Si estás comenzando en el desarrollo front-end, considero que Vue es la opción ideal debido a su curva de aprendizaje suave y el uso de HTML simple para la creación de componentes visuales. No obstante, si tu objetivo es adquirir habilidades que te ayuden a conseguir trabajo, React es la elección más acertada debido a su mayor popularidad en el mercado laboral. Además, es posible encontrar una mayor cantidad de recursos e ejemplos para aprender, aunque es importante tener en cuenta que se requerirá un dominio previo de JavaScript y mayor esfuerzo inicial para dominarlo por completo.

¡Elige el que te parezca mas cómodo y se ajuste a tus necesidades! Comenta cual usas tú y por qué.

Deja un comentario

¿Qué consola comprar? Conclusiones (Parte 5/5)

Después de mostrar las cosas que puedes hacer con cada consola, su filosofí­a, sus juegos, sus servicios, entre otros; pasaremos a hacer una pequeña tabla comparativa entre lo que ofrece cada consola:

las 3 consolas

Nintendo
Wii
Playstation
3
Xbox
360
ProcesadorBroadway
(0.72 Ghz)
Cell
BE (3.2 Ghz)
Xenon
(3.2 Ghz)
Memoria
RAM
24mb
SRAM
256mb
XDR
512
GDDR3 (compartida con video)
Memoria
Video
64Mb
GDDR3
256mb
GDDR3

Almacenamiento512MB
flash
Disco
duros de 20/40/60/80GB
Disco
duros de 0.25/20/120GB
Conexion EthernetNoSiSi
Conexion
Wifi
SiSi
(20GB no)
No
Puertos
Usb
243
Puerto
HDMI
NoSiSi
Alta
Definición
NoSiSi
Reproductor
de Alta
Definición
NoSi
(Blu-Ray)
Si,
comprando la unidad (HD-DVD)
Formatos
Multimedia
Mp4
y algunos Avi,DVD
Mp3,
Mpg, Mp4,Divx, algunos WMV, WMA, algunos avi,
wav,Dvd.
Mp3,
Mpg, Mp4,Divx,  WMV,WMA, algunos avi,
wav,Dvd.
Precio
servicio online
GratisGratis$50
anuales
Precio
Juegos
(promedio)
$50$60$60
RetrocompatibilidadSiSi
(40GB no)
Si
Precio ConsolaDesde
$250
Desde
$400
Desde $200
Juegos ImportantesWii
Sports, Mario Galaxy, Smash Brothers Brawl.
Warhawk,
Metal Gear Solid, Final Fantasy versus XIII, Gran Turismo 5, Heavy Rain
Gears of War, Halo, Alan Wake, Mass Effect

Así­ como única conclusión es que miren que ofrece cada consola, que desean ustedes y elijan la que mas se adapte a sus necesidades. Tomen como gran importancia los juegos exclusivos que ofrecen, el servicio online que ofrece y si tienen televisor LCD/PLASMA fijarse si la consola ofrece Alta Definición (HD).

Espero que les haya gustado esta guí­a para comprar una consola de esta nueva generación, comenten si les ha gustado, si les ha parecido mal o lo que sea.

21 comentarios

¿Que consola comprar? ¿Wii, Xbox 360 o Playstation 3? (Parte 1/5)

Esta serie de artí­culos están escritos por mí­ con el fin de hacer una comparación entre las 3 consolas de esta generación (Nintendo Wii, Microsoft Xbox360 y Sony Playstation3) dando sus puntos buenos y puntos malos de manera neutral (favor leer todo el artí­culo) para que el lector decida por si mismo cual comprar si lo desea. Aquí­ no tomaré en cuenta la piraterí­a pues es ilegal y algo que daña mas bien la reputación de la consola, pues mientras mas tenga, los desarrolladores no querrán lanzar exclusividades pues perderán mucho dinero, habrán problemas con los servicios online, garantí­a, etc.

Console wars

Para empezar quiero responder ¿Por qué comprar una consola? En mi opinión prefiero muchí­simo tener una consola que una PC para jugar, las razones para ello son:

  • Menor costo: Comprar una consola por mas cara que sea siempre será mas barata que comprar una PC para videojuegos.
  • Tiempo de vida: Si compras una consola cuando sale, tendrás entre 4-7 años de soporte de software, es decir, vas a tener compañí­as sacando juegos para tu consola, a diferencia de la PC donde a los 3 ó 4 años será difí­cil correr un juego con el mismo hardware. Así­ que olví­date de actualizar el hardware en las consolas.
  • Juegos: Por mas que los fanáticos de PC digan lo contrario, existen mas exclusividades de tí­tulos de gran calidad para las consolas. Existen muchos juegos de PC que no logran salir para consolas pero son en menor cantidad que lo contrario.
  • El espacio: Una consola ocupa mucho menos espacio que un PC.

Por estas razones prefiero una consola, claro que no todo va a favor de las consolas, los usuarios de PC tienen la ventaja que con una PC de gama alta pueden superar los gráficos de una consola, ademas que existen herramientas para mods, desarrollo y modificación de juegos para PC que en consola no se ven (aunque Unreal 3 para PS3 esta demostrando lo contrario).

Ahora luego de esta introducción pasemos a la ayuda de elegir una consola, una de las cosas que la mayorí­a de personas eligen una consola es por su calidad de gráficos, esta mentalidad debe eliminarse (bueno las ventas de esta generación confirman que se ha eliminado, ya que la consola mas vendida es la que tiene menor potencia hardware) pues ahora las consolas ofrecen mas que un simple juego con gráficas, los factores que se deben tomar en cuenta para mi son:

  • Exclusividad de tí­tulos: No todos los juegos salen para todas las consolas, casi los grandes juegos suelen salir solo para una consola especifica, bien sea para ganar mas dinero, representar la marca de la consola, problemas legales, entre otros. Así­ que es muy importante tomar en cuenta esto, si eres super-fanático de Halo no compres un PS3 o Wii porque jamas llegará ese tí­tulo a esas consolas, y serí­a una lástima comprar una consola para la que no vayan a salir tus juegos favoritos. Ademas estos tí­tulos son lo que mas marcan diferencia entre las consolas: quien no relaciona los juegos de SuperMario, Zelda y Metroid con Nintendo, Halo, Gears of Wars con Xbox y Final Fantasy, Metal Gear, Gran Turismo con Playstation.
  • Precio: Tal vez el factor mas importante a largo plazo (sobre todo por los padres), para mí­ existen 2 tipos de costos: el inicial que serí­a el costo de la consola y controles extra; el costo a largo plazo que seria el costo de los juegos y costo de servicios extra tales como: acceso online, precio para jugar ciertos juegos, precio de las expansiones, artí­culos de la consola, etc. Tu decides cuanto deseas gastar en estas cosas de acuerdo a la calidad de las mismas.
  • Hardware: Unas consolas ofrecen mas prestaciones que otras, algunas ofrecen mejores gráficos, otra mejor procesamiento, otra controles mas sofisticados, otras se enfocan ser el centro multimedia del hogar, otras a ser puras consolas, etc. Esta parte es algo personal ya que no todas las personas andan buscando lo mismo en una consola y depende en lo que tu quieras invertir.
  • Precio/Hardware: Luego que se comparan por separado, se debe hacer esta relación. Ya que no queremos gastar mucho dinero en una consola que nos ofrece cosas que no querí­amos, o el caso contrario, gastar en una consola que nos ofrece lo que querí­amos.
  • Retrocompatibilidad: Si has sido dueño de una consola de la generación anterior, tal vez sea importante para ti jugarlos en la consola actual. Obviamente deberí­as comprar la consola de misma marca, ademas si, es probable que tengas apego a una saga de videojuegos en especí­fico que seguirá saliendo para la consola de la misma marca, ejemplo, si te hiciste fan de Halo en el Xbox y obviamente comprarás Xbox360 para tener Halo 3, si te hiciste fan de Final Fantasy en el PS1 y PS2 debes comprar un PS3, lo mismo con las sagas de Mario y Zelda que son exclusivas de Nintendo (Aunque con Linux en la PS3 puedes jugar juegos de SNES y NES)

Con esta serie de aspectos me basaré para hablar de cada consola, para hacer al final un resumen y que el lector decida cual es su favorita.

Siguiente post: Nintendo Wii

14 comentarios

Comparación de Windows Vista y Ubuntu 7.04

Me gustó este artí­culo donde se compara Windows Vista y Ubuntu 7.04 a nivel de instalación, uso diario de desktop, Internet, capacidades multimedia y gaming (videojuegos), que en mi opinión son las tareas que hace casi el 98% de la gente en sus casas todos los dí­as.

Les recomiendo leer el artí­culo ya que es imparcial, explica con detalle lo que hicieron y lo que opinan, y trae muchas imágenes para no aburrirnos con tanto texto. Si quieren migrar de Windows XP, entonces esto es una lectura recomendada.

Actualización al 23/04/2012
Lamentablemente el artículo ya no esta disponible 🙁

2 comentarios