El estado de la Web en Google I/O 2018
miércoles, 16 de mayo de 2018
Desde PageRank hasta Chromium, Google ha invertido mucho en el éxito continuo de la Web. Esta semana en Google I/O, nuestra conferencia anual para desarrolladores, realizamos una presentación formal para catalogar algunos de los esfuerzos recientes orientados a permitir que la Web continúe prosperando y funcionando bien. Repasamos los temas claves que se mencionan a continuación, pero te recomendamos que veas todas las conferencias en YouTube.
Service Worker
La introducción de la Service Worker API es una de las mejoras más importantes realizadas a la Web en la historia reciente. Libera a los desarrolladores del ciclo de vida limitado de las páginas, de tener que trabajar en segundo plano para interceptar solicitudes de red y de controlar los eventos entrantes para permitir que las aplicaciones web funcionen sin conexión. Con service workers, tu sitio puede recibir notificaciones push, sincronizar datos en segundo plano y procesar muchas más tareas. Apple implementó compatibilidad con service workers en Safari 11.1 para iOS y MacOS en marzo, y Microsoft Edge integró service workers la semana pasada; esto significa que todos los navegadores modernos más utilizados serán compatibles con el estándar. El uso de service workers puede implicar un gran cambio en tu arquitectura, de modo que para facilitarlo creamos Workbox, que incluye muchos patrones potentes de service worker en una API fácil de usar. Acabamos de lanzar la versión 3 de esta biblioteca, compilada en módulos que te permiten usar solo las funciones que necesites.
App Web Progresiva (PWA)
Service workers proporciona la columna vertebral para muchas de las capacidades de una AWP. Empresas de todo el mundo, en diferentes sectores, han tenido un éxito increíble compilando AWP. Starbucks, quienes lanzaron su sitio de AWP el año pasado, duplicaron sus usuarios activos diarios. De hecho, entre los sitios de publicidad que medimos, cuando un sitio cambia a una AWP se observa un aumento promedio del 20% en la tasa de conversión móvil.
Muchas de las primeras AWP se centraban en dispositivos móviles, y hoy los beneficios también se extienden a equipos de escritorio. Chrome pronto ofrecerá a sus usuarios instalar AWP en sus escritorios. El sitio tendrá su propio ícono, se iniciará en una ventana independiente y conservará las características eficaces que se esperan de un navegador, como búsquedas en páginas, URL que se puedan compartir y compatibilidad con Google Cast, entre otras. En I/O mostramos la manera en que Spotify implementa su experiencia rich media como una AWP de escritorio. La compatibilidad de instalación para AWP de escritorio llegará a ChromeOS en Chrome 67 a principios de junio, y a Windows y macOS posteriormente durante el año.
WebAssembly
WebAssembly permite a los sitios web ejecutar códigos de alto rendimiento escritos en lenguajes como C o C++, y ofrece clases de contenido completamente nuevas en la plataforma web. En marzo, AutoCAD de Autodesk tomó una base de código de 35 años (anterior a la mismísima Web) y la compiló para ejecutarla directamente en un navegador usando WebAssembly. AutoCAD está ahora a un vínculo de distancia, lo que significa que puedes modificar tu dibujo en CAD directamente en un navegador, independientemente del dispositivo o el sistema operativo. El equipo de ingeniería de AutoCAD tiene una sola base de código C++ compartida, y cuando el equipo de escritorio realiza cambios, estos se integran fácilmente a la app web de AutoCAD.
Si quieres aprender a portar código o escribir el tuyo, échale un vistazo al codelab de WebAssembly, que demuestra la interacción entre las bibliotecas C y el DOM. Ya sea que estés usando una biblioteca compleja escrita en C, que quieras incorporar un nuevo códec a la plataforma web o usar un motor como Unity o Unreal Engine, WebAssembly está aquí para ayudarte.
Lighthouse
Lighthouse es una herramienta que te permite analizar la calidad de tu sitio web, y proporciona mediciones claras del rendimiento de este además de orientación para mejorar la experiencia de tus usuarios. Se puede acceder directamente desde DevTools de Chrome, ejecutarse desde la línea de comandos o integrarse con otros productos de desarrollo. Solo en 2018, medio millón de desarrolladores están ejecutando Lighthouse en sus sitios con frecuencia. Sabemos que la Web cambia rápido y Lighthouse puede ayudarte a permanecer actualizado con las últimas prácticas recomendadas de rendimiento. Lighthouse 3.0, anunciado en I/O, estará disponible en general más adelante durante esta semana.
Lighthouse te brinda claridad con respecto al rendimiento de carga del sitio en un entorno controlado. No obstante, si quieres ver cómo se comporta el sitio para los usuarios reales en el mundo real, lee el Informe sobre la experiencia del usuario en Chrome. El informe ahora proporciona métricas de rendimiento a nivel de origen para los cuatro millones de sitios web más visitados. Para obtener más información sobre cómo éstas y otras herramientas pueden ayudarte a obtener un panorama completo del rendimiento de tu sitio, lee nuestra infografía rápida sobre herramientas.
AMP
AMP es una biblioteca y un ecosistema de componentes web para compilar sitios web rápidos y confiables con una excelente experiencia del usuario a escala. Hoy hay más de seis mil millones de páginas AMP de 46 millones de dominios cuyo tiempo de carga promedio desde la búsqueda de Google es inferior a un segundo. Las empresas están teniendo éxito con AMP: AliExpress, el mercado minorista global en línea, recientemente lanzó un nuevo sitio móvil como app web progresiva impulsada por AMP. El nuevo sitio logró un increíble aumento del 31% en su tasa de conversión para el tráfico que no proviene de búsquedas.
El consumo de contenido en dispositivos móviles está cambiando, y los formatos diminutos para contar historias en pantalla completa se vuelven cada vez más populares. Para ayudarte a satisfacer las necesidades de los editores web, el proyecto AMP recientemente anunció el desarrollo de AMP stories, un conjunto interesante de componentes web creados para contar historias en dispositivos móviles. El formato se encuentra en continuo desarrollo, y te recomendamos intentar crear tus propias historias y enviar tus comentarios al equipo de AMP.
Web Packaging
Web Packaging es un conjunto de tecnologías emergentes que creemos que redefinirán la manera en que el contenido web se distribuye en la red y se comparte entre los usuarios. Permite a los editores agrupar su contenido para la distribución a cargo de otras partes y, al mismo tiempo, conservan las garantías de integridad de HTTPS. Como parte de la exploración de casos de uso nuevos a través de Web Packaging, nos dimos cuenta de que existía una oportunidad interesante para AMP. Mediante colaboración con el equipo de AMP y la comunidad web, pudimos diseñar una solución a través de la cual los documentos AMP pueden conservar la URL original del editor al obtenerla del caché de AMP.
Como muestra de nuestros esfuerzos, los colaboradores del proyecto AMP Food Network y Pinterest han compilado demostraciones de Web Packaging, como la que te mostramos a continuación. Si quieres obtener más información, el equipo de AMP escribió un artículo en el que se aborda en detalle la manera en que Web Packaging beneficia a usuarios y editores. Más allá de la aplicación AMP, estamos entusiasmados con las tecnologías que Web Packaging habilitará y esperamos poder definir mejor nuestras ideas con tu ayuda.
Demostración de Web Packaging con una página AMP a partir de una búsqueda de Google.
Polymer
Polymer es una biblioteca JavaScript que te ayuda a crear componentes web personalizados reutilizables que podrás compartir con otros desarrolladores o combinar entre sí para compilar apps de mantenimiento eficaces. En I/O lanzamos la versión 3.0 de la biblioteca, que incorpora algunas actualizaciones importantes al ecosistema de Polymer. Completamos la compatibilidad para usar npm como el sistema de administración de paquetes y módulos ES6 como la unidad de composición, facilitando el uso de componentes web basados en Polymer junto con los demás marcos de trabajo y herramientas de desarrollo web que prefieras.
También incorporamos LitElement, una clase básica de componentes web nueva en la que se combinan el poder expresivo de Lit-HTML con componentes web que facilitan aún más la creación de componentes reactivos livianos usando sintaxis de plantilla moderna y expresiva.
También lanzamos el PWA Starter Kit, un punto de partida integral para compilar PWA basadas en componentes web que sean rápidas, confiables y receptivas, que admitan la incorporación de temas y que ofrezcan el punto más alto en nuestros criterios de rendimiento y de AWP Lighthouse.
Angular
Este año en I/O, el equipo de Angular brindó una descripción general del crecimiento de la comunidad y abordó algunas de las nuevas e interesantes capacidades que se han incorporado en el marco de trabajo central, CLI y la biblioteca de Angular Material en la versión 6. Millones de desarrolladores usan Angular, que ha tenido un impulso enorme y ha creado un ecosistema fantástico. Los nuevos comandos que se incorporan en la versión 6, como “ng update” y “ng add”, mantendrán tu aplicación actualizada y ayudarán a los desarrolladores a avanzar más rápido a medida que el equipo de Angular continúa equilibrando estabilidad e innovación.
El equipo de Angular también comentó algo sobre las mejoras que prevé implementar en Angular con Project Ivy. Esto facilitará la depuración de Angular y acelerará su compilación y ejecución de un modo que funcione con las aplicaciones existentes. El equipo demostró la utilidad de estas mejoras en una aplicación Hello World pequeña, en la cual las funciones de Angular que no se usaron se eliminaron automáticamente del conjunto JavaScript.
Nuestra misión en Google y en Chrome es trabajar con la comunidad para crear experiencias que sean rápidas, integradas, confiables y atractivas. Estamos entusiasmados con las nuevas capacidades disponibles para la plataforma web abierta, y con el conjunto completo de herramientas que te permiten compilar rápidamente sitios de alta calidad para tus usuarios. Para recibir información actualizada sobre los últimos avances en la Web, visita nuestro portal para desarrolladores o mira las charlas del evento I/O de este año en el canal de Google Developers de YouTube. Nos complacerá verte en la próxima Chrome Dev Summit más adelante, este año.
Publicado por Malte Ubl y Ben Galbraith