¿Por qué usamos Vuejs?
Primero que nada podemos empezar por decir que VUE es un framework progresivo de Javascript de código abierto, esto quiere decir, que trabaja según la necesidad que tengas para hacer un proyecto en web, desde un pequeño componente, una página sencilla, hasta complejas aplicaciones web e incluso aplicaciones universales con Server-rendering.
Vue posee muchas características que aportan muchos beneficios al momento de desarrollar una aplicación y es lo que nos ha hecho darle una oportunidad para nuestros proyectos. Entre sus características más relevantes podemos decir que, la curva de aprendizaje es muy rápida, ya que Vue combina muchas cosas positivas de otros frameworks de javascript y otras características mejoradas que lo hacen especial.
La principal es la velocidad con la que funciona del lado del cliente, lo hace bastante eficaz y de suma importancia al momento de hacer desarrollo web, su sintaxis y directivas son bastante sencillas de entender, por ejemplo, si tenemos un elemento “button” y queremos que responda a un evento “click”, entonces tenemos que utilizar la directiva v-on:click o de forma abreviada también @click, dentro del elemento asociado, de la siguiente manera:
<button @click="helloVue()">Haz Click</button>Una vez que las observas y sabes para qué sirven cada una, comprenderás al instante cómo usarlas. Si quieres ver mas ejemplo haz click Aquí.
No es necesario usar Webpack para hacer uso básico de vue y crear una aplicación sencilla, solo con importar la librería en el HTML, desde un CDN es suficiente. A continuación te mostramos cómo agregar vue dentro de una página web, así podrás usar otras tecnologías y colocar pequeños pedazos de vue.
Dirígete a este link y copia el CDN actual para empezar a utilizar vue.
Ciclo de Vida
Vue posee un ciclo de vida, el cual nos permite saber en qué momento estamos del ciclo de vida del componente para poder acceder a él y sus llamadas de forma correcta.
Methods y Data
Otro punto a favor de vue es la forma en la que maneja y organiza los métodos y datos dentro de cada instancia de vue, tiene un objeto llamado data donde se coloca todo el modelo de datos y otro llamado methods donde van incluidos los métodos, eventos, etc.
Vue.component('mi-cmpt', {
data: {},
methods: {}
})Components
En la actualidad existen otros frameworks como React, Angular y Polymer que utilizan la última tendencia actual, que consiste en desarrollar arquitecturas basadas en componentes web, vue no se quedó atrás, ya que su principal funcionalidad es crear componentes web, a pesar de que puede utilizarse como una librería muy simple.
Esto nos permitirá fragmentar nuestra aplicación en “partes” funcionales que nos ayudarán a enfocarnos en lo que necesitamos para nuestra aplicación web.
Vue templates
Esta estructura es muy organizada ya que se trabaja mediante componentes que pueden ser reutilizables cada uno con su propio HTML, CSS y Javascript, estáticos o dinámicos, esto te ahorrará mucho al momento de escribir y sabemos que en el mundo de la programación el ahorrar tiempo y espacio de memoria en reescribir código es bastante importante.
La manera de trabajar los componentes modulares en vue lo hace resaltar bastante, pues tiene muy claro la separación de Estilos (css, scss, less), HTML y Javascript, a través de un archivo con extensión .vue donde se escriben por separados por medio de etiquetas, además, gracias a un loader de Webpack, el cual se encarga de extraer y separar cada una de las etiquetas por su lado, esto hace el trabajo mucho más fácil y entendible. Así que si tenemos un equipo el cual trabaja por separado cada parte modular del componente será pan comido acceder y comprender esta estructura que propone vue.
App.vue
<template>
<!--- Aqui va el HTML, puedes utilizar sintaxis Pug/Jade -->
</template>
<script>
// Aqui el código JavaScript, (puedes usar Babel, TypeScript,...)
</script>
<style>
/* Aqui el CSS, puedes usar stylus, Sass, Less, etc... */
</style>Otro ejemplo de usar vue template para separar por etiquetas es:
Plugins
Podemos decir que el sistema de plugins para agregar más funcionalidades es bastante interesante, ya que a medida que nuestra aplicación vaya creciendo podemos ir incorporando más ficheros con archivos .vue e instalar los plugins a medida que dicha aplicación nos vaya exigiendo, por ejemplo, si nuestra aplicación consiste en varias páginas podemos utilizar vue-router y hacer más fácil el enrutamiento para el usuario.
Vue-CLI
Si lo que necesitas es empezar un proyecto donde puedas ahorrarte el crear la estructura de carpetas, ficheros y configuraciones de webpack, vue también trae su “herramienta de línea de comandos” CLI, una vez que esté instalado, tendrás una especie de proyecto base con las configuraciones necesarias. Podrás editarlo sin problemas y darle el toque que quieras.
# Instala de forma global VUE-CLI para poder llamarlo desde cualquier path
$ npm install --global vue-cli
# Genera un proyecto con Webpack configurado y listo para correr
$ vue init webpack
Migración
Vue también puede hacer migración progresiva, es decir puedes hacer el código nuevo de tu aplicación con vue y poco a poco se va reemplazando el código viejo, esta decisión te va a facilitar las cosas y te ahorrará dolores de cabeza en el futuro, ya que vue es bastante bueno conviviendo con otras tecnologías.
Conclusión
En resumen, si necesitas desarrollar algo muy básico, medianamente complejo o muy complejo, Vue es perfecto, nos quedamos cortos con todos los beneficios que posee Vuejs, y estas son algunas de las tantas características por las cuales es uno de nuestros frameworks de Javascript favoritos y al cual le apostamos bastante, estamos seguros que con el tiempo cada vez más personas se uniran a esta comunidad, así que te invitamos a probarlo y empezar a usar Vuejs para tus proyectos web.
