¿Cómo usar Componentes Web en Front End?
Hace poco más de un año decidí empezar a profundizar en el desarollo de lado del cliente. Lo primero que hice fue investigar qué hace un desarrollador fr0nt-end y me topé con lo siguiente:
Un desarrollador front-end desarrolla, prepara y diseña sitios web y aplicaciones usando tecnologías web (HTML, CSS, DOM, y JavaScript) que se ejecutan en una plataforma web o que actúan como entrada de compilación para entornos de plataformas no-web (p.e. nativescript)
Esta definición me pareció muy abrumadora: ¿plataformas no-web? lo único que conocía relacionado era cordova; ¿preparar y diseñar software de lado del cliente? lo único que usaba era el module pattern. Había muchas cosas por aprender.
Así que decidí probar diferentes librerías hasta encontrar vue.js: una librería (ahora framework) para crear interfaces web interactivas que provee los beneficios de conceptos como reactive data binding y composable view components con un API que es de lo más sencilla. Esto fue en la versión 1.0 y desde entonces la he utilizado en todos mis desarrollos web. Además de mi, otros devs como Fer Flores la han adoptado a pesar de utilizar otras librerías/frameworks como Angular y ReactJs.
La versión que más he utilizado es la 2.0. A partir de esta versión vue.js se convirtió en un framework progresivo: aún es una librería enfocada al rendering declarativo y al sistema de componentes, pero tambien soporta oficialmente otras herramientas que te permiten hacer sistemas más complejos (como Single Page Apps, Native Applications y Server Side Rendering).
En la siguiente imagen se muestra en rojo las funcionalidades soportadas por la librería core; los otros colores son las funcionalidades que se soportan oficialmente pero con otras librerías como: vue-router, vuex, vue-cli, nuxt, weex & nativescript, entre otros.
Componentes Web
Una característica diferenciadora desde el inicio de la librería es cómo implementan los componentes. Ayudan a extender elementos HTML para encapsular código reutilizable, añadiendo comportamiento a lo que pareciera ser una simple etiqueta de HTML. Podrías utilizar un componente como este y pareciera una simple etiqueta html:
<product-list v-bind:products='productList'>
</product-list>Tras bambalinas, vue.js se encarga de pintar en HTML algo como esto:
<ul>
<li> Playera Azul $150 pesos </li>
<li> Playera Verde $200 pesos </li>
<li> Playera Morada $300 pesos </li>
</ul>Debo hacer enfásis en la importancia de no conocer la implementación de la etiqueta <product-list> para poder utilizarla. Este es el poder de los componentes.
Un componente se divide en dos partes: la parte visual y la parte de comportamiento, HTML y Javascript respectivamente. Los elementos que componen este componente son:
El HTML
<template id='productsTemplate'>
<ul>
<li v-for="product in products">
{{product.name}} {{product.color}} cuesta ${{product.price}}
</li>
</ul>
</template>El código JavaScript
Vue.component('productList', {
template:'#productsTemplate',
props: ['products']
})El app que usa el componente:
<script src="https://unpkg.com/vue"></script>
<div id='app'>
<product-list v-bind:products='products'>
</product-list>
</div>
<script>
new Vue({
el: '#app',
data: {
products: [
{name:'Playera', color: 'Azul', price: 150},
{name:'Playera', color: 'Verde', price: 200},
{name:'Playera', color: 'Morada', price: 300}
]
}
})
</script>Además de proponer inicialmente un mecanismo de comunicación padre-hijo entre componentes mediante propiedades y eventos. Hasta ahorita hemos visto como el padre se comunica con el hijo: v-bind:products='productList’ . En este caso el padre le está mandando su lista de productos para que el hijo (el componente <product-list>) pueda usarlos.
Si queremos comunicar al hijo con el padre debemos emitir ($emit) eventos:
Vue.component('productList', {
template:'#productsTemplate',
props: ['products'],
methods: {
onClick: function(product) {
this.$emit('clickproduct', product)
}
}
})En el template del componente agregamos la llamada al método onClick :
<template id='productsTemplate'>
<ul>
<li v-for="product in products"
v-on:click='onClick(product)'>
{{product.name}} {{product.color}} cuesta ${{product.price}}
</li>
</ul>
</template>Cuando el usuario de clic al elemento <li> se emitirá el evento clickproduct
Para que el padre escuche este evento debemos de indicarle al componente cuál método del padre responderá a este evento. En este caso el método será onClickProduct:
<script src="https://unpkg.com/vue"></script>
<div id='app'>
<product-list v-bind:products='products'
v-on:clickproduct='onClickProduct'>
</product-list>
</div>Ahora debemos agregar el método onClickProduct al padre:
new Vue({
el: '#app',
data: {
products: [
{name:'Playera', color: 'Azul', price: 150},
{name:'Playera', color: 'Verde', price: 200},
{name:'Playera', color: 'Morada', price: 300}
]
},
methods: {
onClickProduct: function(product) {
alert('has seleccionado el producto '+product.name)
}
}
})Esta es la forma por defecto en la que se comunican los componentes. Es muy sencilla de entender. Sin embargo si en nuestro sistema existen muchos componentes que se comunican entre sí, esta forma resultará muy díficil de mantener. Para dar solución a esta problemática existe vuex. Sin embargo su explicación sale del alcance de esta entrada.
El ejemplo completo:
Acabamos de ver directivas (v-for, v-on, v-bind), componentes y comunicación de componentes en menos de 5 minutos.
Esta es la sensación de usar vue.js en tu día a día desarrollando la parte del cliente: desarrollar conceptos complejos de forma sencilla.
El futuro de Vue.js
Desde que empecé a usar Vue.js (justamente un año atrás) muchos devs me han preguntado por la empresa detrás de este proyecto y cuando les contesto que es Evan You (un desarrollador) muchos temen por el futuro de la librería y por eso no la usan. Bueno esta ha sido una de las librerías con mayor crecimiento en este año y el hecho de haber una sola persona al frente del mantenimiento no implica que no tenga más contribuidores, sí los hay y son muchos (puedes conocerlos aquí). No es el primer proyecto que empieza así. Recuerden que Node.js empezó como un proyecto personal iniciado por Ryan Dahl. Ahora Node.js tiene millones de usuarios.
Entiendo que el ecosistema de Javascript nos tiene acostumbrados a librerías con poco tiempo de vida. Pero les aseguro que no es el caso de Vue.js. Además, a mi me gusta ver esta librería como una ayuda para entender el desarrollo front-end actual.
Hace unas cuantas semanas impartimos un taller gratuito de Vue.js. Los ejercicios podrás encontrarlos aquí.
Si quieres entender conceptos como: data-binding, server-side rendering, build systems, etc, el Taller Avanzado de Vue.js es para ti. Con duración de 15 horas entre sábado (05 de Agosto) y domingo (06 de Agosto) abarcaremos estos temas para que adquieras el conocimiento suficiente para usarlos en cualquier sistema web. Puedes registrarte desde aquí
