Introducción a los web components con vuejs
Web components
Imagina si tus proyectos crecen mucho, tus templates o vistas van a tener mucho código, tanto que podrías llegar a perderte.
Los Web components son el nuevo y revolucionario HTML que te permitirán crear tus propios elementos, darles el nombre y propiedades que tu quieras, y lo más importante: tener tus vistas y templates mucho más concretos y organizados.
Los web components, son etiquetas HTML personalizadas, que guardaran lo que nosotros queramos.
Los web components son EL FUTURO DE LA WEB! Ya no tendremos que limitarnos a las etiquetas que otra gente decida, ahora podemos escribir los elementos que nosotros queramos, como nosotros queramos!
¿Sorprendente no?
Si quieres ver algunos demos de las infinitas posibilidades que ofrecen los web components, puedes echarle un vistazo a https://customelements.io y verás que ahora tu único limite sera tu creatividad y capacidad para programar!
En un principio, los web components solo sirven para ahorrar líneas, describes el código HTML que vas a usar en un template, y luego lo compilas solo escribiendo el nombre de la etiqueta, y listo! Ya tienes todo ese código que guardaste tantas veces quieras, pero te costó solo una etiqueta HTML.
Ahora, si los web components solo sirvieran para eso no serían tan útiles que digamos, cierto?
¿Que pasaria si desde esa etiqueta pudieras cambiar el resultado de lo que renderiza la etiqueta?
Algo así como esto:
<mi-etiqueta nombre=”Juan David” apellido=”Castro”></mi-etiqueta>
O un ejemplo un poco más práctico:
<google-maps latitude="37.77493" longitude="-122.41942"></google-maps>
¿Genial no?
Los web components se pueden usar en polymer, react.js, o JavaScript sin frameworks ni librerías!
En este tutorial veremos cómo usarlos con una librería de JavaScript llamada Vuejs.
Vuejs
Vue.js (pronounced /vjuː/, like view) is a library for building interactive web interfaces. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.
Vuejs es una librería de JavaScript cuyo objetivo es construir interfaces web interactivas de manera fácil, rápida y efectiva.
Vuejs no es como otras librerías o frameworks “normales”, como Angular, Polymer. Vuejs se enfoca solo en la capa de vista, solo le interesa interactuar con el usuario, no de guardar los datos en cookies o bases de datos ni nada de eso (MV).
Por esa razón vuejs es tal vez la librería de JavaScript más fácil de aprender! Solo necesitas importar el script (puedes descargarlo desde su página principal o desde cdnjs)!
Vuejs es tan fácil que con solo las siguientes líneas de código:
new Vue({ el: '#demo', data: { message: 'Hello Vue! } })
Y el html:
<div id="demo"> <input v-model="message"> </div>
Importante! Recuerda que vuejs solo se encarga de la interacción con el usuario, si recargas la página el mensaje quedara tal cual estaba antes de modificarlo (en el ejemplo Hello Vue.js!).
Ya vimos cómo funcionan los web components, y un poco de la sintaxis de vue.js, ahora, ¿Que tal si los combinamos? ¡Web components con vue.js!
Importante: Si quieres saber más de vue.js pero un poco más básico, puedes ver el video en Comunidad Platzi que daré sobre vue.js desde 0.
Web components con vue.js
Para crear un web component en vue.js necesitamos primero que todo crear el “data binding”, que es donde definiremos toda la base del código que necesitaremos en vuejs.
Quedaría algo así:
new Vue({ el: ‘body’, // Aca definiremos el elemento donde usaremos variables y métodos de vue data: { // Aquí definiremos las variables } })
En este artículo no me detendré a explicar cada detalle, solo lo más importante, te repito que si quieres aprender vuejs desde 0 puedes ver el video que daré en Comunidad Platzi.
Ahora dentro de data definiremos las variables que queramos, ‘name’, ‘nick’, ‘friends’, ‘cats’ etc…
Para tener un poco más de orden en el código guardare las variables en algún otro lugar, y le diré a ‘data’ donde busque las variables.
Quedaría algo así:
`data: data_vars,
// Y en algún otro lugar
data_vars = {
// vars
}`
Ahora con el código un poco más ordenado vamos a empezar con los vue-components.
Para crear con Web component solo necesitamos crear una instancia llamada “Vue.component”, seguida del nombre de la etiqueta, y los parámetros, que ya explicaré más a fondo.
Quedaría algo así:
Vue.component(‘gatos-cool’, { // parámetros });
El primer parámetro que necesitamos se llama “template”, esté se encarga de definir el HTML (lo tendríamos que escribir allí mismo) o también de buscar en donde está definido el código html que compilara nuestro web component.
Se usaría así:
Vue.component(‘gatos-cool’, { template: ‘#template-gatos' })
Y después de eso solo tendríamos que definir el código HTML que se compilara…
Podemos hacerlo de dos maneras:
La primera sería crear una etiqueta “template” dentro de nuestro HTML, que quedaría así:
<template id=“template-gatos-cool”> // Aquí nuestro código HTML <template>
O la segunda forma sería usar un script tipo template:
<script id=“template-gatos-cool” type=”template”> // Aquí nuestro código HTML <script>
No importa cual elijas, o si lo logras hacer de alguna otra forma, lo importante es que el HTML que vas a guardar tenga el “id” que le pides en el parámetro “template” que defines en el Vue.component.
Ahora si, empezemos!
En este tutorial vamos a crear una página llamada compracat que sencillamente mostrará los gatos de nuestra tienda, con su descripción y todo eso.
Lo primero que haremos será crear el componente de vue, que llamaremos ‘cat-component’, le diremos que el template tendrá el id ‘cat-component-template’, y le diremos que habrá que definir el nombre del gato, su imagen, y una descripción.
Vue.component('cat-component', { template: '#cat-component-temp props: ['name', 'img', 'description'] });
Ahora le diremos a vue que el data de Vue estara definido en una variable que llamaremos mydata:new Vue({ el: 'body' data: mydata });
Lo único que faltara en el código de vuejs será agregar el data.
En este caso lo que haremos será crear un json, en que cada lista será un gato, y allí definiremos sus propiedades.cats: [ { name: 'Mimi', img:'link-de-la-imagen.jpg', des: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, porro veniet et cupiditate asperiores!' }, { name: 'Pinky y Cerebro', img:'link-de-la-imagen.png', des: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, expedita, ad maiores ipsum repellendus praesentium.' } ]
Ahora que ya tenemos listo el código solo nos falta definir el template (#cat-component-template) y el HTML donde llamaremos al componente.
Primero, el template.
En este caso yo usare una etiqueta template pero recuerda que puedes usar un script, o un link, o lo que quieras)
Recuerda que en vuejs podemos llamar a nuestras variables con los dos corchetes ({{ variable }}), o para pasarla como parámetro utilizamos la ‘Computed property’ llamada v-bind, o su shortcut que son los dos puntos:
`
<template id=“cat-component-template”>
<div class="col-sm-6 col-md-4&q
<div class=“thumbnail”><img :src=“img” :title="name&
<div class=“caption”>
<h3>{{ name }}</h3>
<p>{{ des }}</p>
<p>
<a class="btn btn-info&q
<i class=“fa fa-info-circle”></i>
Cat Info
<a class="btn btn-success&qu
Buy cat
<i class=“fa fa-shopping-cart”></i>
</p>
</div>
</template>`
Ten en cuenta que para no gastar tiempo escribiendo los estilos, utilice Bootstrap, especificamente un componente que se llama ‘thumnail’ (http://getbootstrap.com/components/#thumbnails-custom-content), todas esas clases son completamente innecesarias para utilizar los web components o los vue-components.
Ahora solo tendremos que llamar a nuestro componente, y decirle las variables en los parámetros de la etiqueta.
En este caso nos ayudaremos de otra Computed property llamada ‘v-for’, que lo que hará será que por cada elemento del json, renderizara una vez los elementos que definimos en el template.
<div class="row"> <cat-component v-for="cat in cats" :name="cat.name" :img="cat.img" :des="cat.des"> </cat-component> </div>
Y listo! Ahora puedes abrir y ver tu nuevo archivo HTML y encontrarás la cantidad de gatos que hayas definido en la variable mydata!
Si quieres ver un demo de los gatos puedes ir al siguiente link: https://codepen.io/juandc/pen/dXOxom
Si quieres aprender más sobre los web components, puedes ir al curso Definitivo de JavaScript, o al curso de Polymer en platzi.com.
