Bueno, bienvenidos a todos y a todas, oh my god, hay mucha gente, más gente que en mi última comunión.
Solo he hecho una, no sé cuántos habéis hecho vosotros.
Entonces, como estoy tan emocionado porque es el primer meetup que hacemos aquí en Adevinta,
muchísimas gracias por venir, gracias por pensar que esta tarde el mejor plan que teníais era estar aquí.
Para mí me llena de orgullo y satisfacción, no solo personal, sino porque ver a tanta gente que le interesa el frontend.
¿Vale? Entonces mi primera pregunta sería, ¿quién de aquí toca el frontend?
Aunque sea con un palo, ¿eh? Vale, bastante gente.
Alguien ha dicho, yo también, no he levantado la mano, pero yo también.
Bueno, pues levanta la mano, que no pasa nada. Vale.
¿Quién de aquí no toca el frontend o es backend y...?
¿Vale? Aquí hay algunos, lo hacen tímidos.
No pasa nada, no vamos a matar a nadie, solo a los que respondan ahora que odian el frontend,
que no quieren tocar nunca jamás ni con un palo.
Bueno, pues nada, vamos a empezar antes a...
Bueno, no pasa nada, esperamos convencerte, esperamos convencerte con las cosas que quedan en el futuro.
Entonces, muchas gracias, ya vemos que somos todos colegas, compañeros, menos uno.
Bueno, así que todo va a ir bien, vamos a estar aquí en familia.
Como me hace tanta ilusión estar aquí, si no os importa, y al que le importe, pues que lo diga,
o que haga así, ¿vale?
¿Qué os parece si nos hacemos un selfie?
Porque decíamos que no íbamos a ir a la sala, de hecho ya sabíamos que en la primera fila,
pues lo típico, que da vergüenza, ¿no?
Que parecen los invitados, los bip y nunca vienen.
Entonces, ¿qué os parece si nos hacemos un selfie?
¿Guay?
Quien no quiera salir, el que no le haya dicho a la novia que iba a venir,
sabe, le digo, que estoy currando hasta muy tarde.
Pues que haga así, ¿vale?
Y ya está.
Entonces, vamos ahí.
¿Vale?
Ahora al otro lado, a los que...
Oye, el que decía que no le gustaba el frontend está así.
¡Que me da vergüenza!
Que se van a tirar, que he ido a una cosa de frontend.
Sí, porque lo voy a postear por ahí.
Pues nada, esto es el frontend del futuro.
El frontend del futuro.
La verdad es que a mí es una charla que me hace muchísimo ilusión,
porque me encanta el frontend, espero que a vosotros también,
al menos que lo disfrutéis, como está ahora.
Pero vais a ver que hay muchas cositas en el futuro del frontend
que llaman muchísimo la atención y son súper prometedoras.
Quizás algunas las habéis visto, espero no decepcionaros mucho,
así que vosotros os sorprendéis el triple para las que no eso habéis visto.
Para compensar, ¿vale?
Entonces, soy Miguel Ángel Durán.
Tengo un Twitter maravilloso donde hablo muchísimo de frontend,
así que todos los que habéis levantado la mano, pues que sepáis que ahí hay más frontend todavía.
Y también tengo un canal de YouTube por si me queréis ver en movimiento,
hablando, haciendo vídeos también de frontend, ¿vale?
Trabajo como enabler frontend aquí en ADVINTA.
Como veis aquí, esta es la A de ADVINTA.
Muchos de vosotros seguramente no conocéis ADVINTA,
espero que ahora sí, porque habéis tenido que llegar hasta aquí,
o los que nos estáis viendo en streaming.
¿Cuál es mi cámara?
Esa.
Para los que nos estáis viendo en streaming, pues bueno, que sepáis que esto es ADVINTA.
¿Qué es ADVINTA?
Muchos de vosotros lo conoceríais por el nombre anterior,
que era Xistet Spain, que a la mitad de la población española le costaba pronunciarlo, ¿vale?
Y le cambiamos el nombre solo por vosotros, para que veáis que pensamos en vosotros.
Entonces, dije, pues vamos a poner un nombre más fácil, vale, ADVINTA.
Por ADVINTA es verdad que tampoco nos conoce mucha gente,
pero ¿qué pasa con ADVINTA?
Pues que somos un especialista en marketplaces,
y tenemos pues algunos productos que sé que conoceréis,
o espero que conozcáis más, como Fotocasa, Coches.net e Infojobs.
Y tenemos muchos más, como Habitaclea, ¿vale?
Ya hemos visto lo de Habitaclea.
¿No ha puesto mi logo?
Habitaclea también.
Yo me voy a sorrir porque es verdad, ¿sabes?
Ya está con el lado.
¿Veis cómo no lo ha puesto?
Sí, sí, sí, lo iba a decir.
¿Vale?
Tenemos Habitaclea, tenemos Melanuncios, también tenemos Vivo,
tenemos un montón más, ¿vale?
Que veáis que no las hemos puesto todas aquí, pero hemos puesto unas cuantas.
Las hemos puesto todas porque no cabían, ¿vale?
Porque es que ADVINTA es una multinacional,
y tenemos marketplaces por todo el mundo.
Entonces, ¿cómo quiero empezar un poquito mi charla?
Pues recordando a un científico relativamente conocido, ¿vale?
Que decía, nunca pienso en el futuro porque llega demasiado pronto.
Es este momento de comunión entre nosotros, qué profundo.
Tenía que poner una cita célebre porque si no bajaba mucho el nivel.
Pero esta frase yo lo que tengo que decir es que este hombre no tenía ni puñetera idea,
porque se notaba que no era frontend.
¿Ok?
Esto jamás lo diría un frontend.
¿Por qué?
Yo digo por qué.
El Pogo Ranger lo dice por qué.
Para este Pogo Ranger el futuro nunca ha llegado demasiado pronto, ¿vale?
Para él le gustaría que el futuro estuviese ya aquí y se tuviese que olvidar de ese maldito logo.
Y es que...
Y aquí si queréis nos podemos dar la mano todos, ir viendo como la cuenta atrás, va hacia atrás.
Agarrémonos la mano, por favor.
No, no, no, no, no, no, no, no hace falta.
Es ese momento incómodo desde...
Yo a este no lo conozco ni nada.
Ah, está bebiendo cerveza.
Bueno, total, no os preocupéis.
Para la muerte de Internet Explorer 11 solo quedan 6 años, 5 meses, 0 días, 13 horas, 0 minutos, 42 segundos, 40 segundos...
Vale, hasta que baje una hora vamos a quedarnos aquí, ¿vale?
Vale, no, vamos a hacer el cálculo rápido.
2025.
Si esa es nuestra cara cuando nos viene un cliente o nosotros mismos en la de Vinta Protección...
No, es que hay que soportar...
¿Lo has probado en Internet Explorer 11?
Pues no.
Pues que sepas que hasta 2025 lo vas a tener que probar en Internet Explorer 11.
Bueno, nosotros en la de Vinta tenemos...
Nuestros marketplaces están más o menos sobre el 1%, ¿vale?
Pero sigue siendo demasiado.
Un 1%, una vez que a 100...
Pues queremos que todavía puedan seguir utilizando nuestros productos.
Pero bueno, por eso decía que ese hombre no era frontend.
Porque para nosotros nunca llega el futuro demasiado pronto.
Nosotros queremos que llegue ya.
Por eso, pues en el frontend tenemos como coches como este, tan guays, ¿no?
Y aquí no sé... ¿Cuántos de vosotros ha visto Regreso al Futuro?
Vale, vale.
Los que no, yo no estaría aquí.
O sea, yo iría a casa...
Vería la mejor trilogía de ciencia ficción de la historia, ¿vale?
Pero ya.
Entonces, Regreso al Futuro.
Básicamente, como todos lo conocéis, no os lo voy a explicar toda la historia, ni os voy a expolir ni nada.
Pero básicamente tenía el condensador de flujo, dependiendo de los fans que seas, en el que le permitía al coche viajar en el tiempo y tal, ¿no?
Es básicamente este, pero pisgelado.
Muy bonito, muy potente.
Molaba, ¿no?
Tenía unos efectos especiales bastante tremendos para la época.
Entonces, nosotros, de alguna forma, esto es lo que él utilizaba y al principio necesitaba Plutonio y luego, ya ves tú, le echabas una lata a Coca-Cola y ya podía viajar.
Era la hostia.
Pero nosotros en el frontend también hacemos algo parecido, ¿vale?
Le meto un poquito de Webpack, un poquito de Babel y venga, ¡pum! A viajar al Futuro.
Genial.
Vamos a ver un poquito de esto, más en detalle, ¿no?
Babel, que como sabéis, pues transforma nuestro JavaScript.
JavaScript no solo es para hacer JavaScript en el futuro, sino que nos permite hacer transformaciones tan guays como soportar JSX de React,
que eso, aunque no está en la especificación de JavaScript, nos ayuda a desarrollar.
También tenemos esto, ¿vale?
No es una secta.
Yo siempre que pongo este logo, la gente como que se asusta, ¿no?
Matarán un gatito en la charla, no.
No vamos a hacer nada.
Este logo es el post-CSS, que es como el Babel, pero para el CSS, ¿vale?
No tengo ni puñetera idea por qué hicieron un círculo con sangre.
No lo sé.
No lo sé si era para intentar matar Internet Explorer, por fin.
No lo sé, no lo sé.
También utilizamos Webpack, ¿vale?
De hecho, Babel y post-CSS se llevan muy bien con Webpack.
Y utilizamos Polifil.
Yo busqué Polifil en el internet y me salía eso.
Y entonces descubrí, descubrí, y esto espero que esta sea la enseñanza de la charla,
que Polifil en inglés significa con lo que se rellenan las cosas.
¿Sabéis esas...?
Este dice, sí, sí, sí, sí, sí.
¿Cómo no lo sabías?
Y eso lo dan en el cole.
Yo no tengo ni puñetera idea, ¿vale?
Es como el algodoncillo ese con el que se rellenan las cosas.
Y dije, hostia, tiene sentido, ¿no?
Porque así rellenan las funcionalidades que faltan en el navegador.
Ah, no está mal.
Entonces, os quiero avisar.
Os quiero avisar de algo.
Esta charla es mi opinión.
Mi opinión de mierda, seguramente, ¿vale?
Pero mi opinión, después de haber trabajado en un mini proyecto que he hecho yo,
que le he llamado, pues, un nombre súper original, porque va de noticias,
y dije, pues, de news, ¿vale?
Y he intentado hacerlo solo con tecnologías que nos da la plataforma, la web,
aunque sean un poco del futuro, sin ningún tipo de librerías.
Y si he tenido que crear algo, lo he creado yo mismo, ¿vale?
Y son un poco mis aprendizajes.
Hay cosas que, a lo mejor, ya estáis acostumbrados a utilizar en vuestro frontend,
porque, por suerte, con herramientas como Webpack, Webpack, Babel, etc.,
pues, ya nos permite utilizarlas.
Y hay otras, que a lo mejor no las conocéis, y las vamos a descubrir.
Así que, nada, vamos a montarnos en el cochecito,
leredle, y vámonos pa'lante.
El frontend del futuro tendrá menos bundelizadores,
pero algo habrá, ¿vale?
Aquí tenemos una escena de la película de Matrix,
que está súper guay cuando ahí está Neo aprendiendo Kung Fu y un montón de cosas,
y le dice, mira, aquí en el disquet, te puedo enseñar Tai Chi.
¿Vale?
Entonces, Webpack, básicamente, nos ayuda a gestionar las dependencias, los módulos, ¿vale?
Entonces, el problema que muchas veces tengo de Webpack,
y me sorprende, ¿no?, que todavía lo veo en Twitter,
que hay gente, acabo de utilizar Webpack por primera vez,
y como que no le gusta, ¿no?
Y ponen esta cara de Neo así como...
¡Ah, Webpack, es muy difícil!
Es verdad, ¿no?
Tiene una coroa de aprendizaje un poquito complicada,
aunque poco a poco se está haciendo más sencillo.
Pero Webpack nos ha ayudado mucho a, justamente, el tema de las dependencias.
Porque, ¿qué pasa?
Que antes las dependencias las teníamos así, ¿no?
Teníamos un index.html, y para cargar las dependencias,
pues primero teníamos que hacerlo, encima, al revés, ¿no?
Queríamos utilizar útils en el index.js,
pues primero teníamos que cargar útils.
Y luego teníamos que cargar los components, y luego el index.js.
Pero además esto tenía un montón de problemas,
porque estaba en el scope global, bueno,
un montón de sinsentidos que no iban a ningún sitio.
Era muy complejo.
De hecho, el otro día vi el desarrollo de un compañero,
y tenía treinta y pico líneas así de scripts y tal.
Y yo, ¿cómo sabes el orden?
¿No te vuelves loco?
Y dices, uf, ¿cuántas horas me he tirado yo aquí?
Y yo, vale, tú mismo.
Pues nada, pues por suerte tenemos una nueva tecnología
que muchos de vosotros y vosotras seguramente ya estáis utilizando
gracias a Webpack, que son los imports, ¿no?
Pero los imports tienen un nombre, básicamente son los Enmax Script Modules.
¿Cómo funciona esto exactamente?
Básicamente le decimos, oye, impórtame esto de tal sitio.
Y ya nos lo importa.
Así que podríamos tener nuestro archivo index.js
y arriba declararle qué dependencias o módulos queremos importar.
Por ejemplo, podríamos tener un import nombrado,
que sería la primera línea,
que le decimos queremos importar el módulo nombrado repetir del archivo lib.js.
Y la segunda línea tendríamos un import que está importando un módulo
que se está exportando por defecto.
Y por defecto tendríamos a gritarle.
Podríamos poner el nombre que quisiéramos, ¿vale?
Y luego en ese mismo archivo ya podríamos utilizar los módulos que hemos importado.
Aquí sería como estaríamos exportando el primero, ¿vale?
El de lib.js.
Como veis, estamos exportándolo con un nombre en concreto
y por lo tanto ese nombre en concreto lo tenemos que utilizar después.
No podemos poner otro, tiene que ser ese, repetir.
Y en este caso, sí que estamos haciendo esa exportación por defecto
y por lo tanto lo podemos nombrar como que grabamos cuando lo importemos.
Vale, estos serán los enmascriptmódulos.
Para que veáis la sencillez que tiene esto,
esta es la estructura de archivos que tendríamos en nuestro proyecto, ¿vale?
Un index.html que básicamente importaría el index.js
y el index.js a su vez sabría qué dependencias tiene que importar
e importaría los dos módulos, el lib.js y la voz.js, ¿vale?
Adiós webpack.
Así es como se mostrarían las peticiones en el navegador.
Básicamente haríamos la petición del html,
luego se descargaría el index.js
y el index.js sabría las dependencias que necesita
y se las descargaría además en paralelo.
O sea, no esperaría a descargar una y luego descargar la otra, ¿vale?
Él sabría pues parsear el archivo y descargarse las dependencias que necesita.
Básicamente sería lo que vemos abajo a la derecha, el código y las peticiones arriba.
Muy bien, pero una de las cosas más interesantes que puede ser que tenga webpack
es cuando tratamos con módulos, módulos que son externos a nuestra aplicación.
Por ejemplo, si queremos utilizar React o queremos utilizar cualquier librería,
pues utilizamos los node modules.
Pero, ¿qué pasaría si directamente en nuestro archivo pudiéramos importar una librería externa?
Nada que nos molaría hacer un import y decidirle en la URL e importar esa librería y ya está.
Pues así es como lo estamos haciendo ahora.
Hacemos un script, le decimos la dependencia externa en la URL,
pero claro, tenemos el mismo problema que antes, ¿no?
¿Cómo lo podríamos solucionar?
Pues simplemente decimos la URL.
Los mscript modules nos permiten también cargar dependencias externas,
donde solo le tenemos que indicar la dirección de esa dependencia
y ya la podemos cargar en nuestra página.
Esto, como podéis imaginar, es súper potente.
Aquí en este ejemplo, en un solo archivo,
tenemos importar la dependencia de pre-act
y ya la estamos utilizando en el mismo archivo.
Pero uno se pregunta, ¿qué clase de magia es esta?
Si esto es síncrono, pero se descarga la dependencia
y luego lo descarga, pues no nos tenemos que preocupar por eso, ¿vale?
Porque el navegador es lo suficientemente inteligente
para saber que hasta que no termine de cargar esta dependencia,
no tiene que seguir ejecutando el código que tiene en esa página.
Esto es súper importante,
que sepáis que no todas las librerías que hay ahí fuera
las podemos cargar así, de esta forma.
Ojalá, esto ya sea la bomba.
Pero tenemos servicios como Pica que nos permite buscar
qué librerías sí que podemos utilizar con ECMAScriptModules.
En este ejemplo podemos buscar Pre-act
y vemos que Pre-act sí que soporta los ECMAScriptModules.
Además nos da diferente información,
cómo lo que ocupa, cuándo lo han actualizado,
qué es cero dependencias,
que lo suelen actualizar bastante,
que tiene TypeScript.
Si buscamos React, por ejemplo,
dice que ha encontrado el paquete,
bueno, los que igual se ve muy chiquitito, ¿vale?
Pero dice que ha encontrado el paquete,
pero no es compatible con ECMAScriptModules.
Por lo tanto, que sepáis que tenéis buscadores
que os puede permitir ayudaros a buscar
este tipo de dependencias, ¿vale?
Que sean compatibles con los nuevos ECMAScriptModules.
Básicamente, las peticiones que veríamos
en la pestaña Nickworks son muy parecidas
a las que hemos visto antes.
Cargaríamos el index.js
y el index.js tendría este import
que lo que haría sería descargar
la dependencia que necesitamos.
Y una vez que la descarga,
ejecutaría el resto del fichero, ¿vale?
Si tuviéramos más dependencias,
el navegador sabría hacer las peticiones en paralelo
y esperarlas para seguir ejecutando el código.
Pero todavía hay más.
Y ahora está muy de moda en Webpack
hacer code splitting,
pero esto no es una cosa que sea de Webpack.
Esto realmente lo tiene en nuestro propio lenguaje.
Esto lo tenemos ya con los ECMAScriptModules.
Se llaman imports dinámicos.
Y básicamente lo que nos permiten
es descargar módulos de forma totalmente asíncrona,
de forma que nos devolverá una promesa
para que cuando se haya cargado
podamos hacer algo con este módulo.
Imaginad, por ejemplo, que tenemos un botón
que queremos que cuando hagamos clic
tengamos que enseñar una modal
que es muy tocha, que tiene muchísimas dependencias
y que tiene muchas cosas que al final ocupan mucho.
Claro, obviamente no vamos a querer
cargar siempre esta dependencia para nuestros usuarios
porque a lo mejor la modal
solo la ven un 5% de nuestros usuarios.
¿Vale?
Esta es la persona que ve la modal, ¿vale?
Que se pone nerviosa.
Tranquila.
Si solo hay que darle un clic.
Entonces, lo que vamos a querer
es que cuando le demos clic a ese botón
importemos de forma dinámica este módulo
y cuando se haya resuelto la dependencia
entonces la utilicemos.
En este caso, esto es código bastante real
del proyecto del que os hablaba
para las rutas.
Podemos hacer exactamente lo mismo.
No hace falta que sea una interacción
del usuario con un botón.
Lo podemos hacer en cualquier cosa.
En este caso, lo estamos haciendo
para detectar que cada vez que la ruta navega
entonces vamos a descargar la ruta
que necesita el usuario.
¿Vale?
De esta forma estamos optimizando muchísimo
la performance y la experiencia del usuario
en nuestro sitio.
Entonces, la pregunta sería
¿cómo empiezo a usarlo?
Porque a lo mejor muchos de vosotros
todo esto que os he dicho
pues ya estáis ahí
esto ya lo he visto en Webpack
pero a lo mejor no lo habéis probado todavía
en vuestros proyectos con index.html.
¿Cómo empezamos a utilizar esto?
¿Esto es como lo hacíamos antes?
¿Qué tengo que hacer?
Pues básicamente borras todo eso
le prendes fuego
te miras al espejo
eres feliz
y luego
solo tienes que añadir esta línea.
¿Vale?
Haces un script
le dices que el tipo de este script
es module
y le dices el source
en este caso el index.js
pero claro
alguno de vosotros
me estará mirando así
bueno, pero yo no puedo hacer esto
porque a lo mejor yo tengo que soportar
los navegadores
que no son compatibles con esto.
No te preocupes
esto está todo pensado
está todo inventado.
Así que podéis añadir otra línea
con el atributo no module
de forma que podáis hacer un fallback
de hecho
esto es una técnica
que se utiliza mucho
y también es compatible
totalmente en Webpack
para darle a los usuarios
dos versiones
de vuestra aplicación
una
la moderna
con menos polyfields
y cosas
porque
es un módulo
que está
destinado
a los navegadores modernos
y otro
que tiene mucho más polyfields
muchas más transformaciones
de Babel
que está destinado
a los navegadores
que no soportan los módulos.
¿Vale?
Pues vamos a verlo
un ejemplo rápido
de todo esto
esta es mi pedazo
de aplicación
no hay ninguno
UX en la sala
¿verdad?
Vale, esquivada
vale, porque el diseño
lo hice yo
y bueno, sí
tengo un gusto
un poco extraño
parece que soy del tónico
pero el caso
que esta es la aplicación
funcionando
y lo que os quiero enseñar
básicamente
vamos a recargarla
voy para arriba
tenemos la app.js
¿vale?
Vamos a ver primero
el HTML
si miramos el HTML
ya vemos
en esta línea
no sé si lo podéis ver
en esta línea
tenemos un script
de tipo módulo
que básicamente
su source
es el main app.js
¿vale?
Este main app.js
lo tenemos aquí
y ya veis
que básicamente
está importando
los módulos
que necesitan
para funcionar
tiene los polyfields
los eventos
el componente del logo
carga unos eventos
bueno, carga un montón de cosas
esto está dos veces
esto no podría haber pasado
una PR
el caso
el caso
si vemos aquí
en la main
podemos observar
como
incluso cuando se estaba
descargando
el app.js
el navegador
como estaba descargándose
el fichero
ha sido capaz
de parsear
las primeras líneas
y ya ha detectado
las dependencias
que iba a tener
el app.js
de forma que
antes de descargarse
de todo el fichero
ya ha sido capaz
de ir descargándose
los que iba necesitando
el app.js
como el polyfields
el events
el component
y el logo
que hemos visto
¿vale?
esto básicamente
son estas líneas
de código
que vemos aquí
pero
en el network
muy bien
consideraciones
porque claro
uno cuando tiene
un montón de módulos
pues le llegan así
como al pobre neo
un montón de balas
por todos los lados
y
esto está muy guay
pero tiene unas implicaciones
que tenéis que conocer
esto que no se ve
muy bien
es básicamente
la cadena
de dependencias
que tiene
tu aplicación
utilizando módulos
para poder
inicializarse
¿vale?
con Webpack
muchas veces
lo que hacemos
es un paquete
un solo paquete
que se carga
o diferentes trozos
de paquetes
pero normalmente
está bastante unido
¿vale?
sabe hacer el árbol
de dependencias
y dice bueno
estas dependencias
van todas juntitas
pero como habéis visto
aquí esto no pasa
¿vale?
aquí se está descargando
cada una de ellas
a cholón
y de forma totalmente
separada
¿vale?
entonces
es importante
que para utilizar
este tipo de desarrollo
tengáis que utilizar
tecnologías como
HTTP2
¿vale?
porque nos permite
tener un montón
de requests
de forma paralela
también es interesante
este logo del medio
que parece un zarpazo
súper extraño
esto es una tecnología
de compresión
que tiene Google
que se llama Broly
que no tiene nada que ver
con el malo de Dragon Ball
¿vale?
sino que
se llama Broly
no sé muy bien por qué
pero el caso es que
es muchísimo más óptima
que Gezip
lo cual nos permite
descargar muchas más cosas
en el menor tiempo
posible
y aún así
con todo esto
que os he explicado
yo creo que en el futuro
veremos algún tipo
de bundelizador
quizás no veremos
bundelizadores
tan sofisticados
como vemos
como Webpack
o sí
pero ya existen
algunos bundelizadores
como uno llamado
PikaWeb
del mismo creador
que el buscador
de módulos
compatibles
que hemos visto antes
que nos permite
de alguna forma
unificar
y minificar
todas estas dependencias
si os estáis preguntando
sobre el soporte
pues un 84%
de todos navegadores
lo cual está bastante bien
¿vale?
y los impostos dinámicos
tienen un 77%
como ya veis
¿no?
esta vez a la parte en rojo
vaya
no me lo esperaba
que he hecho precha
que he hecho precha
muy bien
pero bueno
hemos dicho que esto
es el frontend del futuro
nada de caras largas
porque yo creo
sinceramente
que en el futuro
un día llegará
donde Internet Explorer
ya dejará de ser
una molestia
¿no?
podremos ir tranquilamente
nos acercaremos al icono
con la ilusión
¿no?
la ilusión de ver
ir ahí
mira que está contento
y todo ¿no?
y tirarlo a la papelera
y el reciclaje
por fin
¿vale?
así que como este día
va a llegar
a tomar por saco
todo en verde
100% compatible
y todos contentos
así que ya mismo
podéis utilizar esto
en vuestros proyectos
es que si no sería
frontend del futuro
es no
frontend del futuro
pero tened cuidado
que no
100% ¿vale?
todo verde
el caso
web components
más web components
en frontend del futuro
tenemos más web components
pero tampoco nos pasemos
tampoco habrá tantos
y os voy a explicar por qué
a mí me encanta
yo no sé vosotros
pero a mí me encanta
¿cómo pensaba
que iba a ser el futuro
hace 20-30 años
y cosas así?
o como este caso
que eran 100 años
¿no?
y cómo pintaban
los coches voladores
y todo esto
esto es como veían
el año 2000
¿vale?
taxis ballena
¿por qué?
no sé
no sé
pero además
la ballena
tiene una cara de mala hostia
que no me extraña
¿sabes?
o sea
voy a reventar a alguien
bomberos voladores
¿dónde?
para
a ver si alguien me explica esto
¿vale?
para arreglar el fuego
tenías que sacrificar
a un bebé
yo
no sé
y hombre
una hacha
a ver
yo no te voy a ayudar
el hacha
y que da igual
que físicamente
es imposible
que estas salas vuelen
o sea
bueno en fin
así nos veían
en el año 2000
pero este es mi favorito
este es mi favorito
este es como
íbamos a aprender
en el año 2000
sé que hay muchos
de vosotros aquí
que estáis en Skylab
y lo estáis dando todo
¿vale?
cagaban un yuhu
los que están en Skylab
o en un bootcamp
¿vale?
se ha reído más gente
que le ha dicho
y no deben estar muy contentos
bueno pues
no os preocupéis
si vosotros creéis
que estáis sufriendo
mirad
como pensaba
que iba a ser
el tema este
mirad ese
que cara tiene ese niño
de ay
me están metiendo
por la cabeza
algo que
entonces yo lo que he hecho
es seguir el cable
por aquí
y he visto
que el libro
tiene algo
yo
yo no he hecho nada
o sea
esto era así
la imagen
la imagen era así
¿vale?
este es día
y hace 100 años
¿quién de vosotros
está dándolo todo
con angular?
nadie levanta la mano
¿sabes?
ya acojonado
joder
si hace 100 años
ya sabían que ibas
una mierda
bueno pues
yo lo digo yo
mirad el niño
¿vale?
o sea el niño
está aquí
sufriendo
¿vale?
entonces bueno
lo que pensaban
es que iban a triturar
libros
ya sabían
que lo importante
es aprender
frontend
estaban triturando
libros
y los metían
con descargas eléctricas
en la cabeza
para que luego
penséis
que duro es el bootcamp
en fin
2011
¿por qué os cuento
todo esto?
¿no?
porque esto
de los web components
esto viene del 2011
que es que ahora está de moda
porque bueno
hay alguna web que lo usa
2011
¿alguien se acuerda
lo que hacían 2011?
yo no me acuerdo
pero sí que sé
que estaba jQuery
ahí dándolo todo
era la hostia jQuery
en ese momento
no sé cuántos de vosotros
ha utilizado jQuery
¿cuántos ha utilizado jQuery?
ahí está
corazón
bien
¿cómo lo hemos disfrutado?
a él
bueno
que lo echa de menos
allí tengo auguro
que está sonriendo
el palo
mira la hostia
mira la mierda
esta
ría
joder
es verdad
puede ser
todos hemos pasado por ahí
tengo un lado
en nuestro corazóncito
había cosas
súper
súper
prometedoras
era una red social
que lo iba a petar mucho
no sé si la conocéis
era increíble
¿qué pone?
Google Plus
bueno pues ese año
salió Google Plus
una de las mejores películas
de Marvel
Thor
que lejos ha llegado
teniendo en cuenta todo esto
salió el iPhone 4S
y una cosa que está
ahora muy de moda
¿no?
anda
ya lo sabíais
empezó Juego de Tronos
y ahora está terminando
ahora es cuando
todos nos damos cuenta
joder que viejos somos
que yo empecé
Juego de Tronos
y mira que joven
se veía a Tyrion
aseado
y todo
bueno pues imaginaos
en ese año
que pasó todas estas cosas
salieron los web
pensaron en los web components
anunciaron los web components
hostia que estamos en 2019
ya llovido
pero básicamente
la idea que tuvieron era
no llegamos
no llegamos a hacer
suficientes elementos
tenemos que crear
una forma
de que
los desarrolladores
creen sus propios elementos
¿vale?
para que no nos tengan que esperar
entonces podíamos tener
pues elementos en el HTML
como el
kit en image
¿no?
podríamos hacer un elemento
que
al utilizarlo en nuestra página
pues enseñase la imagen
de un gatito
básicamente
iba a ser
es algo así
creamos una clase
con el nombre
kit en image
extendemos
de
HTML
element
y esto nos permite
crear nuestro propio elemento
del HTML
para hacer que esto funcione
tenemos que definir
este elemento
con el nombre
que queremos utilizar
kit en image
y luego
con un segundo parámetro
le decimos
cual es el elemento
que hemos creado
que queremos
que se defina
con esa etiqueta
lo único que debíamos hacer
y que tenemos que hacer
para utilizar
web components
o custom elements
en este caso
web components
son un montón de tecnologías
entre ellas
custom elements
es cargar un
javascript
como el javascript
que hemos visto
¿vale?
y utilizar la etiqueta HTML
lo cual como idea
es brutal
esta sería la implementación
de nuestro kit en image
voy a pasar muy por encima
pero básicamente
estamos utilizando
una tecnología
que es el Shadow Dome
que básicamente
es poder tener
un árbol de elementos
dentro del árbol de elementos
y que además
sea totalmente agnóstico
al de fuera
por lo tanto
podemos tener
el estilo
estilar
las imágenes
de dentro de ese Shadow Dome
de forma que no colisione
con ningún estilo
que tengamos fuera
súper potente
y es una idea brutal
además
lo único que tenemos que hacer
es renderizar el HTML
que queremos
en este caso
es una imagen
que básicamente
va con un source
y no va a ser un gatito
para que veáis
básicamente por pasos
extender HTML element
hacemos que este elemento
quede en el Shadow Dome
unido
y dentro de ese Shadow Dome
lo que hacemos
es renderizar este HTML
en el HTML
directamente ponemos
los estilos
porque como es un Shadow Dome
estos estilos en línea
no van a colisionar
con ninguno de fuera
brutal
finalmente
pues lo que hemos dicho
definir el elemento
le decimos la etiqueta
y el componente que es
y esto
queda así
básicamente
ahí tenemos un gatito
muy contento
y como lo veríamos
en los elementos
de las herramientas
de desarrollo de Chrome
por ejemplo
sería así
nos indicaría
que es un Shadow Root
y que dentro
tenemos este elemento
estas son las expectativas
¿no?
uno
la cabra
es un Web Component
básicamente
¿no?
que uno
se une en sí mismo
con los Web Components
puede hacer cosas maravillosas
mientras te pasea por encima
y luego pues esta es la realidad
¿vale?
los Web Components
te superan
te van a dar
muchos problemas
tal y como están
¿vale?
¿por qué?
porque esto funciona así
los Web Components
es una tecnología
que está muy cerca
de la plataforma
y por lo tanto
tiene ciertas cosas
que no están pensadas
justamente
para ser
fáciles
de utilizar
a otro nivel
tenemos ya
muchas librerías
que nos están ayudando
a utilizar
los Web Components
y que son súper interesantes
como puede ser
Stencil
o algunas
que son compiladores
que escribes
y ellos
los que hacen
es transpilar ese código
como hace Babel
y te lo transforma
en Web Components
pero te quita
toda la complejidad
que necesitas
para utilizar
estos Web Components
y a otro nivel
de abstracción
tenemos librerías
como React
como Angular
Angular
es que no me sale el nombre
View
¿vale?
no
como React, Angular y View
básicamente
son otro nivel
de abstracción
¿vale?
están jugando
en otra liga
por lo tanto
yo
por ejemplo
para utilizar
los Web Components
en este proyecto
y lo siento por ello
he tenido que crear
mi propio React
¿por qué?
porque gestionar
algo tan sencillo
como el estado
en un Web Component
no es trivial
¿vale?
el que se renderice
cada vez que haya un cambio
por pequeño que sea
no es trivial
el hecho
de que tenga
un estado inicial
tampoco es trivial
o que tenga estilos
y que sea fácilmente
que no tengas que repetir
continuamente tu código
entonces
esto funciona
porque lo está funcionando
en mi proyecto
pero puedo asegurar
que esto haría llorar
a mucha gente
¿vale?
sobre todo
a este chico de aquí
¿vale?
que es el siguiente
Loesno
entonces
para el que no lo conozca
es uno de los
Core Contributors
de React
nunca se lo enseñaría
¿vale?
porque seguramente
me arrancaría la cabeza
un bocado
pero tuve que hacer
algún tipo de librería
por pequeña que fuese
para que me ayudase
a utilizar los Web Components
en mi proyecto
entonces
a la pregunta
si los Web Components
es la muerte
a las librerías
la respuesta
es no
y menos
a este tipo de librerías
creo que poco a poco
vamos a ver librerías
mucho más interesantes
como puede ser
ya estamos viendo
como Polymer
Skate.js
Stencil
y muchas más
que vendrán
que van a utilizar
como base
los Web Components
para que ocupen menos
pues para que veamos
utilidades mucho más interesantes
pero hasta ahora
no va a matar nada
es verdad que estamos viendo
cada vez más proyectos
que están utilizando
Web Components
en producción
como puede ser GitHub
¿vale?
pero os puedo asegurar
que me ha costado
encontrarlo
¿vale?
decían que GitHub
está utilizando
Web Components
ya ya
pero tampoco muchos
están utilizando
en cosas en concreto
muy especialitas
y que son muy sencillas
¿vale?
dicen que cada vez
los quieren utilizar más
y es verdad
y todos queremos
utilizarlos más
pero bueno
como podéis ver
aunque decía
que GitHub
utilizan mucho
me ha costado encontrarlo
no os quiero
aburrir mucho más
con los Web Components
pero básicamente
por ejemplo
aquí tendríamos uno
este
el logo mismo
es un Web Component
tiene todo el sentido
porque el logo en sí
no tiene mucha interacción
como podéis ver
estoy utilizando
está extendiendo
de Component
que es la librería
que he creado
mi pseudo-react
del que no estaría
orgulloso
y que no voy a enseñar
de hecho
veréis
cuando entréis
en GitHub
si queréis
para ver el código fuente
lo he ofuscado todo
¿vale?
para que no
nadie pueda decir
esto lo ha hecho
este chico
no
no, no, no
lo he ofuscado
no, es mentira
está, está
es una vergüenza
pero
entonces
y aquí tengo
básicamente lo de renderizar
que me ayuda
tengo un método render
que me ayuda
a decir lo que quiero renderizar
en mi Web Component
pero no dejan de ser
Web Components
si vamos al código
tengo aquí un montón
de componentes
voy a ver si tengo
alguno puro
porque alguno
alguno habré dejado
este por ejemplo
para el fab
para hacer el favorito
que luego veremos
veis que tiene
su propio ciclo de vida
como el connected callback
que sería una especie
de component inbound
para los que conozcáis React
que básicamente nos dice
cuando está preparado
el elemento
y podemos
evidentemente
dentro del root
coger selectores
y añadirle los eventos
que necesitemos
¿vale?
los Web Components
pueden ser súper interesantes
para elementos
que tengamos en el DOM
que no necesitan
mucha interactividad
si no
lo mejor
es utilizar algún tipo
de librería
que os pueda ayudar
así que
es verdad
que vamos a tener
futuros Web Components
pero tampoco nos pasemos
el frontend del futuro
es más extensible
y esto me encanta
básicamente
es muy típico
en nuestros proyectos
en el frontend
importar
la típica librería
que tiene un montón
de utilidades
como puede ser
Lowdash
como puede ser
Underscore
o cualquier tipo
de librería
que sea una utilidad
que os podáis imaginar
¿no?
y esto es un problema
en realidad
¿cuánta gente
está utilizando
Lowdash
en sus proyectos?
¡buah!
¿quién está utilizando
Lowdash
aquí en sus proyectos?
ahora
joder
dos personas
pero voy a editar
el slide
¿vale?
porque
bueno
Lowdash
Underscore
incluso aunque no lo sepáis
que eso es lo peor
y es bastante potente
o sea
ocupa bastante
Lowdash
lo que tiene
es una colección
de utilidades
pues para manejar objetos
arrays
incluso tiene algunos
de tiempo
strings
tiene un poco de todo
¿no?
sería algo así
importar Lowdash
from Lowdash
pues
una de las cosas
que siempre le ha faltado
a Javascript
precisamente
es tener
este tipo de utilidades
en el propio lenguaje
entonces
¿qué pasaría
si pudiéramos hacer
un import
de una utilidad
desde
algo que fuese
nativo del lenguaje?
estaría súper guay
que en el futuro
pudiéramos hacer eso
excepto
que ya lo podemos hacer
ya existe
la primera
librería utilidad
en Javascript
que está dentro
del estándar
y es la de Storage
¿vale?
ya está disponible
en las últimas versiones
de Chrome
y viene a sustituir
lo que todos conocemos
como local storage
porque tiene una API
más sencilla
puedes guardar
cualquier tipo
de información
y además
es asíncrona
que no es el caso
de local storage
para utilizar storage
que básicamente
lo que quiere decir aquí
para Rob
pone
std
es de standard
kv es de key value
y storage
lo único que hay que hacer
es importarlo
y luego
para recuperar
todo lo que se está guardando ahí
pues podemos hacer
una wait
porque esto es asíncrono
y cogemos
justamente la key
que queremos recuperar
en este caso
las preferencias
entonces ya tendríamos
en all preferences
todas las preferencias
que teníamos guardadas
en nuestro storage
y luego
para setearlas
lo mismo
es asíncrono
tendríamos que hacer
una wait
y podemos hacer
un set
con la key
y luego
la value
esto
lo estoy utilizando
en mi proyecto
por ejemplo
si entro aquí
en esta noticia
puedo
bueno
en este caso
es que todavía
la tenía de favoritos
la he quitado
puedo añadir un favorito
y en la lista
de favoritos
aparecerá
para buscar esto
vamos a
buscar el código
vale
storage
y aquí lo tenemos
en la keyfabs
estoy guardando
todos los favoritos
cada vez que se hace un click
con los que ya había
y el nuevo
que quiero añadir
o quitar
en el caso
que ya estuviera
vale
y para recuperarlos
lo único que tengo que hacer
es recuperar de esta key
y por defecto
tengo que decir
que hay algo
porque si no
me darían define
pero que pasa
porque claro
que pasa si no existe
ese es el problema
porque es verdad
tenemos una librería
que es estándar
para javascript
pero
como vamos a hacer
para saber a veces
si existe
y otras veces que no
que ocurre
si de repente
yo quiero utilizar
esta librería estándar
intento el key value
storage
y resulta que no está
la hemos liado a parda
imagínate
tú eres feliz
pum
no está
vale
tú crees que está
y de repente
pum
no está
entonces
¿por qué nos reímos
de las desgracias?
bueno en fin
¿cómo podemos solucionar esto?
molaría
de alguna forma
decirle a nuestro navegador
darle un mapa
y decirle
cuando tú intentes
ir a por el key value storage
te voy a intentar decir
dónde lo tienes que ir a buscar
porque quizás no lo tienes
esto
se le llaman
import maps
vale
los import maps
son etiquetas en línea
de javascript
que básicamente
lo que nos permiten
es indicarle al navegador
dónde tiene que buscar
esos módulos
que le estamos indicando
esto lo que nos va a permitir
es que cuando
nosotros hagamos
un standard
keyboard storage
en el caso
de que no esté
le podamos dar
un fallback
y decirle
no no
carga un polyfill
y además
como hemos visto
que esto
lo va a hacer automáticamente
y va a esperar
a que el polyfill se cargue
fijaos la de soluciones
que nos está dando
a un montón de problemas
del desarrollo frontend
que hemos tenido hasta ahora
a la hora de cargar polyfill
que los cargábamos
cuando no necesitábamos
cuántas veces
nos ha pasado eso
por suerte ahora
hay algunos polyfill
que los podemos cargar
de forma asíncrona
pero hay otros
que no podemos
entonces
lo que tenemos que hacer
con el import map
es básicamente
un objeto
que le decimos
los imports
que queremos mapear
y le decimos
cuando quieras buscar
creo que lo tengo
así
le hacemos el objeto
y le decimos
cuando quieras buscar
el estándar
del key value storage
le pasamos un array
con todas
las posibilidades
en orden
que queremos que cargue
primero queremos
que vaya
a intentar
el que es
el nativo
porque así no cargará
el polyfill
pero si no está
en el nativo
y falla
ve directamente
al polyfill
y luego
de esta forma
lo único que tenemos
que hacer
es utilizarlo
y será totalmente
transparente para nosotros
de donde venga
esa dependencia
entonces
los import maps
son súper potentes
porque no solo
nos ofrece eso
os he dicho
que he creado
este react
shame
shame react
que me da vergüenza
react
vale
pues aquí lo tengo
¿no?
puedo importar
el component
de esta librería
el main component
este que he creado
mío
vale
pero esto es un coñazo
es un coñazo
porque me tengo que acordar
donde está
relativo
a todos los archivos
de mi proyecto
y esto ya nos pasa
en webpack
y en webpack
para eso
tenemos los aliases
pero también
de forma nativa
tenemos los import maps
¿qué pasaría
si en lugar de hacer esto
yo en mi proyecto
pudiera hacer algo así?
y cargar
mi propio react
solo utilizando
el nombre
midu react
vamos a verlo
bueno
no os he avisado
esto es una demo
todo puede salir mal
así que
si algo sale mal
pues nada
miráis a otro lado
no pasa nada
no pasa nada
prueba otra vez
vale
entonces
vamos a ver
eh
mmm
¿dónde estoy utilizando
este
que hemos visto
en el logo?
vale
aquí estoy haciendo
un import
de este
¿todo veis bien
la pantalla
el código y tal?
¿sí?
guay
vale
muy bien
pues este
main
component
y todo esto
tralala
esto lo que me gustaría
es que fuese
midu react
¿cómo lo podemos hacer?
para ello
vamos a ir
al index html
y aquí
vamos a crear
nuestro import
le decimos
midu react
y le pasamos
un array
le pasamos un array
con todos
los
posibles destinos
que tendrá ese archivo
¿de dónde tiene que ir
a buscar esa dependencia?
y lo que vamos a hacer
es que lo tiene que encontrar
en
a ver
esto está
en la carpeta main
barra
component
punto js
vale
de esta forma
le estamos diciendo
cada vez que intentes buscar
midu react
ve a esta posición
que ahí va a estar
el archivo que necesitas
¿vale?
genial
pues entonces
lo que vamos a hacer
ahora que ya tenemos
este main
component js
de hecho
para ver que no hay
trampa ni de cartón
vamos a ir aquí
al logo
vamos a ver que ahora mismo
lo está cargando
de main
bueno
punto punto barra
main component
bla bla bla
muy bien
lo que vamos a hacer
es buscar
todo esto
en nuestro proyecto
está en 11 sitios
y vamos a utilizar
el midu react
lo reemplazamos
vale
volvemos a nuestro código
si ahora miramos al logo
funciona todo
nuestro proyecto
pero ahora estamos importando
de midu react
porque gracias al import map
sabe donde tiene que buscar
la dependencia
y así es como el gatito
hace su trabajo
también en css
vamos a tener este tipo
de posibilidades
de extender el lenguaje
más allá de sus posibilidades
actuales
gracias a css
a houdini
vamos a poder crear
propiedades
que hasta ahora
no existen
podemos crear
archivos javascript
que utilizando
el canvas
y el contexto
en el que se ejecuta
ese elemento
del css
podamos acceder
directamente
al motor de renderizado
del navegador
para tener experiencias
nativas
y crear nuestras propias
propiedades de css
o sea
o sea
imagináis poder
hacer polyfields
del css
de cosas que no soporte
el navegador
en todos vuestros navegadores
y que además sea
nativo
no sé vosotros
porque claro
soy gente joven
por lo que veo
no como yo
que ya peino canas
pero
ahora utilizas
el border radius
y todos
somos súper felices
¿vale?
los de la risa
son los de los viejetes
como yo
bueno
pues que sepáis
que dentro de vuestra felicidad
hay un montón de gente
como yo
sufriendo y llorando
por las noches
porque había que
soportarlo en internet explorer
y para soportar
en internet explorer
el border radius
flipas
¿vale?
tenemos un montón
de soluciones
desde imágenes
para cada esquina
hasta bibliotecas
DLL super chungas
que tengan que estar compiladas
según que
para qué versión
de internet explorer
así que
es un buen momento
para estar vivo
¿vale?
entonces
imaginad
que en ese momento
que es hace
14 años
hubiera existido
algo así como Houdini
podíamos haber creado
el border radius
sin esperar
a que el navegador
lo tuviera disponible
podíamos haber hecho
el módulo
que queríamos cargar
directamente
en el HTML
le podemos decir
el módulo que queremos
oye
añade este módulo
al CSS
al motor de CSS
de pintado
y luego
simplemente
lo utilizamos
en este elemento spam
le decimos
el background
de este elemento
va a pintarse
utilizando la función
que he dicho más arriba
¿vale?
y esto
es
esto
¿vale?
porque no existe
una forma nativa
de CSS
en una sola línea
en hacer algo parecido
a eso
de hecho
tengo dudas
de que se pueda llegar
a hacer
tal y como está hecho
sin ningún tipo
de JavaScript
esto lo que nos permite
es acceder a ese CSS
y además
utilizar el motor
del propio navegador
¿vale?
sin tener que utilizar
JavaScript
para manipularlo
el frontend
del futuro
es más nativo
vamos a tener
lazy load
nativo
que esta ya ha sido
la noticia
que ya han dicho
en Twitter
y ha sido brutal
pero hay gente
que no ha comentado
una cosa
y yo voy a explicar
porque creo
que es súper interesante
básicamente
vamos a tener
la posibilidad
para que no lo sepa
y ya tenemos
la posibilidad
porque hay navegadores
que son compatibles
con ello
de crear un atributo
loading
y decirle
diferentes valores
de cómo tiene que cargar
las imágenes
de esta forma
pues nos vamos a eliminar
un montón de librerías
para hacer lazy load
de esta forma
le diremos al navegador
oye esta imagen
la tienes que cargar
solo cuando esté
en el viewport
y esta la tienes que cargar
inmediatamente
porque es súper importante
para nosotros
o haz lo que te dé la gana
que es suficientemente
inteligente
vamos a ver
cómo funciona esto
si miramos aquí
todas las imágenes
estoy cargando
un montón de imágenes
¿vale?
pero
si miramos
con más detenimiento
lo que está pasando aquí
podemos ver
que me está devolviendo
un 206
en algunas de ellas
por ejemplo
si miramos
de las noticias
puedo ver que esta
que es la primera
la de desembarco del rey
me está devolviendo
un 206
no se ve el D
pero ahí se ve
súper chiquitico
¿qué significa este 206?
este 206
lo que está haciendo
el navegador
es básicamente
descargarse el principio
de la imagen
si la imagen
a lo mejor
ocupa 40K
lo que está haciendo
el navegador
que es algo
que difícilmente
pueden hacer
los lazy loads
que tenemos ahora mismo
en javascript
es descargarse el principio
para saber
cuál es la relación
de aspecto
que tiene la imagen
y de esta forma
dejará
justamente
el espacio que necesita
así no veremos
estos golpecitos
que nos daba el lazy load
cuando se cargaba
que hacía pum pum pum
y que teníamos que
inventar maravillas
para decirle
la altura que tenía que tener
de hecho
si yo voy bajando
voy a ver
que no tengo
ningún tipo de salto
¿vale?
y esto en realidad
no es que esté haciendo
lo que mucha gente
puede pensar
ah bueno
es que está cargando
las imágenes
con 10.000 millones
de píxeles
antes de que llegue
vamos a verlo
parece que la ha cargado antes
no
justo cuando iba a aparecer
la ha cargado ahí
37k
vamos a acercarnos
un poquito más
a la siguiente
y vais a ver
que justo estoy llegando
y justo cuando ha llegado
la ha cargado
pero entonces
¿cómo puede hacer esto?
¿que no pega saltos?
pues justamente
gracias a eso
porque es nativo
el lazy load
y lo que permite
es que pueda recuperar
esa información
saber cuánto va a ocupar
la imagen
solo descargando
lo mínimo posible
¿vale?
y dejando la relación
de aspecto
el hueco que necesita
esa imagen
para ser renderizada
picture in picture
esta me encanta
me encanta
sobre todo
porque la tenía
YouTube
era la hostia
y le hicieron de pago
¿sabes?
de
eh
te gusta el picture in picture
¿verdad?
paga
joder
que cabrón
pero por fortuna
va a llegar a la web
y en la web es gratis
y podéis hacer
vuestras propias extensiones
es tan sencillo
con estas pocas líneas
de código
poder hacer vuestro
picture in picture
que hasta hace poco
tenía que ser
solo cosa
de las aplicaciones
Android
o de las aplicaciones
nativas
y ya la podemos
utilizar en la web
de hecho
vamos a ver
una pequeña demo
tengo aquí una sección
de vídeos
¿vale?
y voy a darle al play
un hombre se gasta
cerca de 100.000 euros
en menos de una semana
al ver que su tarjeta
de crédito
estaba a punto
de caducar
el hombre ha visto
que la fecha de caducidad
estaba a punto
de llegar
y antes de que el dinero
se echara a perder
se ha dado prisa
para consumirlo
claro
con haber sido previsor
me había obligado
a comprar sin pensar
tengo un montón
de abrigos de mujer
una moto enorme
y cinco impresoras
cinco impresoras
tengo yo una
y no sé qué hacer con ella
o sea
bueno
está muy guay
pero
podemos darle
a este botón
que básicamente
es javascript nativo
que utilizando
las líneas que hemos visto
nos lo pone
en picture
en picture
pero lo que es más impresionante
de todo esto
no es el hecho
de que
no sé para qué hacer
con las cinco impresoras
es que mientras está
el vídeo
cenar solo
cuando navegamos
lo pausa
es un tema de privacidad
pero ahí tenemos el vídeo
podemos seguir reproduciéndolo
mientras seguimos
utilizando la página web
lo confirma un estudio
de la universidad
de Bacajos
que asegura también
consumir al menos
tres piezas de fruta
al día
podría ser la causa
de dos de cada cinco muertes
en España
pobres
bueno en fin
el caso
esto es picture
en picture
con la plataforma
¿vale?
porque esa es
la plataforma
todas las posibilidades
que nos dan
estos son solo
algunos de los ejemplos
se está partiendo
porque tiene un familiar
que falleció
por un yogur
y se ha acordado
lo siento
en fin
algunos de los ejemplos
que podemos tener
desde pagos
con nuestra tarjeta
de crédito
utilizando tecnologías web
detectar la cara
en fotografías
reconocer texto
reconocimiento de voz
un montón de posibilidades
vamos a ver rápidamente
algunas demos
no os quiero aburrir mucho
¿vale?
este es mi perro Fernando
mucho mejor programador
que yo
y vamos a ver
una demo
de algunas de ellas
por ejemplo
a mí
el tema de
reconocimiento de voz
es una cosa
súper importante
sobre todo
para la web
porque cada vez más
el tema de la accesibilidad
es súper importante
y entonces
tiene que ser
interesante
que se pueda utilizar
la voz
para navegar la web
léeme las noticias
Vale Miguel Ángel
las dos primeras son
Santiago Calatrava
ya ha presentado
un megaproyecto
para la reconstrucción
de Desembarco del Rey
el uso de angular
en el frontend
es la primera preocupación
de los españoles
seguido del paro
y la corrupción
¿te puedo ayudar
en algo más?
Entra en la segunda
Entrando en la segunda
¿te puedo ayudar
en algo más?
Gracias Amparo
Gracias a ti
un saludo
a todos los asistentes
del Meetup
moláis mucho
Alguien puede decir
se ha pegado el moco
Esto es una rey
¿no?
Esto es una rey
solo que no lo es
Léeme las noticias
lo ha entendido perfectamente
ya tiene una confianza
del 96%
¿Qué más?
Entra en la segunda
lo ha entendido perfectamente
con una confianza
del 62%
no ha estado tan segura
la podía haber cagado
La tercera
gracias Amparo
esa sí que ha estado
bastante segura
que lo he dicho bien
De hecho
lo que habéis visto
yo tenía ahí
obviamente
un Machine Learning
no es broma
tenía un enano
aquí un gnomo gallego
dentro de mi ordenador
no
lo que tenía
es un if
no os voy a engañar
tenía un if
que dependiendo
de qué palabras tenía
pues
se comportaba
de una forma o de otra
pero eran unas palabras clave
que me ha permitido
navegar la web
solo con la voz
de hecho
hemos visto que ha entrado
en la primera
pero de la misma forma
podría haberle dicho
que entras en la primera
hemos visto que ha entrado
en la segunda
pero podría haberle dicho
entra en la primera
entrando en la primera
ya ha entrado en la primera
¿te puedo ayudar en algo más?
vale
no es que me lo he inventado
y tal
sino que detecta
si le digo primera
segunda
tercera
cuarta
tal
pues busca en el array
y va a esa posición
¿vale?
¿qué más?
otra cosita
utilizando también
tecnologías
de la plataforma web
como podéis ver
aquí tenemos
en las noticias
pues tenemos una fecha
¿no?
la fecha esta
es lo típico
¿no?
que te sale ahí
el día, el mes, el año
es un poco coñazo
por eso
utilizamos cosas tan guays
como librerías
como MomenJS
que ocupa un montón
seguramente la mitad
del no de módules
es MomenJS
es brutal
lo que ocupa esa librería
tenemos otras como
DateFNS
tenemos TimeAgoJS
tenemos un montón
pero ¿qué pasaría
si utilizásemos
la plataforma
para hacer un TimeAgo nativo?
pues vamos a verlo
aquí tengo mi
mi pipipipi
hasta aquí
tengo mi librería
podemos utilizar
de
newwindow.intel
esto me lo hace últimamente
me trollea
del objeto global
interlude
no sé cómo se puede pronunciar esto
interlude
que es de internalización
ahora han añadido
fechas relativas
entonces podemos cargar
el relative time format
le podemos decir
en castellano
le podemos decir el idioma
y el tipo
el estilo que queremos
si es más largo
si es más corto
podemos dejarlo en auto
vamos a dejar corto
porque me parece
que es un poquito más bonito
para crear la diferencia
tengo aquí arriba
una línea de código
aquí tengo mi chuleta
está ahí
mi chuleta por si me equivoco
la lío muy parda
porque no ha funcionado nada
tengo que copiarlo
a algún sitio
bueno
lo digo porque
no os quiero engañar tampoco
esto es el timestamp
básicamente lo que me va a decir
es la diferencia
desde el momento de ahora
al timestamp
que tiene el artículo
vale
entonces
le voy a decir
que el time ago
dependiendo
de si hay una diferencia
de más de 24 horas
vale
si es de menos
de 24 horas
vamos a utilizar
div
vamos a utilizar
las horas
si no
lo que vamos a utilizar
son
las
vidif
los días
esto lo he escrito bien
¿no?
esto es lo típico
cuando lo escribo mal
que hay alguien
del público diciendo
lo está escribiendo mal
no se lo voy a decir
porque quiero ver
como falla miserablemente
vale
no pasa nada
hemos visto antes
en el vídeo ese
que ha desaparecido
la chica
que hemos disfrutado todos
así que estoy dispuesto
a disfrutar yo también
en ese momento
vale
entonces
lo que vamos a tener
en time ago
debería ser un string
diciéndonos
el tiempo relativo
vale
en horas
si es menos de 24 horas
y en días
si es más de 24 horas
vale
vamos a ver
si he hecho
estoy mirando vuestras caras
a ver si hay alguien sonriendo
con el tic
vale
aquí tenemos
hace 3 horas
vale
básicamente
hemos utilizado
la plataforma
para hacer un time ago
hace 23 horas
y vamos a ver
si tengo algún ejemplo
de más de un día
mira
hace un día
vale
claro
lo mejor de esto
en realidad
no es solo
la funcionalidad
es
evitarte
todas las traducciones
las traducciones
que hay
imaginad
pues estamos en Cataluña
pues vamos a hacerlo
en catalán
aquí lo tenemos
en catalán
que bien
imagínate esto
una locura
nosotros tenemos
tenemos nuestra página web
de fotocasa
la tenemos en castellano
en catalán
en inglés
y en alemán
no sé si debería decir esto
bueno
el caso es
sí
se lo puedo decir
el caso es
que tenemos alemán
pero no tenemos
ningún alemán
en el equipo
entonces tenemos
un chico
que fue dos semanas
a Berlín
así que nada
si alguno de vosotros
sabe alemán
que no entra
la versión alemán
de fotocasa
porque
ya no está en la empresa
no sabemos
lo que hizo
¿sabes?
entonces
pero nada
que si os queréis ayudar
entrad y
oye que esto
aquí pone
pene
¿vale?
y nos podéis ayudar
bueno
vamos a ir avanzando
hay otras cosas
todavía más interesantes
también CSS
nos va a ayudar
a eliminar
mucho de nuestro JavaScript
como por ejemplo
CSS
Scroll Snap
que es una tecnología
que nos va a permitir
hacer dos cosas
una
sliders
que es súper importante
sliders además
con una experiencia
nativa
que es todavía más importante
pero lo segundo
hacer experiencias
tan chulas
como la página de Apple
¿vale?
porque no sé
si sabéis
que siempre en Apple
hace el scroll ese
y se van cargando cosas
ahí súper chulas
y tal
claro
ellos lo hacen
de una forma muy complicada
con JavaScript y tal
pero cuando esté
el scroll Snap
lo podremos hacer
todos con CSS
es tan sencillo
en este caso
de crear un slider
como esta línea de código
que veis aquí
básicamente
en lo que envuelve
nuestro slider
le decimos
que queremos
que el tipo
de movimiento
es horizontal
y le decimos
que es obligatorio
que termine
en uno de los elementos
que hay dentro
de esta forma
conseguimos un slider
y en los elementos
de dentro
lo que le decimos
es que cada elemento
tiene que quedar
centrado
sencillo ¿verdad?
esto es
esto es
esto es
y os lo prometo
el slider
más sencillo
que he encontrado
en GitHub
y estuve buscando
27 horas
ah mentira
el primero que me salió
este
el segundo
tercero
porque el primero
era muy grande
y me caí en el slider
pero
en el slide
pero esto es un slider
en JavaScript
y os prometo
que es uno
de los más sencillos
que he encontrado
¿vale?
y esto es nuestro
slider con CSS
¿quién se queda
con el primero?
¿alguien dice
no soy un romántico
a mí me gusta
ver las cosas
minificadas
las entiendo
mejor
no sé
me hace parecer
listo
pues
esto es con CSS
¿vale?
así que
vamos a verlo
en funcionamiento
espero que todos
hayan visto Avengers
porque más adelante
hay otro spoiler
todo el mundo
ha visto Infinity War
¿verdad?
pero no la queréis ver
si la queréis ver
pues luego te aviso
¿vale?
y te tiras al suelo
y no
porque de verdad
hay un spoiler
importante
vale
Scrawl Snap
muy abajo
muy muy muy abajo
abajo del todo
a ver si llego
con el scroll
tuve una sección
que es la hostia
que es el funny slider
¿vale?
¿vale?
y ahí tenemos
vídeos súper interesantes
¿vale?
entonces
este slider
que veis aquí
además podéis ir poniendo
me encanta este vídeo
porque me recuerda
a mi novia
cuando estoy durmiendo
¿vale?
que yo me quedo ahí
al lado suyo
y ella está como
no lo quita
y yo digo
no pero si está bien
si tienes espacio
y está a punto de caerse
y está su cara
la pobre
lo importante es que
si veis los vídeos
funcionan
todo el slider
funciona súper bien
no se queda
se quedan siempre
en el centro
el slider
podríamos haber hecho
que los vídeos
fuesen el 100%
para que solo
se viese uno
vale
pues esto
básicamente
son dos cosas
esto
esta línea
scroll snap type
x mandatoria
y en cada uno
de los elementos
tenemos
imagen y en vídeo
scroll snap align
center
luego si queréis
podéis ir pasando
y probar
como funciona
el slider
para que lo creáis
pero básicamente
lo que estoy haciendo
son swipes
¿vale?
y podemos ver
que se queda exactamente
que tiene una experiencia
nativa
que es como deberían
funcionar los sliders
en la web
que muchas veces
utilizamos una librería
y no funciona del todo bien
o está rankeando
o le cuesta
¿vale?
pues esto
funciona perfectamente
con cuatro líneas de código
futuro de CSS
es brutal
vamos a tener
nesting selectors
¿vale?
selectores anidados
vamos a tener
selectores custom
vamos a crear
nuestros propios
selectores
para poder ser reutilizados
en este caso
estamos diciendo
h1, h2, h3, h4
y en una sola línea
podemos hacer que
esos cuatro dentro de article
tengan el color de tomate
podemos hacer
parent selectors
para detectar
cuando un parent
tiene un elemento
en concreto
esto hasta ahora
no era posible
ahí está la lágrima
ahí de Ana
está
oh Dios mío
¿cuántos años?
ya pensábamos
que no lo veríamos
vivos
vamos a llegar
Ana
vamos a llegar ahí
cosas
cosas tan chorradas
como una de las cosas
que da mucha rabia
en iPhone
y en Android
es que hay veces
que cuando estás
haciendo scroll
de más
pasa mucho en Mac
que se empieza a rebotar
todo eso
y dices
¿qué estás haciendo?
para
¿estás poseído?
vale
pues eso lo vas a poder
desactivar
con esta nueva propiedad
over scroll behavior
y por fin
media queries
que puede entender
gente normal y corriente
y común
¿vale?
como nosotros
parece mentira
que uno piensa
no sé
el que inventó las de antes
pues estaría enfermo
¿no?
o sea
tendría algo
que tendría mal
no
se van a joder
durante 25 años
no vamos a hacer
media queries
que entienda nadie
yo siempre veo
el MingWiz
y siempre digo
¿para arriba o para abajo?
o sea
es que
bueno
pues por fin
lo voy a poder entender
¿vale?
lo van a hacer
para mí
como veis
he puesto cada una
de las fases
en las que se encuentra
stage 1
stage 2
stage 3
es parecido
a las fases
de JavaScript
así que
cuanto más verde
más alto
más cerca está
de que sea una realidad
pero confío
y espero
que todos lleguen
aquí tenéis
una web
que os recomiendo
mucho para visitar
para que podáis ver
las próximas
funcionalidades
que va a tener
CSS
y en qué fase
se encuentra cada una
así que
hostia
perdona
el que no había
el que no había
no pasa nada
porque todavía
no se había
¿quién no ha visto
Avengers Infinity War
y la quiere ver
y no quiere comerse
un spoiler
tamaño
pastel?
tú
gírate
no mires a la tele
Gerardo
lo sabes
no te gíres
y vienes la tele
o cierra los ojos
muy fuerte
y te aviso
tampoco hace falta
que te vayas
vale
vale
quédate ahí
pero tampoco
nadie se lo susurre
ahora está apareciendo
una persona
vale
vale
hay pantallas
por todos lados
estás jodido
no no
mira para allá
mira para allá
de verdad
a mí me hubiera jodido mucho
lo hago por ti
créeme
en la muerte
de los preprocesadores
no me siento muy bien
amigo fronten
este para que no haya visto
estás
desapareciendo
bueno ya ha desaparecido
imagínate
creo que sí
en este caso
creo que sí
creo que vamos a ver
mucho más del logo ese
que es como de una secta
que es por CSS
para empezar a utilizar
el CSS
el futuro
hay muchísimos proyectos
que sé que lo están utilizando
pero cada vez
lo vamos a ver más
ya está
gracias por tu colaboración
gracias por tu colaboración
espero que te encuentres bien
amigo
fronten
gracias
el caso
ya vamos terminando
el fronte del futuro
sigue las nuevas tendencias
si alguna vez
llega a la moda
que la gente se viste
como el del medio
cogeis
me matáis
vale
lo hacéis por mi bien
yo no me voy a poner clavos
en la cabeza
entonces
tendencias que vamos a ver
y cada vez más
en el frontend
mobile only
hemos escuchado mucho
del mobile first
pues vamos a ver
cada vez más
el mobile only
páginas web
que están hechas
solo y específicamente
solo para mobile
y esto
dice
que flipado
que flipado
pues esto es una página
en producción
que tiene miles y miles
de usuarios
no voy a decir el nombre
porque es competencia
pero
pero ahí está
un ejemplo
real
y como
estos no van a ser los únicos
también en mi caso
esta página
es mobile only
que además
lo piensas fríamente
si tiene 85%
de los usuarios
que está utilizando
móvil
igual te estás complicando
la vida
pero bueno
vamos a ver más
clients a rendering
básicamente
renderizar
toda nuestra aplicación
en la parte del servidor
antes veíamos
que teníamos
services a rendering
con PHP
y sobre todo
WordPress
porque WordPress
sigue siendo
la mitad de internet
y entonces
lo que están haciendo
es service a rendering
renderizar nuestra aplicación
en el servidor
luego con React
salud
lo que hemos visto
es renderizar nuestra aplicación
en el servidor
y luego hidratarla
en el cliente
que básicamente
lo que significa
es tú la renderizas
en el servidor
y luego todos los eventos
los hago en el cliente
de forma
que deberíamos tener
no solo mejoras
de performance
sino que lo que deberíamos
es ayudar a los bots
a indexar
nuestra aplicación
y el clave
esa rendering
básicamente
lo que hacemos
es que devolvemos
desde el servidor
un index HTML
vacío
y en el cliente
el usuario
el navegador
es el que renderiza
toda nuestra aplicación
hasta ahora
no lo podíamos hacer
porque los bots
no entendían exactamente
ahora está ya con el tick
el chico de SEO
que está por aquí
¿qué está diciendo?
hasta ahora
hasta ahora
y todavía
los
el bot
el bot de Google
y esto es súper importante
y lo digo
para que no hagáis
ninguna locura
si sois competencia
no debería decir
estas cosas
porque nos vendría bien
pero bueno
el caso
es que ha habido
un anuncio
de que Google Bot
lo han actualizado
a una nueva edición
que básicamente
es la última versión
de Chrome
y por lo tanto
soporta cosas
casi todas las cosas
que hemos visto hoy
ya las soporta
el Google Bot
lo cual lo hace
muy listo
mucho más listo
que yo
que a mí
bueno
el caso
que no penséis
que esto
lo que va a hacer
es que ahora
el cliente
sea rendering
lo podáis utilizar
como si nada
porque no es así
porque renderizar
en el cliente
tiene un coste
también para Google Bot
por lo tanto
lo que va a pasar
es que Google Bot
primero va a intentar
acceder al server
side rendering
de vuestra página
y luego va a poner
en una cola
vuestra página
para renderizarla
vete a saber cuándo
o igual nunca
porque igual
no es tan importante
tu página
como para que
nunca llegue
a las primeras posiciones
así que
tened cuidado
yo pienso
y creo
y quiero pensar
y estoy convencido
en ello
que veremos
como el renderizado
de las páginas
en Google Bot
y por lo tanto
para SEO
si que estará permitido
pero por ahora
que sepáis
que ese futuro
por desgracia
y a mi pesar
no ha llegado
Progressive Web Apps
por todos lados
hay un montón de charlas
no os he querido
aburrir con esto
pero solo que sepáis
sé que
hay gente
que sabe mucho más
que yo
de Progressive Web Apps
pero el hecho
de que ya podemos
llegar a instalar
Progressive Web Apps
en el escritorio
por ejemplo
vamos a instalar
esta aplicación
de noticias
y ya la tenemos aquí
en el escritorio
de forma
¿eh?
¿habéis visto
el efecto de este?
super chulo
esto es gracias
a CES de módulos
si lo hago muchas veces
a alguien le puede
dar un ataque
pero
pero a mi mismo
luego digo
que si se puede
pues lo hago
pues aquí tenemos
la aplicación
totalmente integrada
en nuestro sistema operativo
podemos utilizar
la API
de Progressive Web Apps
incluso para recibir
notificaciones
para ver
las notificaciones
que tenemos pendientes
por leer
¿vale?
y ya voy terminando
con el Internet de las Cosas
el Internet de las Cosas
fue una de las
tres palabras
más repetidas
en los últimos años
de lo potente
que iba a ser
el Internet de las Cosas
mentira
esto es como era
el Internet de las Cosas
esto es el Internet de las Cosas
¿vale?
y os voy a explicar
por qué
porque Internet de las Cosas
iba a ser la bomba
pero es que nadie pensó
hostia
Internet de las Cosas
está muy bien
porque podrás
programar el microondas
programar la nevera
programar la lámpara
programar a mi perro
programar todo lo que quieras
¿no?
pero nadie pensó
que para programar
cada una de esas cosas
tenías que utilizar
un lenguaje
tenías que utilizar
un framework
tenías que utilizar
y por lo tanto
la gente que tenía que
programar esas cosas
pues odiaba su vida
de hecho yo odié mi vida
cuando tuve que programar
al principio
para una Smart TV
y entonces tenías que utilizar
un framework muy especial
y tenías que
¿no?
tomar por saco
entrando las cosas
Web of Things
¿y qué es esto?
básicamente
esto es
Easy Pessy
básicamente es utilizar
las tecnologías web
para todas esas conexiones
imaginaos poder programar
vuestra lavadora
con Javascript
vuestros microondas
con CSS
no bueno
eso ya es mucho
pero
eso ya sería
mi bestia
pero vamos a poder utilizar
las tecnologías web
ya no solo en Smart TVs
que ahora
es muy típico
gracias a la irrupción
en su día de Firefox OS
cada vez más
tuvimos la posibilidad
de acceder a cosas
de los propios dispositivos
utilizando las APIs
que nos ofrecía la web
pero es que cada vez
vamos viendo
muchas más implicaciones
sobre esto
de hecho
y os recomiendo mucho
que visitéis la web
de Mozilla
como siempre
a la vanguardia
de estas cosas
porque cada vez más
vamos a ver ejemplos
y casos prácticos reales
de cómo utilizar
la web
para programar
cosas de nuestra casa
la lámpara
el termostato
la webcam
la seguridad
la electricidad
tienen incluso
frameworks y componentes
ya programados
para que los podáis utilizar
con algunos productos
esto ha sido
el frontend del futuro
es una charla
que espero que os haya gustado
se haya hecho
recapacitados
sobre las posibilidades
del futuro
quedan un montón
de cosas por explorar
el futuro es
vasto e infinito
¿vale?
entonces
en regreso al futuro
en la segunda parte
no sé
claro
los que no habéis visto
esto es un spoiler
como un camión
pero yo no sé
si cuando han pasado
40 años casi
se puede considerar
spoiler ¿vale?
pero
en la segunda parte
de regreso al futuro
básicamente
BIF
el BIF del futuro
le da al BIF
del futuro
le da al BIF
del presente
un almanaque
con todos los resultados
de las ligas
de no acuerdo
de todas las ligas
de baloncesto
béisbol y tal
y por lo tanto
cuando vuelven
al presente
se ve que el tío
pues es súper rico
y tal
porque ha utilizado eso
para lucrarse ¿no?
entonces
¿cuál sería
nuestra tecnología almanac?
¿qué os podríamos decir?
¿no?
yo aquí
¿qué os puedo decir?
para
para ayudaros
a que el día de mañana
podáis ser BIF
con esta cara de felicidad
que tiene ¿vale?
podáis ser BIF
podáis ser ricos
y exitosos y tal
o al menos que
cuando miréis atrás
digáis
creo que hice lo correcto
ese chico
le debo tanto
a ese chico
eso sería tan bonito
le llamé Miguel Ángel
a mi hijo
por él
eso
y a mi hámster
siempre
este es el mensaje
siempre
siempre
apuesta por la web
¿vale?
siempre apostáis por la web
por más que intenten matar
el javascript
por más que intenten matar
las tecnologías web
al final lo único que hemos visto
es que con el paso de los años
cada vez más
están más presentes
son más potentes
y nos dan
más posibilidades
así que
ya sabéis
si queréis ser BIF
ya sabéis lo que tenéis que hacer
muchas gracias
muchas gracias chicos y chicas
y si tenéis alguna pregunta
pues
estoy más que dispuesto
a ayudaros
o a comentar
o a debatir
no sé si huelen las pizzas
y por eso está la gente muy callada
pero
si tenéis cualquier pregunta
observación
idea
o lo que sea
sí
allá al fondo
Oscar
cuéntame
te voy a traer el micro
así lo estrenamos
estamos en las nuevas oficinas
y esto mola
una duda Miguel Ángel
la aplicación esta que has hecho
la de My News
sí
¿por qué no la has hecho Responsive?
te has perdido un slide
a ver
¿por qué no la has hecho Responsive?
en realidad es Responsive
dentro de las posibilidades
de móvil
porque en móvil
tenemos un montón de dispositivos
¿no?
cada vez más chiquitito
más grande y tal
entonces Responsive
en ese aspecto
sí que se adecua
a todas las posibilidades
del móvil
pero no la he hecho Responsive
porque quería hacer un ejemplo
de la típica web
y cada vez nos vamos a encontrar más
y de hecho
no es la primera vez
que lo veo en internet
de que hay aplicaciones
que son mobile only
¿sabes?
por ejemplo
el ejemplo que he puesto antes
es una aplicación
que está en producción
y tiene muchos usuarios
y que solo
están haciendo
su web
es solo móvil
tú cuando entras en desktop
es la versión móvil
en el centro
ya está
entonces
no os estoy recomendando
ni os estoy diciendo
no os vayáis mañana
a la oficina
menuda idea
tengo
borrado todo
vamos a borrar
hostia
vamos a hacer aquí
¿y dónde ha sacado esta idea?
ayer
un visionario
que fue la hostia
que sí que sabe mucho
no porque luego
me rompen a mí las piernas
y no
entonces
no os lo estoy recomendando
solo digo
que creo que el futuro
nos vamos a encontrar
cada vez más
no digo que el 100%
de la web
vayan a ser así tampoco
pero creo que cada vez más
será menos extraño
que de repente
digamos
ostras
esta web
solo tiene versión móvil
¿sabes?
porque hay muchas páginas
que básicamente
pues
es que sus usuarios
un 85% es móvil
un 85%
es una brutalidad
que piensas
el otro 15
vale la pena
que haga una web responsive
si igual
cuando hago
la versión móvil
y la centro
también la usan
porque lo peor es eso
que cuando veo
una charla de esta gente
decían
que tenían buena conversión
en la versión desktop
entonces
claro
tiene todo el sentido
del mundo
para ellos
¿para qué vamos a hacer
otra versión
si nos podemos
centrar en esta
y funciona bien?
que cada uno
tiene sus casos
que
no sé
a nosotros por ejemplo
en fotocasa
estamos un 50-50
quizás más mobile
que desktop
vale
igual estamos un 60%
por lo tanto
ese 40%
necesitamos
que tengan una
experiencia
íntegra
y queremos
que sea
lo más
buena posible
y sobre todo
porque queremos
que cuando estén en desktop
igual son usuarios
que empiezan en mobile
y terminan su experiencia
en desktop
y queremos que tengan
más posibilidades
pero depende
cada uno de los productos
y tal
es un poco
por eso
no es porque no haya podido
a ver que tampoco
soy tan malo maquetando
que algo
me hubiera defendido
no iba más por ahí
era por el sentido
de que hoy en día
hay móviles grandes
hay pequeños
hay de 5 pulgadas
si entramos en retina
y en píxeles
hacer un tamaño fijo
aunque sea solo para mobile
es que no es fijo
o sea
quiero decir
se adapta
hasta
un tamaño
y luego
se hace más pequeño
y de hecho
eso que comentas
es súper interesante
el hecho de que vamos a tener
móviles cada vez más grandes
y a ver cómo
lo solucionamos
pero creo
justamente por eso
de que harán
las experiencias
solo y exclusivamente
para móvil
no quiero decir
que no sean responsive
ojo
no digo que no hagamos
sino que digo que
justamente se centrarán más
en la experiencia móvil
aunque sean más grandes
y tal
pero no
no pensarán tanto
en vamos a hacerlo en móvil
en desktop y tal
sino que el mobile first
será vamos
cosa del pasado
me parece
ok
gracias
gracias a ti por preguntar
por ser un chico
que tiene iniciativa
y que se atreve
con estas cosas
y hacemos un llamamiento
para que el resto de gente
tenga el valor
de preguntar
me gusta
porque la gente
que pregunta
es gente
de la que me sé el nombre
y puedo decir
paqui
sí
gracias
esto
lo de la web
del futuro
está
de puta madre
pero
creo que todos los frontend
tenemos un
ancla
que se llama
retrocompatibilidad
entonces
¿qué opinas
o qué
hacéis
vosotros
respecto a
internet explorer
safari
que también va a su ritmo
adoptando las
cosas nuevas
y tal
¿cómo lo
cómo lo gestionáis
o qué aconsejáis?
gracias por tu pregunta
paqui
luego te doy los dos pavos
paso palabra
luego te doy los dos pavos
no
bueno
una de las cosas que
es que se ha perdido
el principio
eso vamos a perder
te has perdido el principio
en principio
no pasa nada
de internet explorer
y todo esto
yo lo que creo
al muy corto plazo
vamos a tener que seguir
dando respuesta
a las necesidades
de internet explorer
edge
safari
que también es el nuevo
internet explorer
y todo esto
pero creo que por suerte
en un momento dado
no sé si dentro de un año
dos
cinco
veintisiete
no sé
gracias a las posibilidades
de que la web
va a ser más extensible
la va a hacer también
más resiliente
a este tipo de cosas
en el sentido
de que ahora
lo que vemos
es que tenemos
que parchear
y hacer
fixes muy chungos
nos ha ayudado mucho
Babel
justamente para
olvidarnos un poco
de las transformaciones
que tenemos que hacer
y tal
pero todavía
temas de polyfills
todavía tiene que ser
sí que vamos viendo
poco a poco
más estrategias
que son asíncronas
en sentido de
si necesitas este polyfills
lo cargo
si no
utilizas el nativo
pero cosas como
los import maps
que hemos visto
que poco a poco
van a ser más extendidos
y si en dos años
lo utilizan
muchos navegadores
lo vamos a poder utilizar
justamente para hacer
ese tipo de polyfills
o sea
creo que
hacia donde vamos
no sabría decirte cuándo
nos va a permitir
que la web
va a ser más extensible
y este tipo de problemas
nos lo vamos a enfocar
de otra manera
primero
sin impactar
tanto al desarrollo
actual
como lo tenemos
o sea
el desarrollo
de verdad
y que la estrategia
no impactará
a los navegadores
que realmente
están a la vanguardia
¿sabes?
pero
sí
ahora
vamos a tener que
comernos la mierda
hasta 2025
al principio
te la voy a poner
solo para ti
que no
que no
que no te va a tener
no
pero es que es muy bonita
ostia
cuántas cosas
hemos visto
chicas
y chicas
que bien nos lo hemos pasado
las expectativas
uy
¿os acordáis de este momento
cuando hemos recordado
el 2011?
ay que años
sí mira
esto es lo que quiero hacer
con internet explorer
¿ves?
¿lo ves?
pues ya no lo ves
a tomar por culo
internet explorer
y entonces mira
¿sabes?
lo que preguntabas
pues no
todo en verde
bien
ya todo compatible
pero bueno
lo que quería decirte
es una página web
que era muy buena
ostia
que guay
esto de las peticiones
sí puedes cargar
y bla
que me duele el dedo
esto
hay una web
que está super guay
que te dice
cuánto tiempo
le queda de soporte
a internet explorer 11
oh
ha bajado una hora
qué bonito
una hora y cuarto
2025
¿vale?
2025
pues yo creo
que va a desaparecer antes
oh
Ana Gamito
¿cuál es tu pregunta?
es el nombre de todo el mundo
no es pregunta
es mi apuesta
yo creo que
el año que viene
ya no lloramos tanto
ojalá
ojalá
a ver
yo no creo que lleguemos
a 2025
soportando internet explorer
creo que lo veremos
terminará mucho antes
sobre todo gracias
a movimientos de Microsoft
que está por matar
al navegador
y que ahora
Edge va a utilizar Chromium
y que eso va a adelantar
un montón
la muerte de
en la pasada visita
de Larkin
lo sonsaqué
y le pregunté
¿cuándo se va a acabar?
y me dijo
antes de que acabe el año
te iba a preguntar
¿no te dijo?
no se lo digas a nadie
eso justo
pero ahora sois todos testigos
y lo podéis bombardear
a mí me lo dijo
y yo lo tengo grabado
y te dijo un bajito
y soy un Targaryen
pero
no se lo digas a nadie tampoco
pues ojalá
ojalá
ojalá
¿vale?
¿no hay más preguntas?
ah
eh
os estáis animando
eh
tap tap tap
voy a seguir poniendo memes
mientras se anima la gente
a ver
el tema
del
del CSS
con el
Global Scope
que ya digamos
es un problema
de raíz
del lenguaje
¿cuál crees que podría ser
una solución a futuro?
¿crees que alguna de las
de las
parches más o menos
que se están usando ahora
tipo CSS
NJS
o
CSS Modules
o cualquier otra
¿crees que alguna prevalecerá?
¿o crees que
que la misma W3C
hará algo para
para poder
solucionar el tema
del Scope?
muy buena pregunta
y
yo no
no creo
que CSS
NJS
prevalecerá
ni CSS Modules
pero no porque tenga
nada en contra
de hecho CSS NJS
me encanta
me encanta
lo de Style Components
pero el problema es que
no son parte de la plataforma
por eso creo que no
prevalecerán
o sea
serán útiles
durante un tiempo
pero luego
creo que podremos ver
por un lado
soluciones más
al estilo
el Shadow DOM
que te ofrece la oportunidad
de tener elementos
que son totalmente
independientes del resto
del árbol
y por lo tanto
tú puedes estilar
directamente la imagen
y decir
pues me olvido
de hecho
para que veáis un poco
como yo he ido
estilando todos mis componentes
si vamos a Article
yo directamente
en este componente
he dicho
la imagen
el H2
el H4
el header
y el span
que esto en otros momentos
pues alguien se sacaría
los ojos
y diría
pero si esto
va a colisionar
con todo
bueno pues no
porque aquí
en este caso
solo estamos estilando
dentro de este componente
categoría igual
en este caso
es un poco especial
pero span
imagen
o sea que ya ni siquiera
tengo que pensar
tanto en clases
por aquí ponéis
más los tiros
que yo creo
que el resto
por aquí
al final cosas como
VEM
no deja de intentar
esto pero un poco
a mano
digamos
claro
y CSS Modules
también está intentando
un poco esto
pero más a mano
y Style Components
intenta esto
pero más a mano
entonces
no digo que esta
sea la forma
y esta exactamente
pero por aquí
van los tiros
el hecho de conseguir
este componente
esto en realidad
no deja de ser
un CSS en JS
de hecho
este string
que vemos aquí
podría ser un archivo
CSS
y lo podríamos haber
importado
podríamos haber hecho cosas
yo creo que van más
por ahí los tiros
y esta es la solución
que veremos que prevalece
y algo nativo
de la plataforma
gracias por tu pregunta
tu nombre no me lo sé
Nadal
¿Gaby?
Nadal
Nadal
gracias Nadal
a ti
vale
alguna
hay hay
gente animándose
madre mía
esto es brutal
gracias
yo soy muy fan
de las PWAs
pero
la cosa
es que
los clientes
siguen pidiéndome
apasionativas
y no noto
que fuera
de la comunidad
de los programadores
se transmita la novedad
y tengo el miedo
de que
sea una tecnología
que se quede encerrada
en nuestro entorno
que por falta de presión
de negocio
no se
no triunfe
¿tú crees que llegarán
a comercio
las apps nativas?
yo creo que
llegará
yo creo que llegará
pero no solo por el hecho
de que estamos viendo
sobre todo una de las cosas
que quería transmitiros
es que la barrera
entre
lo nativo de apps
y lo nativo de
y la web
aquella barrera
en la que parecía
que nunca iba a llegar
está llegando
y podemos ver
experiencias
en web
que es que
resultan nativas
entonces ya con las
progressive web apps
y con todas esas
tecnologías
brutal
¿qué es lo que necesitamos?
en realidad
¿qué es lo que necesitamos
para llegar ahí?
necesitamos cosas
como lo que ha hecho Google
no quería enseñarlo
porque a lo mejor
iba a ser muy largo
pero ahora
las progressive web apps
pueden ser instalables
desde la
Google Play Store
podéis publicar
progressive web apps
en la Play Store
entonces
una vez que podamos
instalar
desde la Play Store
una progressive web app
que tenga
notificaciones
que tenga la experiencia
nativa
¿qué diferencia hay
con una aplicación
hecha con Kotlin
por ejemplo?
cuando eso pase
se popularice
y yo creo que será
muy pronto
y creo que lo estamos
viendo y cada vez más
cuando haya alguien
que se atreva
y lo veremos
de hecho
muy poca gente sabe
que hay aplicaciones
de Facebook
que tiene parte web
pese a que es nativa
tiene mucha parte web
yo creo que cada vez
lo vamos a ver más
y algún día
se atreverá alguna
y dirá
mi aplicación
es una progressive web app
si te gusta
bien
y si no
tampoco lo has notado
así que
así que
no te preocupes
llega ahí
dile a tus clientes
ya hablaré contigo
en un año
y vas a ver
así que
gracias
a ti
¿cuál es tu nombre
que tampoco me lo sabía?
José
gracias José
por participar
y por traer el tema
de las progresivas web apps
¿qué?
¿ya estamos?
muy bien
pues muchas gracias a todos
por asistir
y vamos a comernos
unas pizzas
aplausos
aplausos
aplausos
aplausos
aplausos