7 de Junio de 2019 · 8 min de lectura
Allá por el año 2016, y a raíz de la entrada de un nuevo proyecto, decidimos desarrollar su parte frontal utilizando un framework javascript.
En aquella época pisaba fuerte Angular. Lo estuvimos utilizando en algunos proyectos, pero la experiencia no fue satisfactoria y decidimos buscar otro.
Hacía tres años que había salido React y se hablaba bastante bien de él, así que lo probamos, realizando el proyecto con la versión 0.14.2. Fue un proyecto bastante completo, con redux, internacionalización, enrutado, estado persistente, conexión con API (lógicamente), etc.
No había tantos estándares como hoy, así que tuvimos que configurar nuestro propio webpack de la mejor manera que supimos. El proyecto fue todo un éxito y a día de hoy está dando muy buenos resultados. Es más, hemos realizado más proyectos con React y estamos bastante contentos. Incluso tenemos una división de mobile con React Native.
En los últimos años hemos visto como el framework ha ido evolucionando, haciéndose cada vez más robusto, y con una gran comunidad detrás. ¡Sólo es necesario buscar proyectos React en Github!
Pero como bien sabéis, no sólo de React vive el hombre. Hay otros que han empezado a despuntar y merecen la pena tenerlos en cuenta. Uno de ellos es Vue, el cual nos llamó bastante la atención y quisimos profundizar un poquito más en él.
A raíz de otro nuevo proyecto grande, pusimos sobre la mesa la cuestión de qué framework utilizar, y evidentemente hablamos de Vue. Pero claro, antes de aventurarnos, hacía falta analizarlo y asegurarnos de no correr grandes riesgos.
Al tener tanta experiencia con React decidimos hacer una comparativa de aquellos puntos importantes y así poder valorar si valía la pena iniciar esa hazaña. Con lo cual, a continuación, vamos a describir distintos puntos, comparando los dos.
A diferencia de años atrás, actualmente, y afortunadamente, para React disponemos de create-react-app y el cliente de Vue, por otro lado.
Una vez instalado create-react-app, ejecutamos en el terminal:
<code>create-react-app nombre_app</code>
La acción crea la carpeta del proyecto con una estructura base, instala los paquetes de node y finalmente nos muestra un resumen. Sencillo, pero funcional.
Una vez instalado el cliente de Vue, ejecutamos en el terminal:
<code>vue create nombre_app</code>
Ahí la cosa cambia un poco, por qué Vue ya nos muestra un Wizzard donde nos pide qué paquetes queremos instalar, organizados por categorías.
En función de las opciones seleccionadas, como por ejemplo el precompilador CSS, nos pide si queremos sass o less. Una vez seleccionadas las opciones, crea la carpeta del proyecto con una estructura base, instala los paquetes de node y finalmente nos muestra un resumen.
Ya vemos que Vue se lo ha trabajado un poquito más.
Una vez creados los dos proyectos, decidimos construirlos y ver qué pasaba.
Ejecutamos:
<code>npm run build</code>
Vemos que en la carpeta build nos ha creado un sólo bundle y nos informa del tamaño en caso de ser servido con gzip, 37.34 Kb.
Vamos a ver qué pasa en Vue.
Ejecutamos:
<code>npm run build</code>
El informe que nos brinda es un poco más completo y lo más sorprendente es que él mismo nos ha separado los bundles, uno con las librerías externas y el otro con nuestra aplicación. Ésta es una nueva funcionalidad de webpack 2. Con el proyecto de react también podríamos hacerlo, pero tendríamos que configurarlo.
En Vue vemos que han trabajado un poquito más para dejar la cosa niquelada.
Otro punto importante es que, este proyecto lo creamos seleccionando vuex y router y vemos que el código compilado pesa unos 40Kb. Muy poquito, teniendo en cuenta que tenemos más librerías.
Vemos que el template base ha creado todo el código dentro una misma carpeta src. Lo que hacemos siempre es crear nuestras propias carpetas y mover los componentes ahí.
En el caso de Vue se ha creado una estructura más lógica donde colocar los componentes, assets, etc.
Parece una tontería, pero es un indicativo de como trabaja el equipo de Vue. Han dicho, vamos a hacer las cosas lógicas y fáciles.
No tiene mucho misterio. Monta el componente principal en la capa del DOM indicado y aquí empieza todo.
En el caso de Vue es muy similar. Una de las cosas interesantes es que instancia el objecto Vue y permite activar todos los plugins necesarios para nuestro proyecto. Esto nos ha gustado mucho. Sobretodo por la facilidad de activar nuestro store de vuex (luego hablaremos de él).
En este punto es donde hemos encontrado más mejoras.
Hasta la fecha, y probablemente ha mejorado la cosa, la instalación y configuración de Redux no es fácil. Hay que instalar react-redux, redux, redux-thunk, etc. Luego definir los reducuers, crear los ficheros de acciones. Luego en el componente root definir el Provider. Si queremos logeo o conexión con la extensión de chrome/firefox (react developer tools o redux devtols) hay que configurar unos middlewares extras. Es cierto que es muy mecánico y una vez hecho, siempre es casi igual. Pero da un poco de pereza la configuración inicial.
La implementación de Vuex es una maravilla. Primero, si se ha utilizado el ciente de vue y lo hemos seleccionado, ya nos viene configurado, sin tener que tocar prácticamente nada. Nos crea un store inicial y sólo es necesario crear módulos.
Cada módulo tiene una estructura muy bien definida, como se puede apreciar a continuación:
Con esta estructura de módulo, nos permite tener un código centralizado y muy bien organizado. En React, por un lado tenemos ficheros de reducers y por otro, los actions.
Disponemos de React Development Tools y Redux Devtools. Son dos extensiones independientes que debemos instalar. Además, si queremos conectarnos con redux devtools, debemos añadir un middleware en nuestra aplicación.
Disponemos de un plugin oficial que nos brinda un montón de funcionalidades. Además de poder analizar los componentes, ver su estado, etc (también lo hace la de React), con la misma extensión podemos analizar Vuex. Ver todos los cambios de estado, consultar el estado actual de nuestro store. Nos permite también analizar el enrutamiento, ver si el componente está enlazado a una ruta, o incluso nos facilita una herramienta para analizar el rendimiento. Muy potente, la verdad.
Ahí también hay diferencias sustanciales.
En React vemos que un componente es una clase de ES6, que hereda de Component (también se pueden usar las funciones stateless), y dentro declarar los distintos métodos, como por ejemplo, el render.
Aunque es funcional, a veces ocasiona algunos problemas. Por ejemplo, para trocear una pequeña parte del código, se tiende a que el método render llame a otro método interno del objeto (se podría crear otro componente, pero a veces es muy poca cosa y no se hace). Eso lo que provoca es que el componente sea difícil de seguir. Además, hay mucho código javascript dentro de los objetos jsx (html) y se mezclan muchos conceptos.
En vue, en cambio, se sigue una estructura más lógica. En el mismo fichero tenemos bien separado lo que es la vista y el controlador. Incluso nos permite añadir un tag style con estilos que sólo afectan a dicho componente.
Podríamos hablar mucho más de las diferencias, por ejemplo de las propiedades de los objetos, como funciona el estado de los componentes, los filtros de vue, los slots, el enrutado, los ciclos de vida, etc. Pero el post se está alargando mucho y creemos que una buena conclusión vale más que mil palabras :).
Ya ha pasado un tiempo desde que se empezó el post hasta terminarlo. Durante este periodo hemos terminado y puesto en producción el proyecto, por lo que podemos dar una valoración más exacta.
El equipo está muy contento con esta experiència y los resultados han sido muy positivos. La transición de react a vue no ha sido nada traumática, bastante rápida y sencilla. Se mantienen todos los conceptos de componente, ciclos de vida, estado, eventos, etc. incluso nos aporta muchas más funcionalidades muy potentes, como el tema de los slots.
El código resultante es mucho más legible ya que la estructura de los componentes es mucho mejor. Parece que la gente de Vue hubieran cogido lo mejor de todos los frameworks y lo hubieran metido en vue. Por ejemplo la sintaxi de las vistas recuerda mucho a angular, pero el concepto de ciclos de vida, soy muy parecidos a los de react.
A parte, el cliente de vue dispone de una interface web para crear los proyectos, lanzar tareas del package.json o incluso analizar los bundles.
Finalmente cabe destacar la gran comunidad existente y sobre todo la buena documentación. Sin duda vue ha llegado para quedarse.
Volver al blog
