Soy un Vue Lover
Confieso, soy un Vue Lover y estoy orgulloso de serlo. Hace poco os hablé de cómo Kotlin siempre estaba en mi equipo. Hoy me toca una de las entradas que más deseaba escribir. Vue.js es imprescindible para mí. Aunque lo he ido adelantando a lo largo de esta web y distintas entradas y proyectos. Creo que no quedan dudas de que me encanta Vue.js y poco a poco te voy a mostrar a qué se debe que sea parte fundamental de mi stack como desarrollador y profesor.
¿Qué es Vue.js?
Vue.js es un framework progresivo de JavaScript de código abierto para la construcción de aplicaciones web. Fue creado por Evan You, y es mantenido por él y por el resto del equipo de Vue Core. Vue.js te permite trabajar con plantillas, usar reactividad en tus aplicaciones web, enrutamiento y hasta stores de datos. No voy a explicarte todo lo que se puede hacer de Vue.js, sino por qué 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 cómo hacer aplicaciones grandes donde se procesan 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 e investigación.
Angular lo rechacé no por otra cosa, sino por los "bailes" que hace Google. Lo he sufrido en móvil. React no me gusta cómo 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 mí, 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 deseo 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 mí. No solo se trata de hacer componentes que se comunican con eventos y propiedades, sino 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 te ofrece todas las opciones para hacer tu proyecto una realidad a nivel de configuración. Vite 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 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, 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 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.
Mis 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 es un framework que se utiliza para el desarrollo de aplicaciones web. Podemos utilizar Nuxt.js para crear aplicaciones estáticas (static pages), de una sola página (SPA) o de servidor (SSR). Nuxt.js es un framework que trabaja sobre Vue.js; esto quiere decir que tenemos todo lo bueno de Vue.js, pero contando ya con una organización y configuración establecidas desde el principio, que ayudan al desarrollador a enfocarse al 100% en el desarrollo.
VuePress
Es uno de mis proyectos preferidos. Esta web está desarrollada con VuePress. 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 escribir documentación con Markdown. 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 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 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. Me encanta Bulma y me encanta Buefy. Muchos de mis proyectos parten 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, sino de usar lo que consideres más oportuno en tu proyecto. Walter ha hecho un trabajo fantástico con sus colaboradores. En su página web tienes un ejemplo de cómo usar distintos estilos para los mismos componentes.
Quasar
Uso Quasar cuando quiero una aplicación para todo. Es verdad que puedo usar Electron para Vue para mis aplicaciones de escritorio, o tecnologías como NativeScript o Ionic 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, …) with Cordova or Capacitor
- Multi-platform Desktop Apps (usando Electron)
Otros
Seguro que me dejo muchos de los increíbles proyectos como VeeValidate, VueUse o Slidev, pero te invito a que mires VueAwesome y conozcas los proyectos alrededor de Vue.js.
Testing
Para testear nada mejor que Cypress y/o Jest usando Vue Test Utils. 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
Escuela Vue. Sin duda mi lugar favorito. Aprenderás rápido y con calidad.
Comunidad Vue.js Madrid. Grandes personas y profesionales donde intercambiar y aprender sobre Vue.js, ¿dónde mejor?
¿Alguno más? Compártelo 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 está en tu mente y Vue.js te ayudará a alcanzarlo.
En mi repositorio tienes ya algunos proyectos tipo. Si necesitas algo más no dudes en contactar conmigo.
