Rubén Valseca: ¡Vale!, pues, antes de empezar
y de que se me olvide quería dar las gracias
a Paradigma por patrocinar este tipo de eventos,
que creo que es una gran iniciativa; a KSchool
por ceder el espacio; y bueno, también a
mi empresa – creo que está por aquí –; Style
Sage, por todo el apoyo para dar la charla
y que nos anima a dar otras distintas charlas.
Bueno, pues, sin más, comienzo.
Quería hablar de Minimal Vue, y como esto
parece un nombre así un poco hipster, lo
he puesto claro allá abajo, ¡vale! Básicamente,
lo que quería hablar era de Vue sin muchas
movidas.
Y ¿por qué?, porque normalmente ahora todos
los frameworks de desarrollo frontend, como
que traen mucho tooling, ¿no?, antes tenía
un Grunt, un Spot Bull, ahora Webpack y además
tiene las DeskTools, hay como mucho ecosistema
alrededor del desarrollo.
Y parece que se ha perdido un poco la esencia
de volver a tocar algo abajo, de que si quieres
tirar JavaScript, simplemente JavaScript;
si quieres hacer HTML, HTML; CSS, CSS, ni
SASS, ni LESS ni nada, por encima.
Entonces, antes de comenzar para orientar
un poco la charla quería preguntar aquí,
que levantéis la mano ¿quién de aquí es
una persona humana?, ¿hay alguien que no
sea una persona humana?
¿Quién de aquí tiene experiencia con desarrollar
HTML y CSS? ¡Vale!
Y cosas con jQuery. Genial, ¡vale! Esto me
va a hacer de mucha ayuda.
¿Quién de aquí ha tocado un framework como
Angular JS, la versión uno? ¡Vale!
¿Y un framework más moderno como Angular
2 o React? ¡Vale!
La pregunta del millón, ¿quién ha tocado
Vue aquí? ¡Ah!, o sea, también hay gente
de Vue, ¡vale!
¿Y de S-6?, que es la siguiente versión
de JavaScript. ¡Vale!
Perfecto, veo que no hay mucha gente tampoco,
o sea, no ha levantado la mano con S-6 así
que me viene genial.
Bueno, valió que es muy largo.
¿Quién soy yo?
Buenas tardes, soy Rubén Valseca, trabajo
como frontend developer en Style Sage, llevamos
ya un tiempo usando Vue en producción y estamos
la mar de contentos, por eso estoy aquí haciendo
esta charla.
Si queréis seguirme, suelo tuitear cosas
técnicas, ahí en el @rubnvp.
¿Por qué digo que soy de Style Sage? En
Style Sage teníamos un problema, y era que
la aplicación se nos estaba quedando un poco
corta, la tecnología con la que desarrollábamos
la aplicación se nos quedaba un poco corta.
Es una aplicación que empezó en jQuery,
con un backend en Django detrás, la tuvimos
que evolucionar a Angular versión uno, y
llegó un momento que incluso Angular versión
uno también se nos quedaba cortos; y decidimos
pasar a Vue.
Con esto no quiero decir que jQuery y Angular
uno ya no sirvan para nada, al revés, sirven,
tienen su contexto, pero a nosotros se nos
ha empezado a quedar cortos.
Y con esto tampoco quiero decir, que esto
lo que quiero quedar claro en la charla, que
sólo Vue sólo sirve para hacer cosas muy
grandes, al revés, Vue también puede servir
para hacer muy pequeñas.
Pues, cuando… este es el típico meme, ¿no?,
yo supongo que la habéis visto, cuando empezamos
encontramos este percal [fonético], de a
dónde emigrar, estaba React en una lucha
muy intensa con Angular 2 y la bajamos esas
opciones, o sea, no voy hablar una palabra
mal ni de React ni de Angular 2, no me vais
a escuchar decir nada malo de ellos, porque
creo que son muy buenas herramientas, y si
las estáis usando ¡enhorabuena!, porque
son buenas.
React con el JSX permite mucha flexibilidad
a la hora de pintar el Dom [fonético] o de
pintar ciertos elementos y Angular 2 con TypeScript
le da mucha potencia al lenguaje, como que
lo fortalece, lo tipa.
Pero a nosotros eran dos cosas que en principio
no nos llamaba la atención y no queríamos
meterlo en un principio. Así que estuvimos
viendo un poco de opciones y, bueno, como
supongo veréis esta charla al final acabamos
con Vue. No es por hacer spoiler de la película
pero no sé si sabéis que acaba un poco así.
Y es precisamente porque Vue nos daba la libertad
de decir, pues, bueno, si vais a querer usar
JSX que parece que no te gusta mucho en principio,
lo vas a poder usar. Si quieres TypeScript
también lo vas a poder utilizar, pero te
lo dejamos como opción.
Y todo esto vino un poco relacionado con la
fatiga frontend, también puede sonar a fatiga
que te hablen de la fatiga del front, pero
es cierto; y ¿por qué?, porque la web, bueno,
ha evolucionado que empezó HTML, CSS, luego
JavaScript y jQuery. Luego empezaron Angular,
luego otros frameworks, para que es un everend,
¿no?
Pero yo creo que más de esta fatiga, esto
se debía interpretar como algo positivo,
es algo bueno que esto esté sucediendo, ¿por
qué?, porque significa que la web está evolucionando
a pasos agigantados y de que vamos a poder
hacer muchas, más cosas, nuestro sector se
va a diversificar mucho más y podemos hacer,
yo que sé, lo que siempre nos ha gustado.
Y que evolucionar de esta forma no significa
que HTML y CSS no sirvan ya para nada, al
revés; yo sigo viendo un montón de valor
en HTML y en el CSS. Y también que jQuery
no sirva para nada, al revés, jQuery quizás
es la solución mejor para un problema que
tienes en concreto.
Con esto lo que quiero decir es que Vue, con
que parece que está allá abajo, también
abarca este espectro. Vue se lleva muy bien
con la HTML y CSS, todo que vas a tener que
maquetar en principio lo vas a poder hacer
en esos lenguajes. Vas a poder hacer cosas
pequeñas en jQuery, al final de la charla
os dejaré un enlace donde se habla de cómo
usar Vue como jQuery, y bueno, el resto. Y
también lo bueno es que se mida cara a cara
con estos frameworks tan buenos que saben
que son como React y Angular.
Con esto un pequeño llamamiento.
La maquetación tiene mucha importancia, así
que, sí está bien siempre tenerlo en mente
no perderlo.
Bueno, entonces, no quiero explicar de qué
va Vue, quiero que sepáis un poco como es
la experiencia de Vue y aquí comentaros un
poco por qué me gusta.
Estas son un poco de palabras técnicas, pero
bueno, [inaudible] levanta mucho la mano,
supongo que lo entendéis. Vue es component
oriented, la programación está orientada
a componentes, esto significa que puedes dividir
tu página en distintas partes, esto no es
ninguna novedad, esto lo hacen todos framework
y es la tendencia actual, y es la que se ha
demostrado que funciona.
Tiene unidirectional data flow, ese fue un
concepto que el primero que lo metió fue
React y fue concepto muy acertado, esto simplemente
viene a decir que la comunicación de padre-hijo
en un componente va por propiedades, es decir,
tú lees un dato y de evento si es que si
quieres cambiar ese dato se lo tienes que
decir a tu padre para que te lo cambie; es
decir, el dueño de ese dato es el responsable
de cambiarlo.
El template está basado en HTML, es HTML
valid, eso ¿qué significa?, que aunque no
haya pasado Vue todavía por ese HTML, el
navegador no se va a quejar, el navegador
va a pasar por encima y va a decir – esto
no entiendo, pero será algo y no va a haber
ningún problema de renderizado.
Puedes poner a Scope CSS, esto viene un poco
relacionado con los componentes que es qué
decidir que es sólo un CSS, aplica un trozo
de Dom viene muy bien.
Y esto es una de las novedades que mete Vue,
y que hace que se diferencie del resto, que
es totalmente dereactivo.
Hablar de reactividad para cómo hablar de
un concepto muy… trambólico... Como que
parece algo muy complejo, pero reactividad
al final lo que vais a ver es que nos facilita
la vida enorme.
Lo que he dicho antes, es flexible, puedes
elegir. Si no te gusta HTML, Pug, si prefieres
JSX puedes utilizar un montón de opciones.
Y por último, que Vue vuelve un poco como
a los orígenes, tú usas HTML, CSS y JavaScript.
Si quieres usar la nueva versión de JavaScript,
la usas. Pero bueno, es con lo que en principio
partes.
Es progresivo. Esto significa que no hace
falta que sepas nada de esto para empezar
a usarlo, puedes empezar poco a poco y según
vaya necesitando cosas, ir añadiéndolas.
Si necesitas gestión global del estado, la
tienes; si necesitas renderizarla en el servidor,
lo tienes; es decir, tienes la seguridad de
que no te va a fallar cuando tu aplicación
crezca. Y de momento nosotros podemos decir
que eso ha sido así, porque estamos haciendo
cosas complejillas y va bien.
Y por último, simple. Esto ya es lo que marca
la diferencia con todo, que es realmente simple
e intuitivo de entender; por lo menos en mi
gusto, luego lo vais a ver y… después ¡qué
mierda es esa!
Y me gusta sobre todo porque hace mi trabajo
más fácil. Esto es al final por lo que uno
crea un framework.
Y esto es por lo que estoy aquí, porque a
mí me ha hecho mi trabajo más fácil y quiero
que también haga el vuestro, así que aquí
estamos.
Bueno, mucha teoría, me has vendido muy bien
la moto, enséname un poco de chicha.
Antes que nada, para quien no conozca el concepto
de MVC, se trata de simplemente separar la
interfaz en tres partes, View, Controller
y Model.
Vue, tiene una aproximación parecida a la
MVC, no es exactamente MVC, se llama EVVM,
pero no, bueno, no hace falta saberlo.
Y esto se ve muy bien en una instancia de
Vue, ahí como tenéis template es vista,
vue, data el y methods es controller. Es así
de simple.
Bueno, pero, esto está muy bien y no quiero
que esta demo sea como el típico ejemplo
éste, ¿cómo dibujar un caballo? Par de
partes y de repente ¡pum!, un caballo. No
quiero ir poco a poco.
Así que, nada, voy a empezar a hacer un demo
y a ver qué tal sale.
Y antes de esto quería contar una pequeña
anécdota. El otro día en el trabajo, me
enseñan esta carta y se empiezan acojonar.
Y dice – tío, ¿eres tú?, porque a veces
hablo y parece que se me olvida. Si veis que
durante la demo, se me olvida algo o no entendéis,
simplemente hacerme un poco así en plan de…
no sé qué está diciendo, [inaudible] y
así lo entiendo.
¡Vale! Pues, empezamos.
Antes que nada… voy a ponerme aquí, voy
a levantarme, de hecho sin tool y sin mucha
movida, lo único que voy a hacer es esto,
levantarme un servidor en tiempo real para
que cuando el código no tenga que estar refrescando.
Y aquí tenemos la aplicación que queremos
hacer. Este no es el caballo hecho de acero,
esto es HTML y CSS, todo esto es HML y CSS,
veis algunos detalles que puedo poner el ratón
por encima, tiene App que aparece una X, le
puedo dar no pasa nada.
Y además esto es un input, pero no es un
input normal, es un poco... especial, ¿no?,
y este checkbox, no es un checkbox nativo,
es un check for que hace… o sea tiene un
color verde que últimamente no lo soporta
y tal. Y para demostraros que no hay nada,
este es el index, aquí vemos que si uno entra
la aplicación, sólo filtros que son a la
izquierda y la lista pokemon que está a la
derecha y bueno… un header.
Y aquí sí están los pokemon, aquí está
Charmander, Scuitle y aquí está Bulbasaur.
Perfecto.
Bueno, para meter Vue ¿qué necesitamos?,
pues, simplemente venirnos aquí y decirle
que nos traiga Vue, me lo voy a traer de un
package.
Voy a comprobar que lo tengo aquí. Y esto
es una cosa que también quería destacar
de Vue, aquí está, si os fijáis aquí – ¿lo
ve todo el mundo? –.
Lo voy a sacar un segundo para que se vea.
¿A la derecha lo ven bien?
Interlocutor: Ahí.
Rubén Valseca: ¡Vale! Aquí está Vue y
pesa 77 k. Esto es nada, para los que sepáis
un poco de [inaudible] es muy poco. De hecho,
lo he comprobado y es menos que jQuery, incluso.
Pero, esto es sin… minificar. Si cogemos
la versión minificada y me la llevo aquí,
esos 77 se convierten en… 31. Es una librería
muy, muy ligera y fácil de meter, y vais
a ver toda la potencia que da simplemente
estos 31k.
Bueno, voy a hablar un poco de vidilla, y
me voy a meter, voy a crear... porque que
ni siquiera va a tener un creado un fichero
JavaScrip.
Aquí lo hago.
Y para empezar a usar Vue, simplemente lo
vamos a guardar en una variable, la instancia
de Vue.
Y creo un nuevo Vue, donde yo le voy a pasar
un objeto y le voy a decir en que parte del
HTML se tiene como que enganchar.
Normalmente, voy a decirle que está en Vue
App – voy a separar esto en dos para que
se vea más claro, me quito la barra –, aquí
está simplemente I-d-App, me engancho ahí.
Y voy a pasarle un dato, lo que hemos visto
antes del modelo, por ejemplo, un message
que sea “Hello Vue world”, guardo.
Y aquí evidentemente no aparece el mensaje
porque no le he dicho dónde tiene que ponerlo.
Así que, voy a ponérselo por ejemplo encima
del set box y para meterlo, esto los de Angular
les recordará mucho, y es simplemente con
doble curly brace. Y aquí está.
Entonces, enlazado con esto, parece relativamente
simple, ¿no?, declaras un mensaje aquí y
te aparece en otro lado.
Pero, si veis aquí en la consola, esta es
mi instancia de Vue App y puedo de hecho – aquí
está en mensaje, si lo veo está aquí, “Hello
Vue world” – y Vue tiene un sistema reactivo
que se mete por dentro y yo puedo hacer cosas
como por ejemplo, decirle verde “Hello Vue
world. Hola ¿qué hace?”. Y automáticamente,
en cuanto yo lo he escrito ahí, ya se ha
actualizado en la otra parte.
Pero bueno, como el “hola, ¿qué hace?”
no es muy significativo, voy a tocar los pokemon
Antes que nada me voy a quitar, este pokemon,
fuera, y este otro. Me dejo sólo un pokemon,
que el Bulbasaur. Y voy a traerme uno de aquí,
¡vale!, esta es la información de los pokemon.
Aquí simplemente es json, que es donde pone
el nombre de cada uno, donde está la imagen,
de qué tipo es el pokemon, qué habilidades
tiene, y como este uno, hay 26, hasta Raichu.
Pues, me voy a traer, por ejemplo a… – uno
que me caiga bien –este, Chairmander. Ahora
vamos a tratar de sustituir… perdón, he
guardado.
¡Vale!, me lo traigo aquí. Aquí está el
pokemon. Y lo mismo, post será [fonético]
a él directamente desde aquí. Aquí está
el nombre, la imagen, el ID, todo.
Pues, vamos a sustituirle en vez de Bulbasaur,
yo lo que quiero es que me pinte el nombre
de mi pokemon… pokemon.name, Charmander.
Si queremos reemplazar la imagen, pues, aquí
está el source de la imagen original, con
Vue simplemente ponemos dos puntos delante
y aquí le decimos que coja, la imagen del
pokemon, ya está Charmander ahí.
Y por último, el tipo. El tipo lo dibujo
con estos dos colores, esto viene del original
que Bulbasaur, no sé si sabéis, yo no lo
sabía, que Bulbasaur es de tipo veneno y
planta. Charmander en nuestro caso, sólo
tiene un tipo, que es de tipo fuego; así
que bueno, para no complicarme mucho de momento,
voy a asumir que sólo hay un tipo y voy a
ponerle aquí, el estilo directamente.
Lo bueno de Vue, es aquí puedes plantarle
un json directamente y… no va a funcionar.
Interlocutor: Es que fire no es un color.
Rubén Valseca: Claro, fire no es un color.
Entonces, ¿esto por qué es?, porque simplemente
no tengo la información del color en el json
original y que el diseñador nos ha dejado
aquí otro json con los tipos. – Parece
que le ha hecho posta, qué sí.
Pues, aquí me guardo los colores, por ejemplo,
color – en mayúscula – para que se vea
que es una constante, y aquí ya tengo un
color asociado a un tipo. Entonces, lo que
voy a coger es, color en el tipo. Ahí está.
Pues, ¡genial!, ya hemos dibujado un pokemon,
hemos pasado la información de ese json a
este pokemon, pero yo tengo 26 y como he copiado
aquí la información del color, lo que yo
no quiero hacer es copiarme todo este json,
sino no la voy a liar [inaudible] aquí en
el JS. Así que voy a decirle a Vue que cuando
se cree me recoja ese json.
Para eso Vue, nos pone aquí un método que
se llama create. Y ¿qué quiero que hagan
en el create?, pues, que vaya por el json,
para esto voy a usar simplemente la Api nativa
que ya está disponible y es esta data.pokemon.json.
Esto me devuelve una promesa con la respuesta.
Scroll, lo subo un poco, ¿no?, lo subo un
poco no, ¿ahí se ve bien?
Aquí le tengo que hacer un return de la respuesta,
que me la pase a json.
Normalmente, para otro tipo de llamada yo
prefiero usar una librería que se llama Axio,
así que, hace un poco más simple esto, pero
bueno, esta es la nativa, actualmente. Y aquí
en esta función ya voy a tener los pokemon.
Voy a hacer un pequeño debugger para asegurarme
que no esté liando y aquí pokemon, sí,
aquí está el array.
¿Pues estos pokemon dónde los quiero guardar?,
los quiero guardar al nivel que… o sea,
es un dato al final, ¿no? – échame esto
a la derecha –, y este pokemon ya no me
sirve porque no quiero dibujar sólo uno,
quiero tener una lista de pokemon, que va
a empezar siendo un array vacío, ¡vale!,
no voy a tener ninguno.
Y aquí se los voy asignar adentro, y para
asignárselo, para referirse a dónde lo guardas,
se hace con el This, This punto Pokemon igual
a Pokemon.
Pero, no sé si sabéis, que el This es a
nivel de función, por lo tanto esto no nos
va a funcionar porque yo me tengo que referir
a este This. Esta es una cosa también un
poco trambólica de JavaScript pero con S-6
como vamos a ver un poco más adelante se
soluciona, de momento la única solución
para esto, era simplemente este This no es
este, sino que es ese That y en vez de This
es That.
Entonces, voy a comprobar aquí 
que lo tengo, un array con los 26 pokemon
y ahora quiero pintarlos. Para pintarlos como
ya teníamos hecho… aquí montado para un
pokemon en particular, lo que voy hacer es
repetir esta carta, tantas veces como pokemon
tenga, y le tengo que especificar una key,
que esto es una clave, es decir un valor único
para cada objeto, por ejemplo, el nombre.
Y aquí están los pokemon.
Automáticamente Vue detecta que yo he asignado
estos pokemon en el código. Aquí en el That
al asignarlo Vue detecta que yo he modificado
este valor y renderiza automáticamente. Esta
es la reactividad que tiene por detrás.
Esto es como setear cosas en el template.
Y yo tengo aquí esta X que todavía no le
he dado vida, yo quiero que cuando apretar
esta X, que me muera un pokemon. Para ello
qué voy a hacer, pues, esa X es ésta de
aquí, tenemos un pokemon que los he puesto
con un material icon. Y lo que quiero hacer
es bindearme al evento click, es decir que
cuando yo haga click, este arroba es la especial
para hacerle saber a Vue que voy a lanzarle
un evento. Quiero quitarme un pokemon, y le
voy a decir yo mismo, “quita a este pokemon”.
Y esta es la parte de la que hemos hablando
antes de controladora, es decir, para hacer
cambios necesito lanzar un evento hacia arriba.
Este evento lo recojo con method y lo defino
igual.
Esto es una función se va a llamar pokemon
sub delete. 
Y esta función lo que va a hacer al final
es modificarme el array que tengo de pokemon
es decir, me lo va a quitar. Y ¿cómo podemos
hacer eso?, bueno, lo que voy hacer al final
es modificar el array de pokemon y voy a partir
del original. Y para hacerlo pues, me hago
un filter.
Un filter es simplemente… esto recorre todos
los pokemon y les tengo que decir cuáles
pasan, pues, van a pasar todos, excepto el
que quiero borrar, voy a coger el array y
me van a pasar todos excepto el que les estoy
pasando aquí, por parámetros; pues, pasan
si el pokemon es distinto del pokemon que
quiero borrar. Y ya está.
No está.
Interlocutor: ¿Es un objeto?, ¿no?
Rubén Valseca: Es objeto, sí.
Interlocutor: [Inaudible].
Rubén Valseca: ¡Ah!, no, no, es que no he
guardado aquí.
Ahora.
Aunque sean objetos, si los estoy comparando
directamente, es el mismo objetivo y el hacer
una comparación es el mismo. Si creará otro
objeto distinto, entonces, no.
¡Vale! Aquí ya puedo borrar todos los pokemon
que yo quiera.
Bueno, esto es simplemente para meter pokemon,
borrarlos.
¿Os parece guay? O, de momento algo normalillo,
¿no?
Le daré un poco de vida a éste, vamos a
implementarlo como sería lógica. Hay que
tener primero el mensaje este de “Hello
world” porque… molesta, mensaje fuera.
Y este nice input como yo lo he llamado, porque
me parecía bonito, lo que tiene es simplemente
como un wrapper por encima, un input y después
con esto se pinta el borde.
Esto no lo he hecho yo, esto lo he sacado
del internet, de un Codepen que había bastante
bonito, después pongo el enlace para la autoría.
Y para enlazarme a este input, lo puedo hacer
con el v-model y le digo con que dato me estoy
manejando.
Ese es un dato que voy a tener que declarar
en date that. Y lo inicializo como un campo
vacío.
Ahora mismo puedo escribir “hola” y no
va a hacer nada, pero puedo leerlo aquí.
Aquí está “hola”. Y lo mismo, aunque
sea un input yo puedo escribir en él… José,
¡vale!
Entonces, ¿cómo implemento ahora?, simplemente
que este filtro de búsqueda de pokemon me
filtre a los pokemon que yo tengo.
Pues, en Vue podemos definir como unos datos
especiales, que aquí en está un poco la
cosa guay, la que tanto me gusta, que esto
te puede definir una cosa que se llama una
propiedad computada.
Una propiedad computada no es más que un
dato que tú tienes disponible y que lo declaras
en función de otros datos, como por ejemplo,
mi nombre completo es Rubén Valseca; Rubén
Valseca está compuesto de firstname y de
lastname, si yo quiero ahorrarme a tener que
escribir siempre firstname más lastname,
puedo escribir simplemente una propiedad computada,
que sea como fullname. Y en este caso, para
lo que vamos a querer hacerlo, es para tener
los pokemon filtrados. Lo voy a llamar a esta
propiedad computada filter pokemon y la defino
como una función. Esto para lo que he visto,
parecido a un watch pero no es un watch, porque
cachea por dentro.
Entonces, devuelvo a los pokemon y lo mismo…
pero no va a ser todos los pokemon, va a ser
sólo los que pasen un test que yo le diga.
Y ¿cuál es la condición para que pase un
pokemon o no?, pues que el nombre del pokemon
contenga la frase que he escrito yo en set
box, si escribo char, Charmander lo cumple
pero no cumple Bulbasaur. Entonces, para decirle
esto, simplemente le digo que el nombre del
pokemon contenga, include, el texto que quiero
buscar, que se llama search text. Pero, esto
es lo mismo, no funcionaría porque el this
es de la función, es un rollo, tal cual.
Y para esto, es para lo que se inventó un
poco S-6, porque yo puedo hacer una cosa que
las arrow function y que son nativas ahora
mismo en el navegador.
Una arrow function no es más una función
normal y corriente que lo que hace es coger
el this del que está por encima, si el de
encima tampoco tiene this, pues, por encima.
Es decir, este, ahora mismo este this sí
que se va a referir a esta función.
Entonces, guardo y aquí escribo… – no
está funcionado, ¿por qué no está funcionando?
–; porque aunque he declarado aquí los
pokemon filtrados, no los estoy pintando.
Ahora, en vez de coger los pokemon originales,
cojo los pokemon filtrados y ahora – sí
funciona – y ves que en cada vez que cambia
el texto se actualiza automáticamente el
nuevo array.
¡Vales! Pues con esto, mil cosas más, o
sea, al final te deja loquísimo porque tú
en una propiedad computada, también puedes
usar otras propiedades computadas y ad infinitum,
todo lo que se te ocurra, y Vue lo va a hacer
por detrás de la forma más eficiente, que
[inaudible] este ha cambiado, éste depende
de éste y éste otro por lo tanto tengo que
ir haciendo cambios.
Bueno, llevo 20 minutos, no sé si va a llegar
bien. Hago dos opciones o el checkbox o vemos
como meter esto en un componente.
¿A ver? ¿Checkbox?
¿Componente?
Menos mal que he preguntado. ¡Vale! Los checkbox
serían igual, pues, recorro este array, por
si alguno tiene curiosidad y tal.
Bueno, ¿cómo puedo, una vez que tengo esto
definido?, meterlo en un componente.
Antes que nada, – que no lo he hecho, y
nadie me ha echado bronca y deberían habérmela
echado – voy a definir esto en una función
autoinvocada, esto tan raro, no es más que
una función que cuando acaba se llama a sí
misma. Y ¿por qué se suele hacer esto en
JavaScript de toda la vida?, pues para no
ensuciar el scope, si yo me guardo aquí un
objeto ahora que sea de otro nombre, pues
para no ensuciarlo, pero como yo quiero tener
disponible la App, la guardo aquí y así
sólo expongo las cosas que yo quiero exponer.
¿Iba hacer un componente?, ¿no? Sí.
Por ejemplo, un candidato a componente puede
ser la card ésta de pokemon, ¿no?, es decir
es algo que, bueno, de momento… – ¡Uy!,
se me ha olvidado, el background, había que
hacer un for – Si no os importa lo hago
en un momento y así ya le damos los pokemon
de esto.
Yo recorro el tipo for type in pokemon punto
type, voy a decirle que la clave es el type
y ahora esto si se va a repetir tantas veces
como tipos tenga. Entonces, pokemon, la post
color en la posición type, guardo y ahora
ya si Bulbasaur tiene sus dos… esto.
Bueno, componente.
Para hacer un componente, al final lo que
tengo es como un trozo de HTML que se me va
a repetir, lo más fácil y lo que alguien
puede pegar un grito cuando haga esto, es
simplemente copio esto, me lo voy definiendo
ya, va a ser una pokemon card a la que le
voy a pasar un atributo que yo me invento
que llama pokemon… pokemon igual a pokemon
y este pokemon lo he sacado de repetir y de
iterar sobre el array… pokemon in pokemon,
y lo mismo, una llave.
En los componentes cuando empiezas a tener
más de dos o tres atributos lo que se suele
hacer es, te bajas esto aquí, tabulas, así
lo tienes un poco más ordenadito, y el último
así.
Entonces, aquí vemos una card pokemon que
vamos a repetir y le vamos a pasar un objeto
que se llama pokemon.
Pues bueno, para definir un componente – tercer
vez que lo digo – hacemos simplemente Vue
component. Esto es lo que digo que mola tanto
de Vue, que es que es hasta intuitivo, ¿no?,
es cómo ¿quieres hacerte un componente?,
pues Vue component; y este el nombre del componente,
pokemon card, que es el nombre que tiene aquí.
Y ¿al componente que le pasamos?, como este
componente vive como por su cuenta, tenemos
que pasarle el template, éste no lo va a
coger del HTML, para esto voy a ponerme el
doble tic tac [fonético] y le voy a escupir
todo el HTML que haya copiado antes.
Uno ha dicho – chico no me habías dicho
que me ibas a meter HTML en el JavaScript
– pero luego refactorizamos.
Aquí me quito el wait for, porque esta es
una card pokemon. Y esta template, el componente
va a recibir una propiedad, que es la que
le digo aquí, que es el pokemon, pues la
defino en Props. De hecho, voy a definirla
arriba para que quede un pilín más claro,
que este componente va a recibir del padre
unas propiedades que se va a llamar pokemon,
¡vale!, guardo, guardo aquí. Apreto duro,
¿por qué apretado?, porque al tratar de
refactorizarlo, al meterlo en un componente
este componente trató de leer color; color
que está aquí, no lo he definido, está
definido en el padre y esto no es como en
otros framework que si no está definido en
[inaudible] me voy al padre, no, aquí se
lo tiene que decir explícitamente.
Entonces, vamos a decirle simplemente que
le van a pasar otro tributo que se llama color
y así él ya puede hacer el mapeo tranquilamente.
[Inaudible] A ver… [inaudible] color es
un mapa…
Interlocutor: [Inaudible] mayúscula [inaudible]
constante.
Interlocutora: Sí, las constantes son en
mayúsculas [fonético].
Rubén Valseca: ¿La constante?
Interlocutor: Abajo.
Rubén Valseca: ¡Ah!, ¿ésta?
Interlocutor: Sí.
Rubén Valseca: [Inaudible].
¡Vale! Ya con eso, coge el mapa de colores
y hace el mapeo por dentro.
Y la magia de esto es que el template aquí
simplemente le estoy definiendo un componente,
el template está definido aquí como un string,
y lo bueno de esto es que lo puedo usar tanto
aquí como en otro lado y no me tengo que
preocupar de copiar y repetir el HTML.
Sí queréis – llevo 28 minutos – voy
a ir un paso más allá. Y es que esto no
es necesario cogerlo de un string, un HTML,
puedo cogerlo de un ID que va a estar en la
template. Por ejemplo, pokemon card template,
y aquí la voy a definir, aquí encima, como
un script con el ID, pokemon card template,
y… lang text x-template, para decirle que
lo que hay aquí dentro lo interprete como
HTML.
– ¿Tiene un error? ¡Ah! Me comí un…
me he comido algo por ahí, pero bueno, lo
está parchando bien –.
Interlocutor: Es que no se cierra realmente
el template, no cierra [inaudible].
Rubén Valseca: Creo que es script. Pero bueno,
lo está renderizando correctamente.
Escribiré un mail, pues saber dónde he encontrado
el fallo éste, es algo que me he comido aquí.
Interlocutor: [Inaudible].
Rubén Valseca: No lo veo…
Interlocutora: [Inaudible].
El comentario [inaudible].
Interlocutor: El comentario [inaudible].
Interlocutora: [Inaudible] los dos puntos.
Interlocutor: [Inaudible].
Interlocutora: [Inaudible].
Rubén Valseca: ¡Ah! Type. ¡Ah! Sí, claro,
claro. Estaba esperando que respondierais.
¡Vales! Pues, así es como se implementaría
tener un componente que lo estás cogiendo
directamente del dom y lo mismo.
Y de hecho, esto es muy útil porque el JavaScript
y CSS original, como os he dicho, yo cogí
un Codepen por ahí y me traído las partes,
es decir, el input está definido en el CSS
como tiene que ser, un pokemon card, el nice
input, toda sus cosas, estos son estilos del
CSS, y lo bueno es que puedes ponerte estos
componentes en las distintas partes.
Esta era la pequeña demo que quería hacer
para mostrarla.
Esto es como lo que al final hace grande a
Vue, que estas pequeñas cosas o esto pequeño
que he hecho es muy fácil de escalar y Vue
te asegura de que no te va a fallar cuando
le siga creciendo.
Si esa mona la charla aquí tenéis más links.
Vue cada vez está creciendo más, estas charla
es muy buena, por ejemplo, de Christ Fritz
como introducir Vue a tu equipo, no le digas
vamos a refactorizar todo, vamos a meter esto,
como empezar a probar Vue en pequeñas partes,
esto mismo que hemos hecho, lo hemos hecho
en un trocito pequeño, pero igual que está
en una aplicación desde cero puede ser en
otra que ya esté montada, con cuidado.
Sara Drasner como reemplazar jQuery con Vue,
ejemplos de cómo… estos links la verdad
que son muy útiles.
Y también aquí en España, José Dongi,
Angélica, Carlos, Alex, hay un montón de
gente en España que también está empezando
hacer cosas súper chulas con Vue. Bueno,
ahí tenéis los links con que empezar. Este
en concreto, el libro este, José Dongi está
bastante guay.
Y si os interesa la NASA, bueno este creo
que es justo para sólo gente de US citizen,
pero bueno hasta en la NASA ya están buscando.
Pues, eso es todo. Si os ha gustado la charla,
sino la card esa que habéis visto antes,
es de [inaudible], que la venden en Amazon
a 27 euros, yo he visto, está en stock.
Y ya está, os agradecería mucho si podéis
dar feedback a la charla en ese enlace. Y
eso es todo.
[Aplausos].
Preguntas, alguna pregunta, dudas.
Interlocutor: Bueno primero, enhorabuena porque
ha sido una charla muy buena, y quería preguntarte
al principio de la charla has dicho que estáis
trabajando ya con Vue en producción de forma
bastante intensiva quería preguntarte ¿qué
problemas o [inaudible] con otros framework
no hayas tenido?
Rubén Valseca: Claro, no voy a tratar de
venderlo y decir que todo es súper mágico
pero es que ningún, de verdad, hemos migrado
de Angular uno a Vue, las templates ha sido
súper fácil porque la sintaxis, ya veis,
es exactamente igual, incluso mejor en algunas
partes y con Vue yo diría que… no lo recuerdo,
cero, que hemos tenido problemas con webpack
que han dicho por ahí, pero yo creo que webpack
tiene problemas con todo mundo, así que no
es nada nuevo.
Pero sí veis en la charla, aunque he tenido
unos problemas por estar aquí en directo,
pero del resto en ninguno, ha escalado muy
bien, cuando necesitamos meter gestión global
de estado con Vuex ha sido muy fácil, de
hecho Vuex es muy fácil de empezar a meterse
con él y una gozada. De momento nada malo.
¿La otra?
Interlocutor: Si usar webpack, ¿se puede
hacer lo que se hace de limitar el CSS a un
componente?
Rubén Valseca: No.
Bueno, podrías medio hippearlo en los selectores
de CSS en vez de hacerlos a clases, lo haces
a la pokemon card, pero eso no…
Interlocutor: Como si no vemos o algo así,
o sea, ¿pueden darle un perfil al…?
Rubén Valseca: No, normalmente puede ponerle
al nombre la clase el mismo que el otro pero
si quieres realmente Scope CSS que tú puedes
escribir ul y que al aplicar sobre estilos
esas ul tiene que ser por webpack, porque
webpack es lo que haces te coge ese CSS, lo
pasa a JavaScript, le añade un atributo especial
y después en el HTML vas a tener tu dom con
date that y un chorizo detrás. Y el CSS lo
renombra como que sólo vaya a ese [inaudible].
Pero lo bueno de eso es que también puedes
desde de un componente de arriba, sobrescribir
estilos de abajo y además los ves porque
está en el dom. Entonces si nosotros por
ejemplo usamos un framework, framework sobre
un framework, un quasar [fonético] que es
como un bootstrap para traerte componentes
sin hacernos a nosotros loso drop down, hacernos
unas modales [fonético] y tal, que al final
ha dado un poco más…
Mira ese sí ha dado un poco más de problemas
quasar que otra cosa, pero sobrescribir estilos
sí en un momento dado tú quieres puedes
perfectamente.
¿Alguna otra…?
Interlocutor: ¿El template lo podrías tener
exportado en un HTML, o sea, por ejemplo tener
en tus carpetas componentes y tener el HTML
y tenerlo como un componente [inaudible]?
Rubén Valseca: Cuando se hacen grandes, es
decir, los Vue Component, no sé si los has
tocado, pero los Vue Component son un fichero,
donde tienes template, script y CSS, ni siquiera
tienes que decirle al template automáticamente,
se refiere a él, pero sí lo quieres hacer
así por separado, pues, lo único que se
me ocurre es obtenerlo al final del HTML o
en ficheros string y de ahí te los traes,
que no es lo más bonito tampoco, pero sin
webpack no se podría hacer.
Interlocutor: ¿Acaba de decir como que no
hace falta poner el template para tener un
HTML?
Rubén Valseca: Sí.
Interlocutor: Solamente poniendo tu sentencia
de HTML, script y style te valdría ya.
Rubén Valseca: Exacto. O sea, webpack por
detrás lo que te hace es cogerte ese objeto
que tú exportas al final porque se exporta
un objeto de JavaScript y como que sabe que
sabe que le añade, que ese template es el
de aquí. De hecho, lo que hace Vue por detrás
es muy parecido – por no decir lo mismo
– que hace React, que tener pasar el template
como JavaScript.
En React se ve más porque tú lo escribes,
bueno tú escribes JSX. En Vue, lo que hace
Vue es coger ese HTML al final te crea una
función de arrender y esa función por detrás
simplemente la llama desde JavaScript con
los parámetros que correspondan.
Pero sí, es lo que desde antes, Vue… tú
puedes tirar JSX si lo necesitas.
¿Alguna pregunta más?
Interlocutor: Voy hacer una pregunta, hablando
un poco de JSX ¿por qué no te gusta el JSX?,
o ¿por qué prefieres esta forma de trabajar?
Rubén Valseca: ¿A ver? Yo creo que a mí
JSX no gusta.
Interlocutor: Buen, ¿por qué prefieres esta
entonces?
Rubén Valseca: Claro, no gusta porque nunca
lo he usado en producción, nunca lo he usado
en el trabajo, ni le ha dado mucha caña,
y como que hecha un pelín para atrás desde
el principio, esa es la única razón.
No pienso de forma tan Talibán que el HTML
tiene que estar en el template, pero si pienso
que al tenerlo separado vas a facilitar mucho
la separación del trabajo, de decir, si hay
alguien que sólo sabe CSS y HTML va a poder
tirar todo el HTML y todo el CSS que quiera
por separado y tú después simplemente, no
hace falta traducirlo a JSX.
Pero sí sé que JSX es muy útil en otros
casos. Y esa es la única razón, yo estoy
deseando encontrarme un caso donde necesite
usar JSX, pero de momento no lo he necesitado.
Así que esa es el único motivo.
Interlocutor: [Inaudible] añadiría que por
ejemplo, no gusta más porque soy partidario
de los estándares y ahí utilizo estándares
HTML, CSS y JavaScript. JSX es un lenguaje
propietario de otro lado. Entonces, que no
digo que no esté mal, que mola, que es fácil,
etcétera pero a mí no me gusta porque [inaudible].
Interlocutor: Pero al final, cuando tú escribes
un template de Vue, es HTML casi, pero [diafonía].
Rubén Valseca: Claro, tiene el v-for el v-if.
Interlocutor: [Inaudible] esa aproximación
porque el click sigue siendo click con arroba.
Interlocutor: [Inaudible], o sea, yo no estoy
de acuerdo de uno y de otro, pero creo que
son muy parecidos, que no entiendo tampoco
lo de [inaudible].
Interlocutor: Para mí creo que se aproxima
más al estándar el Vue que [inaudible].
Rubén Valseca: Bueno después, lo discutimos
con una cerveza, ¿por qué hay cerveza?,
¿no?
Audiencia: Sí.
Rubén Valseca: Y ¿algo más o ya hasta ahí…?
Interlocutor: Una preguntita más.
Rubén Valseca: Sí.
Interlocutor: Así [fonético] sería un ejemplo
que está súper bien porque no conocía Vue
y ahora [inaudible] pero a escala en una aplicación
más grande, me imagino que tienes traer una
serie de convenciones [inaudible].
Rubén Valseca: Claro, ¿a ver? Este ejemplo,
lo he tratado de hacer una demostración de
cómo usarlo importándote sólo a la librería
de Vue, súper simple.
Nosotros no tenemos hecho esto, porque la
aplicación tiene mucha más interacciones
y necesitamos tirar de webpack que al final
es una herramienta más.
Estándares. Lo bueno de Vue es que es muy
flexible, y también es lo malo, pasa como
JavaScript que es tan flexible que la gente
hace movida súper raras.
Con Vue puede pasar lo mismo, es cierto, pero
hay una guía de estilo, por ejemplo, la guía
de estilo que está en la documentación de
Vue te dice “a lo mejor no es buena idea
hacerte muchas carpetas metiendo los componentes
dentro de ellas; a lo mejor no es muy buena
idea tal”, como recomendaciones, como la
de John Papa para Angular uno, pues igual;
pero sí que es verdad, que nosotros la tenemos
en mente pero tampoco ha hecho falta porque
como está montado Vue no hace falta meterle
muchas… como pensar en mucho estándar,
porque ya la Appi de por sí como te estandariza,
te dice esto va a ser tu modelo, aquí vas
a tener los métodos, estos cosas reactivas
y en general no hemos necesitado a veces decir
– tú lo haces de una forma, yo lo hago
de otra, vamos a llegar a un acuerdo –, muy
pocas veces.
Interlocutor: Para recuperar el código siempre
hay que poner v [fonético], ¿hay alguna
manera de ponerle v [fonético]?
Rubén Valseca: ¡Uy! Sí, me alegra que me
hagas esa pregunta.
Interlocutor: [Inaudible] trabajando yo no
ponía v, por ejemplo, trabajando con Angular
1 y 2, pues, tú pones esto en tu prompt,
pones suponte interrupción, y ahí lo puedes
parar el código, pero en Vue [inaudible]
y no pones debugger no te lo paraba y como
ya he trabajado con webpack, [inaudible].
Rubén Valseca: Ahora mismo, si lo usas así,
es que quieres usar fichero JavaScript y yo
puedo ponerle un punto de interrupción sin
ningún problema.
Lo que dices de webpack, o sea, es más problema
de webpack porque webpack lo que hace es cogerte
todos los JavaScript te lo amontona y te lo
deja en bandel, y no hay quien se meta en
ese bandel. De hecho, cuando tú pones un
debugger , puedes hacer un map para poder
ver como el código JavaScript original, pero
es un poco lío y la única solución lo más
fácil es hacer debugger y tal.
Pero pensaba que tu pregunta iba por otro
lado, y es algo que no he dicho, que son las
Vue desktools. ¡Vale!, no sé si la conocéis.
Interlocutor: Sí, sí.
Rubén Valseca: Y es simplemente que… [diafonía].
Interlocutora: Cierto, se ha visto cuando
tiene trabajo se ha visto. O sacar afuera.
Rubén Valseca: ¡Vale! La pongo aquí abajo.
Interlocutora: ¿Sí lo cierras y lo vuelves
abrir?
Rubén Valseca: Esto no quiero que parezca
que… esto, pero si es verdad que la consola
ha estado dando problemas últimamente, así
que… con un restart del navegador.
Pues, no.
Interlocutora: Antes estaba, ¿eh?
Rubén Valseca: Antes estaba, ahora no sé
por qué le habrá dado el atar.
Bueno, el Vue desktool es una pena que no
pueda mostrarla, porque te facilitan un montón…
Interlocutora: ¿No es por el Vue que el mínimo
y no es la versión [inaudible]?
Rubén Valseca: Es verdad. ¿Lo intento en
un momento?
Interlocutor: Sí.
Rubén Valseca: No. Y es raro porque esto
se pone en verde cuando Vue está detectado.
No sé, bueno, la Vue desktool son una pasada
– aunque no quieran aparecer – porque
te permite ver los datos que tiene cada componente,
te permite saber, incluso tú los puedes cambiar
ahí en directo y son bastantes útiles, cuando
funcionan, que ahora ya no.
Pero en general, aquí no las he necesitado
porque lo podía sacar la instancia de Vue
afuera.
Bueno, llevamos una horilla. ¿Terminamos
y preguntas después con cervezas?
¿Sí? ¿Quién quiere terminar ya y unas
cervezas? Bueno pues, nada. Muchas gracias.
[Aplausos].
[Fin del Audio]
