Vea JS de una manera diferente: conozca a Vue

Hace un par de años, era bastante estándar actualizar la página cada vez que nuestros usuarios realizaban una acción: guardar un formulario, aplicar un filtro a una búsqueda, etc. Hacer que el sitio sea reactivo y permitir a nuestros usuarios realizar estas acciones sin actualizar la página usando JS puro, o incluso Jquery, era (y sigue siendo) difícil, desorganizado y poco escalable.

Sin embargo, nuevas perspectivas de diseño, aplicaciones móviles y la creciente preocupación por mejorar la experiencia de usuario (UX) dejó atrás el estándar de actualización de la página para apostar por un enfoque reactivo e interactivo. Por esta razón, varios frameworks JS parecen ofrecer una solución adecuada para la implementación de estas aplicaciones web. Uno de ellos, el que discutiremos en esta publicación, es Vue.js.

¿Por qué Vue?

Desde mi perspectiva, Vue.js, o simplemente Vue, es uno de los mejores frameworks JS para crear aplicaciones web reactivas. Es lo suficientemente simple como para ser entendido fácilmente y rápido, pero lo suficientemente potente como para ser casi ilimitado gracias a su enfoque de crear componentes reutilizables que se pueden personalizar fácilmente.

Una de las cosas que más me gusta de Vue es que se puede conectar fácilmente a una plantilla HTML existente sin necesidad de usar Node.js o compilar el código JS. Simplemente necesita cargar el vue CDN y adjuntar una instancia de Vue a una etiqueta div. Por ejemplo:

<div id="app">
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

Esto producirá una cadena de «Hello Vue!» dentro de la etiqueta div. Puede que no parezca muy poderoso, pero como veremos a continuación, lo es.

Pero esta no es la única forma de usar Vue, también puede crear una aplicación Vue que use archivos .vue y mantener toda su lógica allí. Esto es especialmente poderoso cuando toda su aplicación va a ser reactiva. Veamos cómo hacerlo.

Creando su aplicación Vue.

Nota: Antes de comenzar a usar Vue, debe tener instalado Node.js. Recomiendo usar NVM cuando se utilizan dependencias de Node.

Para crear el proyecto vue, ejecute los siguientes pasos:

1. Instale vue-cli usando npm install -g @vue/cli
2. Cree el proyecto ejecutando vue create my-project

El paso 2 iniciará un asistente. Si no está familiarizado con Vue, lo mejor que puede hacer es usar las opciones predeterminadas. Una vez que el asistente finalice, creará un proyecto con la siguiente estructura:

Como puede ver, todo nuestro código estará ubicado en la carpeta src.

Si verifica el archivo main.js, verá:

new Vue({
  render: h => h(App),
}).$mount('#app')

Eso es muy similar a lo que hicimos en el ejemplo anterior. Básicamente, el proyecto vue configura un archivo index.html (ubicado en la carpeta pública) con una <div id=»app»></div> y el main.js adjunta nuestra aplicación vue.

Además, observe la carpeta de componentes. Se denomina componentes porque los elementos centrales de Vue son componentes. Casi todo lo que cree en Vue será un componente o vivirá dentro de uno. También, note que HelloWord.vue es un archivo .vue, por lo que debe compilarse primero para ejecutarse.

Vue-cli proporciona servicios para iniciar un servidor web y compilar nuestro proyecto. Simplemente ejecute yarn run serve o npm run serve dependiendo del administrador de paquetes que haya seleccionado. Luego, vaya a http: // localhost: 8080 / y verá la página de bienvenida vue. Si desea verificar su código, se encuentra en components/HelloWorld.vue.

Configurando un ejemplo básico: un contador

Para ejemplificar las capacidades de Vue, vamos a crear una aplicación simple: un contador. Primero, cree un archivo components / Counter.vue y agregue este código:

<template>
  <div class="container">
    <span class="count">{{ text }}  {{ count }}</span>
    <div class="buttons">
      <button @click="add">Add</button>
      <button :disabled="count == 0" @click="subtract">Subtract</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Counter',
  props:{
    text:{
      type: String,
      required: true,
    }
  },
  data: function() {
    return {
      count: 1,
    }
  },
  methods: {
    add: function(){
      this.count = this.count + 1
    },
    subtract: function(){
      this.count = this.count - 1
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.count{
  color: green;
}
</style>

Como puede ver, un archivo vue está compuesto por tres elementos:

• Template: aquí es donde agrega todo su código HTML. Las variables componentes deben representarse utilizando {{}}
• Script: aquí es donde define su componente vue y su funcionalidad.
• Style: Aquí es donde define el estilo específico de su componente, utilizando CSS o SCSS. Gracias a la palabra clave de ámbito, puede aislar los estilos que defina para que no tengan conflictos con el estilo de otros componentes.

Además, su componente vue tiene varias palabras clave que definen su comportamiento. Algunos de los más comunes, los que estamos usando en el ejemplo, son:

• Props: Estos son similares a los atributos HTML como href o src. Es la forma de pasar datos externos a nuestro componente. Vue le da mucho control al permitirle establecer el tipo de variable que su componente espera, si es necesario o no y si puede usar un valor predeterminado; entre otras configuraciones.
• Data: Aquí define las variables internas de su componente. Estos tienen un alcance de componente, por lo que si se usan varios componentes en una página, cada uno de ellos puede tener valores de datos diferentes.
• Methods: Aquí puede definir las funciones que puede utilizar su componente. Estos también tienen un alcance de componente, por lo que no puede usarlos en otro componente a menos que los pase a través de props (aunque requiere precaución para evitar comportamientos inesperados).

Si ejecuta su aplicación en este momento, no verá cambios. Esto se debe a que aún no hemos utilizado nuestro nuevo componente. ¡Hagámoslo! Vaya al archivo App.vue y reemplace la plantilla y las etiquetas de script, para esto

<template>
  <div id="app">
    <Counter text="apples:" />
    <Counter text="carrots:" />
  </div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
  name: 'App',
  components: {
    Counter
  }
}
</script>

Como puede ver, primero importamos nuestro componente Counter desde su archivo. Luego, en el componente App, usamos la palabra clave components para decirle a Vue que nuestro componente usará componentes externos; en este caso, Counter.

Luego, en la sección de templates, usamos nuestro componente Counter como una etiqueta HTML normal. Tenga en cuenta que utilizamos el prop text como una propiedad HTML normal. Ejecute su aplicación y verá lo siguiente:

Intente jugar con los botones Add y Subtract. ¿Se da cuenta de cómo cada contador es independiente, incluso si ambos son el mismo componente? Además, intente usar el botón Subtract hasta que el contador llegue a cero. ¿Sabe por qué el botón se desactiva? Verifique el código del componente Counter e intente responder esa pregunta (pista: verifique qué es diferente entre los botones de add y subtract)

Juegue un poco con el código del componente counter, modifique los métodos, agregue más botones, modifique la plantilla y sus estilos. Verá lo fácil y versátil que es actualizar un componente en vue.

Esto fue solo un vistazo rápido de todo lo que Vue tiene para ofrecer. Le recomiendo consultar su documentación oficial, codifique los ejemplos y juegue con el framework; le sorprenderá su poder.

Aquí en Swapps hemos desarrollado varios proyectos usando Vue. Gracias a su versatilidad y su enfoque de componentes, hemos podido implementar aplicaciones web con menos esfuerzo que cuando usamos diferentes frameworks. Además, ha sido una gran herramienta para crear prototipos rápidos y mejorar la experiencia de usuario en páginas específicas de algunos de nuestros sitios. El enfoque de componentes permite a los grandes equipos trabajar juntos en el mismo proyecto casi sin conflictos y con una buena integración.

Espero que este tutorial rápido lo haya dejado ansioso por saber más sobre vue y comenzar a usarlo en sus proyectos. No se arrepentirá. ¡Feliz codificación!