ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.
¡Hola desde San Francisco!
Segundo y último día del Chrome Dev Summit 2018. En el artículo de ayer te contaba que la mayoría de las conferencias impartidas intentaban hacer hincapié en lo importante que es cuidar el rendimiento y tiempo de respuesta de tu página web. Para refrescar un poco la memoria se presentaron tres herramientas (web.dev, visbug y squoosh) que te ayudan a analizar, optimizar y corregir los problemas que puedas tener en tu página web de una forma bastante interactiva. Además de varias charlas sobre optimización y buenas prácticas. Se podría decir que el foco de ayer consistía en analizar y mejorar la web actual.
El foco hoy ha sido distinto y parece que se pretendía mostrar cuál va a ser el futuro de la Web en los próximos años. El día comenzaba con una conferencia muy polémica: el uso de los frameworks JavaScript en el desarrollo actual. Polémica, porque siempre existe debate sobre lo idóneo de su uso, pero el equipo de Chrome ha tomado una posición que personalmente me agrada y con la que seguramente estés también muy de acuerdo.
La idea es muy sencilla: es cierto que los frameworks hacen que tu página sea más lenta a priori, pero también te ayudan a hacerla más rápida. Puede parecer contradictorio, pero tiene sentido si lo pensamos. Un framework puede ser pesado per se pero, debido a las buenas prácticas que normalmente te propone/impone, acabas creando aplicaciones de gran calidad.
Pongamos como ejemplo el framework de la casa, Angular y algunas de las novedades orientadas al rendimiento y a las buenas prácticas que trae su reciente versión 7 (mi curso online ya está actualizado a esta versión aparecida el mes pasado):
Gran parte de las optimizaciones que hace Angular por detrás, como los componentes, los paquetes, el chequeo de compatibilidades con versiones de los navegadores y otras características de este tipo, las desarrolla un equipo de profesionales de altísimo nivel dentro de Google. Y como prueba del apoyo a este tipo de frameworks de gran calidad, el equipo de Chrome ha anunciado que en el futuro algunos frameworks se podrán pre-cargar en el propio navegador. Esto significa que el usuario, por ejemplo, ya no tendrá que esperar primero a que se cargue Angular para poder empezar a usar una aplicación web, sino que Angular y otros frameworks ya vendrán “dentro” del navegador. Esta mejora no tiene ninguna fecha estimada pero sin duda es una iniciativa estupenda.
Mejoras en la paginación infinita o scroll virtual
Otra de las conferencias más esperadas era la de Gray Norton sobre la especificación del elemento <virtual-scroller>.
Para darte un poco de contexto sobre este elemento, a grandes rasgos se trata de un scroll con el que puedes controlar exactamente qué renderizas, lo cual puede ofrecer mejoras increíbles en lo que respecta a rendimiento. El caso de uso más claro es el de una lista "infinita" de digamos 5.000 elementos:
- Sin virtual-scroll: si realizas una modificación dinámica (el ancho de un elemento mediante CSS, por ejemplo) afectarías a 5.000 elementos de tu DOM y seguramente sea lento.
- Con virtual-scroll: si realizas la misma modificación tan sólo afectará a los elementos que estás renderizando en ese momento, con lo que el cambio es muy fluido.
A día de hoy este elemento sólo se puede conseguir a través de alguna biblioteca externa como son: React Virtualized, Angular Material Virtual Scrolling o vue-virtual-scroller, según el framework que utilices. El uso de estas bibliotecas especializadas no está exento de contras. Por ejemplo, si no añades al DOM todos los elementos no puedes realizar una búsqueda o acabarías teniendo problemas de indexación dependiendo de para lo que uses el <virtual-scroller>. Lo que Gray Norton y su equipo están intentando conseguir es hacer que <virtual-scroller> sea un elemento estándar del navegador para evitar estos problemas, y obtener una especificación. Puedes conocer más sobre el proyecto en su página de GitHub.
Puedes ver la charla completa aquí (en inglés): virtual-scroller, que haya menos DOM.
Polymer, el framework de componentes de Google desaparece para multiplicarse
Otra de las conferencias que más impacto mediático tuvo fue la del equipo de Polymer en la que quizás lo más importante no ocurrió en el escenario sino detrás de éste. En la conferencia se hizo hincapié en las mejoras en las que se está trabajando sobre su nueva biblioteca LitElement, pero a lo largo del Chrome Dev Summit 2018 se han anunciado las siguientes novedades:
Este último punto puede parecer una nimiedad, pero es increíblemente importante ya que ha desaparecido el framework de Polymer y han aparecido los tres nuevos proyectos que he citado anteriormente dejando sólo en mantenimiento ciertas partes de Polymer. ¿Qué significa esto?
Personalmente llevo varios meses siguiendo el trabajo que el equipo de Polymer está poniendo en estas bibliotecas y con este cambio en mi opinión están dando a entender que Polymer desaparecerá como framework. Por lo que si ahora mismo me preguntases si empezaría un proyecto con Polymer la respuesta es rotundamente no. Pero sí puedo empujarte a probar LitElement + lit-html. Llevo trabajando con ellas un tiempo y sin duda son dos proyectos a los que habrá que seguir muy de cerca (aún no están en producción pero son muy estables). Su foco sigue siendo el mismo que el de Polymer: crear web-components universales algo que en mi opinión no está consiguiendo ningún framework actualmente.
Lista de charlas
A lo largo del día de hoy ha habido multitud de anuncios y charlas increíblemente interesantes. ¡Te animo a verlas en el listado a continuación para enterarte de primera mano de todas las novedades que nos esperan como desarrolladores!
Fecha de publicación: