Soy un Vue Lover

Confieso, soy un Vue Lover y estoy orgulloso de serlo. Hace poco os hablé como Kotlin siempre estaba en mi equipo. Hoy me toca una de las entradas que mas deseaba escribir. Vue.js es imprescindible para mi. Aunque lo he ido adelantando a lo largo de esta web y distintas entradas y proyectos. Creo que no queda dudas de que me canta Vue.js y poco a poco te voy a mostrar a qué es debido que sea parte fundamental de mi stack como desarrollador y profesor.

¿Qué es Vue.js?

Vue.js (opens new window) es un framework progresivo de JavaScript de código abierto (opens new window) para la construcción de aplicaciones web. Fue creado por Evan You (opens new window), y es mantenido por él y por el resto del equipo de Vue Core. Vue.js te permite trabajar con plantillas, usar reactividad entus aplicaciones web, enrutamiento y hasta stores de datos. No voy a explicarte todo lo que se puede hacer de Vue.js, si no porqué me aporta mucho más que el resto de frameworks.

Si quieres conocer un poco más de Vue.js debes mirar este documental.

¿Por qué Vue.js?

Esta es la gran pregunta. Siempre me he decantado más por el Back-end que por el Front-end. Si trabajaba en clientes generalmente era en móvil. Veía mucho código en JS desorganizado, usando jQuery que lo alejaba de la lógica de como hacer aplicaciones grandes donde se procesa datos.

A la hora de querer profundizar en frameworks del lado del cliente tuve la duda entre elegir Angular, React o Vue. Creo que casi todo el mundo ha pasado por eso. Debo recordar que desarrollo por gusto y particularmente y no me muevo por intereses empresariales. Además mi trabajo principal es la docencia, formación y la investigación.

Angular lo rechacé si no por los "bailes" que hace Google. Lo he sufrido en móvil. React no me gusta como trabaja y de nuevo me veo a expensas de los intereses de Facebook. Vue.js me parecía una alternativa real, potente y en medio de ambas. Capaz de coger lo mejor de los dos. Es un proyecto libre y escuchan a la comunidad y están atentos a sus necesidades.

Para mi, Vue.js, se adapta muy bien a mi forma de desarrollar software. Desarrollo basado en la descomposición de componentes que interactúan entre ellos. Puedo usar JavaScript o TypeScript cuando lo desee y sobre todo me ha encantado su ecosistema.

Ecosistema de Vue.js

Aquí es donde viene el punto fuerte. Vue.js no solo te permite hacer SPAs (Single Page Apps), tiene un ecosistema y una comunidad que lo hace bastante interesante y atrayente para mi. No sólo se trata de hacer componentes que se comunican con eventos y propiedades, si no de ofrecer una serie de herramientas, utilidades y extras que te hacen más fácil el trabajo.

Vue CLI y Vite

Estos CLI te ofrecen toda la potencia para configurar y comenzar tus proyectos en Vue.js. Vue CLI (opens new window) te ofrece todas las opciones para hacer tu proyecto una realidad a nivel de configuración. Vite (opens new window) es toda una revolución. De nuevo Evan lo ha vuelto a hacer ofreciéndonos una herramienta que realmente potencia tu desarrollo.

DevTools

Vue DevTools (opens new window) es una extensión para Chrome que te ofrece la posibilidad de poder analizar y depurar tu aplicación Vue. Con ella puedes analizar los componentes, sus eventos y propiedades. También puedes analizar el enrutamiento y los estados de tu store.

Vue Router

El sistema de enrutamiento de Vue (opens new window), es uno de los que más me gustan. Eficaz y muy sencillo. Es modular, con rutas dinámicas, query, efectos de transición y mucho más. Sin duda no parecerá que estés en una SPA cuando navegues en tu navegador.

Vuex

El sistema de estado de Vue (opens new window) es realmente interesante. Se podría decir que se basa en el patrón Flux o Redux. Nos permite manejar el estado entre confirmaciones y mutaciones. Además, es compatible con las DevTools.

Mi preferencias en Vue.js

No solo de los proyectos oficiales vive el desarrollador de Vue.js. Y entre la multitud de proyectos de su ecosistema realizados por la comunidad me gusta destacar los que más uso.

Nuxt.js

Nuxt.js (opens new window) es un framework que se utiliza para el desarrollo de aplicaciones web. Podemos utilizar nuxtJS para crear aplicacion estáticas(static page), de una sola página (SPA) o de servidor (SSR). NuxtJS es un framework que trabaja sobre VueJS, esto quiere decir que tenemos todo lo bueno de VueJS pero contando ya con una organización y configuración establecida desde el principio, que ayuda al desarrollador a enfocarse 100% en el desarrollo desde el principio.

VuePress

Es uno de mis proyectos preferidos. Esta web esta desarrollada con VuePress (opens new window). Nació porque Evan y su equipo necesitaban un sistema para documentar los proyectos y hacer blogs, sin la necesidad de montar grandes aplicaciones como puede pasar en Nuxt.js para hacer SSR. Algo que te permita con Markdwon escribir documentación. Además, se adapta muy bien a mi filosofía de trabajo jamstack.

Pinia

No digas que es una simple store, es la STORE. Pinia (opens new window) es uno de los proyectos que más feliz me ha hecho y más tiempo y dolores de cabeza me ha quitado. Uno de los problemas que le veo a Vuex es su rigidez y pasos extras para trabajar con tipos incluso en Vue3. Pinia, nos ofrece una visión de cómo debe ser una store moderna, efectiva, intuitiva, extensible y muy ligera. Es compatible con DevTools. He felicitado a Eduardo (opens new window) por su excelente trabajo y recomiendo utilizar Pinia en todos los proyectos que puedas. De hecho marcará los pasos del próximo Vuex 5.

Oruga

¿Componentes para Vue a los que les puedes aplicar cualquier estilo CSS? Eso es Oruga (opens new window). Me canta Bulma (opens new window) y me encanta Buefy (opens new window). Muchos de mis proyectos parte de esa base. Pero es verdad que a veces buscas algo más, o simplemente quieres compatibilidad con Vue3. Oruga está creado por el equipo de Buefy, con la idea de no depender de un CSS si no de usar lo que consideres más oportuno en tu proyecto. Walter (opens new window) ha hecho un trabajo fantástico con su colaboradores. En su página web tienes un ejemplo de como usar distintos estilos para los mismos componentes (opens new window).

Quasar

Uso Quasar (opens new window) cuando quiero una aplicación para todo. Es verdad que puedo usar Electrón para Vue para mis aplicaciones de escritorio, o Tecnologías como NativeScript (opens new window) o Ionic (opens new window) para crear aplicaciones móviles. Quasar me ayuda a crear todo lo que quiera fácilmente. Con Quasar puedes hacer casi de todo:

• SPAs (Single Page App)
• SSR (Server-side Rendered App) (con cliente PWA)
• PWAs (Progressive Web App)
• BEX (Extensiones para Explorador)
• Mobile Apps (Android, iOS, …) con Cordova or Capacitor
• Multi-platform Desktop Apps (usando Electron)

Otros

Seguro que me dejo muchos de los increíbles proyectos como VeeValidate (opens new window), VueUse (opens new window) o Slidev (opens new window), pero te invito a que mires VueAwasome (opens new window) y conozcas los proyectos alrededor de Vue.js.

Testing

Para testear nada mejor que Cypres (opens new window) y/o Jest usando Vue Test Utils (opens new window). En esta entrada te explico cómo testar componentes y aplicaciones Vue.js.

Aprende Vue.js

Te recomiendo algunos de mis recursos favoritos para aprender Vue.js

Recursos y grupos de trabajo

Documentación (opens new window).

Escuela Vue (opens new window). Sin duda mi lugar favorito. Aprenderás rápido y con calidad.

30 days of Vue.js (opens new window).

Comunidad Vue.js Madrid (opens new window). Grandes personas y profesionales donde intercambiar y aprender sobre Vue.js, ¿dónde mejor?.

¿Alguno más? Compartelo en comentarios en las redes sociales.

Conclusión

Vue.js es un gran framework para crear aplicaciones web. Pero no es todo. Hay mucho más que puedes hacer con Vue.js como has visto. Su curva de aprendizaje es sencilla y se adapta a tu forma de desarrollar ofreciéndote toda la libertad para hacer las cosas. El límite esta en tu mente y Vue.js te ayudará a alcanzarlo.

En mi repositorio (opens new window) tienes ya algunos proyectos tipo. Si necesitas algo más no dudes en contactar conmigo.