 Voy a estar durante todo o dia en este track. Ya se habisestan o track a bom nos explica un pouco como funciona o tema. Aqui vamos tener un pouco máis las charlas de nivel de desarrollo máis técnicas e demás. Són 25 minutos de charla, tenéis unos 5 minutos para preguntar, aunque luego os ponentes van a estar aqui ao resto do dia, se tenéis alguna duda en concreto. Y 5 para que nos de tiempo a cambiar entre tracks, se alguno quire disfrutar de alguna outra charla. Veo pagar el este que xinó. Vale, pues, en la primera charla tenemos a Luise Ranz, que es ingeniero de sonido software e emprendedor. Actualmente trabaja como CTO e cofundador en guarona.org. Es una empresa que se dedica al tema de PUA. Hoy viene a hablarnos precisamente de esto. Su charla se titula Progressive Web Apps a 10 PHP o la Javascript. Os dejo ya con el para non roubarle máis tempo. Un aplauso, por favor. Mandito, mandito. Buenos dias, bienvenidos ao Workup. Como ya ha dicho Pablo, mi nombre es Luise Ranz y soy CTO e cofundador de guarona e vengo a hablaros de Progressive Web Apps e del futuro, tambien. Porque, bueno, el mundo está cambiando no exactamente como creíamos que iba a cambiar quando éramos pequeños o incluso como las películas de ciencia ficción predecian. Pero bueno, la verdad es que éste é o nosso futuro. E, en la última década, han aparecido estos ordenadores de bolsillo que están 24 horas conectados a internet e realmente nos han cambiado a vida. O problema é que hai algo que todavía não funciona bien con estos dispositivos. Hace dos anos, Google dijo que ver mobile, ver webs en el mobile é unha experiencia pues lenta e frustrante. E, aunque he puesto la cita de Google porque parece que tiene como má peso, pues é algo que eu creo que todos sentimos un pouco. Nono, é o mesmo ver unha web en el mobile que ver unha web en nuestros portátiles o nostros ordenadores de escritorio. E que ha pasado para que tengamos, por unha parte, estos dispositivos, estos ordenadores de bolsillo tan maravillosos e, por outra, esta web tan maravillosa que nos ha cambiado a vida en las últimas décadas. E que ha pasado para que não se lleven bien? Pois vamos a verlo. Se me permitís, vamos a volver un pouco en el tiempo, vamos a irnos 20 años atrás quando muchos de nós ou por lo menos los que sois de mi quinta nos conectamos por primera vez a internet. E, en ese momento, lo hicimos con un ordenador de este estilo que, aunque nós creíamos que era super rápido, en realidad lo vemos ahora e decimos joder, parece un montón de chatarra. E teníamos modems también de los que hacían ruíditos e, la verdad, que las conexiones pues estaban bastante limitadas. E, por aquel entonces, já funcionaba a lei de Moore, que é a lei que dice que cada dos años se dobla a capacidade de procesamiento e a velocidade de transferencia. Pero, bueno, é como que estávamos empezando. E, en este entorno, teníamos que empezar a desarrollar a web. E a promesa de la web era bastante ambiciosa, mostrar cualquier contenido en segundos e, sin instalar nada. E isto lo teníamos que hacer arquitectura, cliente servidor. De tal manera que, como teníamos muy poquito procesamiento en el cliente, teníamos que darle prácticamente todo el trabajo hecho. Teníamos que enviar ese contenido de la manera má sencilla posible. E, en este momento, é quando HTML entra en nuestras vidas, que era un formato que mezclaba el contenido con la estructura e ocupaba muy poquito. E, la primera arquitectura, os archivos HTML en el servidor e, quando un visitante entraba en nuestra web, se los enviábamos. Lo más importante é que o cliente, como teníamos que dar prácticamente todo el trabajo hecho, o único que tenia que hacer era mostrar, era pintar ese HTML. E isto funcionaba. E aquí llegamos un pouco a lo que eu llamo el mundo geocities. Que era un mundo fascinante, lleno de colorines, con gips que giraban sobre sí mismos, un montón de secciones en construcción. Pero, bueno, a cosa é que foi a primera versión de nuestra web. Eu, por aquel entonces, tenia un blog, aunque ni siquiera se havia inventado a palavra blog, eu creo, e o llevamos página de noticias. E, cada vez que queria publicar una nova notícia, tenia que abrir el editor de texto, copiarla anterior, pegarla encima, editar el HTML e ir cambiando todos os campos e, en cima, como a peticía, que mi página de noticias tuviera paginación, tenia que coger la última noticia, abrirla página 2, pegarla encima, cogerla última, abrirla página 3. E, se queria hacer algun cambio en el HTML, tenia que modificar lo mismo, se tenia 80 noticias en 80 sitios. A cosa é que éso non era nada cómodo. Además, ni siquiera me podían dejar comentarios los usuarios. Então, bueno, estávamos lidiando con ordenadores. Estava claro que podíamos mejorarlo, e que podíamos introducir un lenguaje de programación e unha base de datos. E éso é o momento en el que PHP e MySQL entran en nuestras vidas. E claro, con la concepción de la web e o poco procesado que tenían los clientes, lo teníamos que poner en el servidor, porque además, no podíamos instalar nada en los clientes. Entonces, éso hicimos. Introduximos este lenguaje de programación que cogía nuestro HTML, que era unha base de datos e de repente, éso empezó a mejorar bastante, por lo menos a experiencia de los que hacíamos las webs. Ao cliente, al final, le seguíamos dando el trabajo hecho. Le seguíamos mandando ese archivo HTML que o único que tenían que hacer era pintarlo. A este concepto, aunque por aquel entonces, no lo sabíamos, ahora se le llama server-side rendering, e é bastante importante. Todo o trabajo de renderizado lo hace o servidor. Vamos avanzando un poco el tiempo. Llegamos a 2003. Los ordenadores ya molan un poquito máis e son negros porque molan máis. En casa tenemos conexiones de ASL ya no hay que pedirle a nuestra madre que cuelgue el teléfono porque nos queremos conectar a interneo, ao revés normalmente. La lei de Mursighe, o sea, seguimos doblando la velocidad e la capacidad de procesamiento, o sea, que todo bien. En 2003, también, un evento Wordpress e empieza la gente a unarse entorno a este software open source. E un poquito después, unha empresa llamada Google, que tenía por aquel entonces un buscador, empieza a sacar outro tipo de webs, webs que ya eran un poquito diferentes. Eu me acuerdo la primera vez que entré en Gmail e fui a mandar un e-mail que tu le dabas a enviar e-mail. Te aparecia una ventana dentro de la propia página abaixo a la derecha, rellenabas tu e-mail, le dabas a enviar, ponía enviando e se enviaba. E nosotros lo mirábamos e decíamos como o ha hecho, se a página nos ha refrescado. É como no ha ido ao servidor e ha vuelto e me ha dicho, ya está enviado. E dijimos, joder, esta gente está metiendo código en el navegador e é un pouco en el momento en que JavaScript entra en escena. E claro, nos quedamos un pouco como JavaScript. JavaScript era un lenguaje que se havia inventado en 10 días que nadie le hacía ni caso. Estaba basada en prototipos que era unha cosa rarísima que nadie entendía. Pero bueno, estava en el lugar adecuado e en el momento adecuado. E era a única opción para ejecutar código en el navegador e éso empezamos a hacer. Empezamos a enviar pequeños trocitos de JavaScript a parte de nuestro HTML que ya, cuando se cargaban tomaban el control de alguna pequena parte de la web e añadían un poquito más de funcionalidad. E hasta aí, todo bem. En este momento, também empezamos a vislumbrar que, a lo mejor, la web ya non sólo servía para mostrar contenido, sino que podíamos empezar a ejecutar aplicaciones o pequeñas aplicaciones. Como Google está empezando a hacer con el gestor de correo o gestor de calendarios, o Google Calendar. E bueno, tenía buena pinta. Seguimos avanzando en el tiempo, 2007, ya tenemos ordenadores con dos cores, incluso TFTs, los ADS-LS se miden en megas, WordPress sigue avanzando e saica a la versión 2, Lady Moor, estupenda, siga viento en popa para arriba e cada vez tenemos mejores procesadores, mejores conexiones e hemos empezado a utilizar JavaScript, entonces queremos meter más JavaScript, queremos darle máis funcionalidad pero nos damos cuenta de que JavaScript es muy lento. E en este momento a Google, que también le afecta mucho porque quiera hacer este tipo de webs decide sacar su propio navegador, Google Chrome e empieza a lo que se conoce como la guerra de navegadores. Aquí Google, Apple, Mozilla e incluso hasta Microsoft empiezan a mejorar sus motores de JavaScript para conseguir el motor más rápido de la cuota de mercado. Ao final, después de muchas optimizaciones sobre el motor que... los motores que existían de JavaScript pues realmente el ganador de la guerra foi o propio JavaScript que pasó de ser un lenguaje super lento de ejecutar a ser una cosa bastante decente. Por aquel entonces también surge una librería llamada Jikwery que empiezan a ganar mogollón de popularidad e incluso llega hasta Jikwery con JavaScript. Eu me acuerdo de ver algún currículum de gente que ponía XHTML, CSS e Jikwery, e non ponían nada de JavaScript o gente en esta coberflow preguntando a diferencia sobre Jikwery e JavaScript. Pero bueno, en este momento llegamos a lo que eu llamo o mundo Jikwery e quén nos ha comprado un tema en zinfores bien cargadito de Jikwery con un monton de sliders de pop-ups e hasta es probable que en ese momento se nos fuese un pouco de las manos pero se podía hacer teníamos buenas conexiones teníamos buenos procesadores los motores de JavaScript ya eran bastante rápidos. En 2009 también a alguien se ocurra e a brilhante idea de coger o motor de Chrome V8, sacarlo de Chrome e ponerlo en los servidores e ya empezar a programar os servidores con JavaScript e en ese momento parecia ya que JavaScript era totalmente imparable e que se iba a comer el mundo seguimos un poquito máis 2010, Apple Lopeta, todo o mundo se empieza a comprar Max Los AESLs ya se empiezan a decir que venden 10 megabits e logo non era tanto, pero en realidad las conexiones mejoran bastante WordPress sigue evolucionando e llega a la versión 3 Viento en popa sin problema aumentando a los niveles que había estado aumentando los años anteriores e en este momento surge outra arquitectura diferente, llamada single page applications, empiezan 2010 con Angular, pero bueno, van pasando los años e salen outros frameworks Incluso Automatic la dueña del hosting WordPress.com se une a la fiesta e reprograman de subversión de WordPress e lo convierten en una single page application e como funcionan estas single page applications aquí lo que hacemos é mandar un HTML absolutamente vacío e un archivo de JavaScript gigante que tiene todo el código de nuestra aplicación então el usuario ve un pantalla en blanco ou un textito de cargando hasta que llegue ao JavaScript e o JavaScript se ejecuta de la web e o que sabe que HTML tiene que renderizarse ahí la base de datos la convertimos en un API e o JavaScript es el que se conecta con la API para pedir datos a este concepto se le llama client-side rendering porque opuestamente a lo que pasaba antes que el archivo HTML se generaba en el servidor ahora todo el HTML es como el paradigma opuesto e bueno teníamos nuestro jQuery teníamos nuestras single page applications e todo iba bien ordenadores rápidos, conexiones rápidas pero de repente todo iba a cambiar e es que un señor que se llamaba Steve Steve Jobs más concretamente se le ocurre sacar al mercado un ordenador de bolsillo que tenía un procesador decente o único que se correspondía con los moderns que teníamos 10 años atrás e además se le ocurre la feliz idea de ponerle un botoncito muy pequeñito que pone Safari e en ese momento pensamos mierda, se nos ha jodido la ley de Moor hemos vuelto a empezar e hasta este momento la web había ido evolucionando de la mágica de los procesadores de la velocidad de las conexiones incluso de los motores de JavaScript pero en este momento la cosa cambia porque se pode acceder a la web desde estos dispositivos e estos dispositivos son como de 10 años antes los motores de JavaScript lo mismo hemos casi casi vuelto a empezar las primeras versiones de iOS e Android tenían unos motores de JavaScript súper lentos o primer paso que hicimos foi o másobio todo eso no cabe en una pantalla tan pequeñita vamos a pasar toda la web a responsive e eso hicimos e bueno, foi un trabajo pero lo conseguimos o único que eso no solucionaba todos os problemas solucionaba el de que se no cambiábamos el formato para una pantalla tan pequeñita pero temas de velocidad no lo solucionaba então van pasando os años e realmente volvemos a 2016 al punto donde Google dice que todavía las webs en los móviles non funcionan bien e son unha experiencia bastante frustrante e entonces tenemos que solucionarlo tenemos dos posibles estrategias unas retroceder retroceder lo pongo entre comillas para que no se entienda como una connotación mala es unha solución posible en realidad hemos retrocedido 10 años en capacidad de transferencia e de procesamiento pues podemos retroceder 10 años en digamos en la tecnología que utilizamos para hacer la web e el principal impulsor de esta solución es Google con su proyecto Accelerated Mobile Pages que lo que hace es restringir mucho el HTML que se pode usar prohibir absolutamente el JavaScript e hacer unha especie de componentes que van sacando que son los únicos componentes permitidos e entonces bueno isto tiene unha gran ventaja e es que las buenas prácticas son obligatorias en AMP que se alenta porque estás muy restringido en realidad no la puedes liar pero claro también es un poco volver al mundo geocities volver un poco al mundo de solo vamos a utilizar la web para mostrar contenido podemos ejecutar código ni hacer en ninguna experiencia un poco má rica a la que ya nos habíamos estado acostumbrando tiene sus detractores tiene sus fans también e la outra opción avanzar e máis que avanzar a mi me gusta pensarlo como e si lo queremos todo llevamos 20 años haciendo la web algunos máis e hemos aprendido un montón de cosas e se cogemos todo o que hemos aprendido cogemos lo mejor del server se irrenderin lo mejor del client se irrenderin las mejores optimizaciones con que nos encontramos e vamos a ver como seria un pouco ese mundo ideal para empezar tenemos que volver a hacer server se irrenderin generamos un html en el servidor que ya es la primera pantalla que tienen que ver nostros usuarios e nada de scripts bloqueantes é o concepto que podria seguir un pouco e o primero que le vamos a mandar al usuario é un html con el que ya puede empezar a leer la web ya puede empezar a hacer scroll ya puede empezar a ver de que va eso e después vamos coger un pouco la filosofía de las single page applications pero en vez de enviar un javascript gigante lo vamos a trocear e le vamos a enviar solo o javascript que necesita para controlar esa parte de la web e poco a poco se vemos que va teniendo procesado libre e la conexión está libre vamos a ir a lo mojor pillando un pouco más de javascript por si o usuario se empiece a mover a diferentes secciones de la web pero le vamos a hacer todo de manera muy progresiva para nunca saturar o navegador e un pouco lo mismo lo vamos a hacer con los datos una vez que ya javascript ha tomado el control de la aplicación ya no vamos a pedir más html que es mucho más eficiente e además podemos incluso ir prevendo a donde se va mover o usuario e ir precacheando esos datos se la conexión e el procesado está libre e además vamos a añadir una pequeña cajita que la llamamos service workers en la que vamos a ir cacheando eso que nos vamos descargando por si o usuario quiere volver al dia siguiente o dentro de una semana que no tenga que descargarse todo outra vez e que eso cargue prácticamente instantáneamente e además vamos a dejarle que instale a aplicación, ya va a tener una experiencia tan cercana a una aplicación nativa que le vamos a dejar que la instale como se fuese una aplicación nativa e a todo este concepto lo llamamos progressive web apps progresive web apps progresive porque son progresivas vamos a enviarle lo primero ese server-side rendering shtml que está ya super para que só lo tenga que pintar e progresivamente le vamos a empezar a mandar javascript e datos poco a poco para que siempre funcione fluido por eso se llaman progressive se llaman apps porque son aplicaciones porque podemos ejecutar código e podemos hacer experiencias muy interesantes e se llaman web porque funcionan sobre la web e en este momento nos damos cuenta de que sí de que se puede realmente cambiar la web e utilizarla para ejecutar cualquier aplicación en segundos sin instalar nada e que además como son progresivas funcionan bien en los móviles e como hacemos esto con WordPress para empezar necesitamos un framework de los que nacieron con las single-page applications que han ido evolucionando bastante e están bastantes maduros en general yo creo que en la comunidad de WordPress los dos máis famosos o los que la gente máis les gustan son react e bué pero bueno hay otros esta parte está muy cubierta después necesitamos unha manera de conectarnos a nuestro WordPress a través de unha API para que ese javascript pueda ir sacando los datos e por último un servidor que ejecute javascript necesitamos ejecutar javascript para hacer esa primera pantalla que le vamos a enviar al usuario en el server side rendering para que en menos de un segundo pueda estar interactuando con la web el acceso a los datos de WordPress también es algo que tenemos bastante cubierto el propio WordPress hizo una iniciativa para hacer unha restapi que está incluida en el core a partir de la versión 4.7 e la verdad es que es fenomenal está muy bien pensada e la suerte que tenemos es que tenemos ahora millones de páginas hechas en WordPress que todas comparten la misma API e luego tenemos otras iniciativas de la comunidade por ejemplo, si en vez de unha restapi prefieres utilizar GraphQL para conectarte e sacar datos hay un proyecto súper interesante que está ganando mucha atracción que se llama WordPress GraphQL e estoy seguro que como estos WordPress seguirán saliendo outros proyectos e un servidor que ejecute javascript aquí la cosa está un poco má verde tres soluciones la primera es tirar directamente hacía node apuntar nuestra URL de nuestro WordPress a un servidor de node que se encarga de hacer el server-side rendering e pilla los datos de nuestro WordPress a través de la API outra opción seria unha librería como phpv8js que es una librería que incluye dentro de PHP la consola de Chrome y esto seria unha opción que en el propio hilo de PHP tú vas ejecutando y hay un momento que te puedes salir, ejecutar javascript e volver al propio hilo en el mismo servidor y la tercera opción seria unha opción híbrida como la Ipernova que es un proyecto opensource dvnb que lo que hace es facilitar te mucho la vida para tener un servidor PHP e outro de node pero que no tienes que programarlo tú te lo dan como preinstalado e lo que hace es vas ejecutando tu PHP en el momento que te quieres salir a ejecutar javascript te vas a ser servidor de node que tiene la versión de Ipernova de javascript e luego vuelves a tu PHP e ya con ese javascript en PHP sigas ejecutando e se lo envías al cliente haces un pouco lo que quieras vale, e los enfoques actuales como esta a la cosa a día de hoy pues tenemos 4 opciones la primera do it yourself por ejemplo, texcran saco hace un mes mes y medio unha progressive web app que está hecha con react e se conecta a WordPress a traves de la restapi que bueno es una primera versión pero está bastante bien tiene una experiencia bastante interesante están utilizando PHP para hacer el renderizado con lo cual no pueden hacer el server 6 rendering de react e es una cosa que queda un poco rara porque de repente te llega la primera versión que no coincide cuando carga javascript se te cambia a la interfaz supongo que estarán en ello e estoy seguro que lo mejorarán la opción de temas de WordPress que también es muy interesante por ejemplo, a la empresa opticals que llevo unos cuantos años promocionando esto hace temas de WordPress pero basados en estas tecnologías e ultimamente tienen alguno en react yo creo que empezaron antes de que saliera la restapi por eso se conectan a traves de su propio plugin claro, aqui estamos instalando un tema de WordPress entonces no podemos hacer el server 6 rendering entonces esta solución non tiene server 6 rendering pero bueno se podria utilizar algo como hipernova o para incluso mejorar esta solución Warona, que es la empresa donde trabajo o que nosotros estamos intentando montar es una plataforma un poco al estilo de WordPress que WordPress se encarga de toda la parte difícil por así decirlo e nos da como el 90% del trabajo hecho nosotros estamos intentando hacer un poco lo mismo estamos haciendo un stack para que encima de esta plataforma sea super fácil crear este tipo de progresivo web apps e experiencias utilizamos react e conectamos a traves de la restapi e nuestros servidores estar en node o que tenemos es un pequeño plugin que se conecta que en el momento que llega un visitante mira ver se la visita viene de un mobile se viene de un mobile redirige a nuestros servidores de node que ya tienen preparada la versión de server 6 rendering e se la envían para que cargue en menos de un segundo somos open source también soportamos a mp que le hacemos con el mismo código que el de react e bueno como ya ha dicho tenemos server 6 rendering e por último un producto cerrado como pode ser el de marfil por ejemplo que es outra empresa española moi interesante de barcelona que llevan tambien bastantes años en el ajo promocionando mucho las progresivo web apps aqui ellos no utilizan ningún framework en el frontend se conectan están un poco prezsino a grandes medios sacan los datos haciendo scrapping de las webs e los servidores como no son open source no se que utilizan pero bueno tiene una solución bastante completa tienen versión de mp hacen el server 6 rendering para os grandes medios es bastante interesante e ya esta como veis es un poco todavía esta es una tecnologia sincipiente, hay muchas cosas por hacer hay cosas que estan un poco verdes pero sinceramente yo creo que es el futuro de la web e realmente pienso que se conseguimos que warpres e javascript se lleven bien juntos vamos a tener un warpres mucho más potente e vamos a tener warpres para muchos años, muchas gracias