Ejemplos del código limpio de Vue

Spanish (Español) translation by Carlos (you can also view the original English article)

En la parte previa de esta serie, empezamos a trabajar con Vue y resolvimos algunas de las dudas que los principiantes podrían tener.

En este tutorial, veremos un poco más las distintas cosas que Vue puede hacer. Pero antes, hablemos de la naturaleza centrada en «views» (vistas) de Vue.js.

Views, modelos y binding

Vue (y la mayoría de los otros frameworks de JavaScript orientados a views) están creados con un enfoque casi singular en las views. Veamos lo que eso significa.

1. En última instancia, todas las views se renderizan en algún lugar. Para los desarrolladores web, ese punto es el DOM.

2. Todas las views se pueden expresar como una serie de nodos en una estructura en forma de árbol.

¿Que significa eso exactamente?

Si alguna vez has usado HTML, entonces ya conoces cómo se ve una estructura de árbol. Y resulta que la estructura de árbol funciona muy bien para representar componentes de view, que es también uno de los motivos por los que HTML es tan ampliamente aplicable a tantas posibilidades de view.

3. Hay una relación simbiótica constantemente conectada entre lo que ocurre en el código de la plantilla de view y lo que sucede en el código de la instancia de JavaScript de Vue.

Eventos, datos, propiedades computadas; todas estas cosas comparten un contexto importante en una instancia de Vue.

Ejemplos comunes donde Vue gana

Veamos dos ejemplos sencillos en los que Vue puede ayudarte a escribir un código más limpio, ¡y mejor!

1. Clasificación de listas en vivo

Ordenar una lista puede ser un proceso tedioso si no utilizas algo como Vue. Naturalmente, podrías lograr cosas similares con plugins de jQuery, pero echemos un vistazo a una lista clasificable simple.

El HTML:

<div id="app">
    <div class="sort-orders">
        <a v-for="sortkey in Object.keys(orderedListOptions)" v-on:click="sortOrder = sortkey" v-bind:class="{active: sortOrder == sortkey}">{{sortkey}}</a>
    </div>
    <ul>
        <li v-for="(item, index) in sort(sortOrder)" v-html="item" v-id="index">
    </ul>
</div>

El código JavaScript:

let list = [
    "Michael Gary Scott",
	"Dwight Schrute",
	"Jim Halpert",
	"Pam Beesly-Halpert",
	"Darryl Philbin",
	"Erin Hannon",
	"Andy Bernard",
	"Phyllis Lapin-Vance",
	"Stanley Hudson",
  // ...
]

let vm = new Vue({
	data: {
		list: [],
		sortOrder: "Popularity",
	},
	created: function(){
		// simulating asynchronous loading of data
		setTimeout(() => {
			this.list = list;
		}, 1000)
	},
	computed: {
		orderedListOptions: function(){
			return {
				"Popularity": () => { return this.list },
				"A-Z": () => { return this.list.slice().sort() },
				"Z-A": () => { return this.list.slice().sort().reverse()},
			}
		},
	},
	methods: {
		sort: function(sortOrder){
			return this.orderedListOptions[sortOrder]()
		}
	},
	el: "#app"
})

Con algunos estilos básicos para clarificar las cosas, esto es lo que obtenemos:

Please accept marketing cookies to load this content.

Te darás cuenta rápidamente de lo fácil que es el proceso de clasificación. Por supuesto, también podrás notar que hay algún código duplicado en la view, pero eso lo veremos un poco más adelante.

La mayor parte del código de la plantilla es el bucle sobre los elementos en sí. La mayor parte del código JavaScript se dedica a la clasificación de los elementos de la lista. Si quisieras otro método de clasificación, puedes añadirlo fácilmente al objeto devuelto OrderListOptions.

Fíjate especialmente en la clave computed, así como en los datos que estamos registrando en el objeto data. Estamos simulando la idea de que la lista se carga desde otra fuente y que se trae de manera sincrónica, pero las fuentes de datos asíncronas también son perfectamente utilizables:

let vm = new Vue({
  data: {
    list: []
  },
  created: function(){
        // simulating asynchronous loading of data
        setTimeout(() => {
            this.list = list;
        }, 1000)
    }
  // etc
})

Con esta incorporación, tenemos algunas cosas más importantes que comprender. En primer lugar, la clave list en los datos sigue siendo importante a pesar de que es un array vacío. Esto le permite a Vue saber qué propiedades debe observar para los cambios. En segundo lugar, estamos utilizando una función de flecha para la simulación setTimeout de la carga de datos asincrónica. Esto nos permite usar this en el contexto principal. Probablemente utilizarás una función de flecha en el futuro para una función anónima anidada en tu código de Vue, y el acceso a this hace que tu código sea mucho más fácil de entender cuantos se actualicen los atributos de los datos.

2. Mostrar un elemento condicionalmente

Un uso común para este ejemplo es la presencia de un código de cupón o de un banner que quieres ocultar si alguien ya lo ha cerrado o lo ha utilizado con anterioridad. Una de las grandes cosas de Vue es que funciona muy bien con otras bibliotecas y herramientas. Si quieres usar cookies, almacenamiento local o cualquier otro mecanismo de persistencia a nivel de navegador, nada te impide hacerlo.

Veamos un ejemplo que utiliza localStorage para ocultar un banner una vez que ha sido descartado.

let vm = new Vue({
    data: {
        showBanner: !localStorage.getItem("hideBanner")
    },
    methods: {
        dismissBanner: function(){
            this.showBanner = false;
            localStorage.setItem("hideBanner", true);
        },
    },
    el: "#app"
})

<div id="app">
    <div class="banner" v-if="showBanner">
        <a class="remove" v-on:click="dismissBanner">&times;</a>
        <h4>Special Offer! 25% off.</h4>
    </div>
</div>

Aquí está el ejemplo en CodePen, nuevamente con algunos estilos básicos:

Please accept marketing cookies to load this content.

Nos enlazamos (binding) al evento click usando la directiva v-on de Vue. Esto nos permite escuchar el evento de clic y utilizar el objeto methods para responder a ese clic. Estamos utilizando localStorage para inicializar el atributo de datos showBanner.

Conclusión

Con estos ejemplos, puedes ver cómo Vue.js puede ayudarte a reemplazar parte de tu JavaScript, que de otra manera sería muy complejo, por un código más sostenible y separado; mucho más fácil de administrar y de entender.

En la siguiente parte de esta serie, trataremos cómo puedes crear tus propios componentes y también examinaremos algunas de las herramientas más populares para ampliar Vue y hacerlo aún más poderoso en tus aplicaciones.