Amigos, desde la posición del jefe del comité del programa,
Frontend Conf colocó una breve descripción de los seis informes más útiles de RIT ++ 2018 en la interfaz debajo del corte.
En la selección había un lugar para una historia sobre cómo configurar
aplicaciones PWA y hacerlas más nativas. Se plantean por separado los
problemas de transpilación , donde, utilizando la API Yandex.Maps como ejemplo, se muestra cómo puede escribir en ES2015, recibir ES3 en la salida y proporcionar soporte para IDE y linter. Otra historia es sobre los
formatos populares de almacenamiento de imágenes , sus opciones de compresión y descarga en dispositivos móviles. No menos informe incondicional sobre cómo transferir la carga asociada con el
cálculo de la animación desde la CPU a la tarjeta de video . Además de dos informes separados sobre
secretos CSS y trucos de la vida .
Todos los informes son puramente prácticos, y algunos son completamente holísticos. En una palabra, son exactamente los que amamos y están seleccionados para Frontend Conf Moscow.
Cómo hacer que una aplicación web sea más nativa y un usuario más feliz
Basado en la experiencia de desarrollar su propio proyecto, Timofei Lavrenyuk de la compañía de productos KeepSolid dijo que si se usa PWA es posible crear una aplicación que se comportará casi como nativa.
Timofey cambió al concepto de una aplicación progresiva en la tercera versión de su cliente para un agregador de noticias orientado geek (GeekInformer). En el contexto de la versión web, las aplicaciones progresivas son convenientes para una mayor integración con el sistema operativo, en particular, porque están disponibles en la lista estándar de aplicaciones para Android. Similar a las aplicaciones nativas, el usuario puede administrar permisos o desinstalar PWA.
En menos de una hora, el orador describe cómo funciona PWA y luego procede a los detalles, por ejemplo, para asegurarse de que la aplicación funciona en ausencia de Internet, configurando el almacenamiento en caché de datos del servidor, etc.
Para las características mencionadas, el hablante incluso ofrece una evaluación subjetiva del tiempo de su integración en la aplicación:
El informe está lleno de detalles interesantes, enlaces a herramientas (e incluso "muletas"), así como el genuino entusiasmo del autor. En resumen, el orador señala que PWA tiene las ventajas de las páginas web (HTML5) y las aplicaciones nativas. Él espera que en un futuro cercano PWA aparezca en los escritorios (mientras que solo están en ChromeOS), por lo que la tecnología predice un gran futuro.
Opciones de transpiración ilimitadas
El autor del próximo informe es Andrey Roenko, desarrollador de Yandex.Maps API. El orador habla sobre su experiencia usando la transpilación. Al considerar a Babel como el principal transpilador, se ve, según el propio orador, bajo el "capó del capó" del proceso: explica cómo funciona todo esto en teoría y cómo se puede aplicar a tareas específicas.
En el proceso de desarrollo de la API Yandex.Maps, los enfoques descritos ayudaron a escribir en ES2015, recibir la salida de ES3 y proporcionar soporte para IDEs y linters.
Por cierto, el informe contiene enlaces a literatura útil y complementos interesantes. Para no meterlos con las manos en la línea del navegador, el autor publicó especialmente una
presentación en el
dominio público, donde se puede hacer clic en todos los enlaces.
Mostrar imágenes al usuario: una guía detallada
Desde aplicaciones en general, pasemos a los detalles. Lo primero en lo que quiero centrarme es en las imágenes cargadas en dispositivos móviles de las que habló Nikita Dubko, ingeniero de software y desarrollador front-end de iTechArt Group. Su informe es una descripción general de los formatos populares de almacenamiento de imágenes, sus opciones de compresión y descarga en dispositivos.
La idea principal del informe puede formularse de manera bastante simple: los parámetros y métodos de compresión, así como las opciones de descarga, deben elegirse teniendo en cuenta su tarea para minimizar la carga del procesador del dispositivo móvil y el tráfico de red.
El contenido del informe está oculto en casos particulares y los detalles relacionados con ellos: el orador examina en detalle los pros y los contras de los diferentes enfoques, sugiere casos para su uso, proporciona estadísticas sobre el soporte de una opción particular en los navegadores, comparte trucos de vida y herramientas para realizar operaciones específicas.
Es de destacar que en la conversación hubo un lugar para discutir la experiencia de los usuarios con Internet lento y la disponibilidad de imágenes para personas con discapacidad.
Camino de píxeles
Otro informe duro es la historia del entusiasta de la animación Yuri Artyukh (Coderiver) sobre el cálculo de los recursos de imagen de la tarjeta de video.
Yuri comienza su discurso con algunos ejemplos muy interesantes de su trabajo y un sueño igualmente impresionante: crear una animación de manchas de grasa en la superficie del borsch caliente (bueno, ¿cuántos de ellos los llevaron a un plato con una cuchara o un trozo de pan?). Pero la esencia del informe no se trata de eso, sino de cómo transferir la carga asociada con el cálculo de la animación desde la CPU a la tarjeta de video.
En lugar de largas explicaciones sobre las situaciones en que esto puede ser necesario, aquí hay una caricatura del autor del informe:
La grabación de video por referencia, de hecho, es una introducción completa a WebGL en términos de animación; sobre cómo reconstruir su cabeza del DOM al cálculo de píxeles paralelos. Una vez terminada la introducción, el orador en tiempo real muestra cómo comenzar a familiarizarse con los sombreadores, así como crear efectos interesantes con solo un par de líneas de código.
Aún más secretos CSS
Para el postre, dos informes sobre las capacidades de CSS. La primera es la historia en inglés de Lea Verou, desarrolladora de varios proyectos de código abierto, investigadora del MIT CSAIL y experta visitante del Grupo CSS, sobre 10 características CSS poco conocidas. Por cierto, Lea Verou también es autora de los secretos CSS, que se han traducido al ruso, entre otras cosas.
El informe es una especie de secuela de actuaciones expresadas en 2011-2013 y dedicado a los secretos de CSS.
Como en esos informes, aquí se presentan 10 "trucos", basados únicamente en las capacidades de CSS (sin JavaScript). Para ayudarlo a comprender mejor el contenido, aquí hay un par de ejemplos:
La narrativa se basa en escribir código en tiempo real con un análisis detallado de los principios operativos y detalles del próximo "truco de la vida", por ejemplo, las matemáticas, que se encuentra detrás de los modos de multiplicación y pantalla en modo de fusión.
Teniendo en cuenta que algunos "trucos" son posibles solo gracias a las innovaciones en CSS, para ellos el orador proporciona estadísticas sobre el soporte de los principales navegadores. Por desgracia, no todos los 10 trucos se pueden utilizar en proyectos hoy (en algunos lugares, el apoyo nos ha decepcionado), pero la situación es bastante prometedora.
¿CSS está listo para reemplazar los preprocesadores?
Otro informe es una comparación de las funciones y preprocesadores CSS incorporados a través del prisma de un proyecto promedio de Sergey Popov de League A. / HTML Academy.
A pesar de la "santidad" del tema (el grado de pasión se hace evidente en la etapa de preguntas de la audiencia), el autor alienta a los oyentes a abandonar los preprocesadores tanto como sea posible, al menos en la parte en que CSS ya ofrece su propia solución.
Comenzando con la historia del desarrollo de preprocesadores, el orador analiza la relevancia de ciertos diseños que quedan para este kit de herramientas, establece paralelos con las capacidades de CSS y PostCSS, equiparando el papel de este último en el mundo CSS con el papel de Babel para JavaScript.
En lugar del avance de rendimiento, ofrecemos el siguiente esquema final:
Bueno, para una explicación de lo que se muestra aquí, le recomendamos que consulte el informe.
Amigos, tenemos prisa por informarles que la próxima conferencia Frontend Conf 2018 Moscú se llevará a cabo muy pronto, los días 4 y 5 de octubre. Los informes presentados y aceptados en el programa se pueden encontrar en esta página.
Estos son solo seis informes del último Frontend Conf, y hubo 7 veces más de ellos. Si desea aprender todo primero, suscríbase al canal de YouTube de la conferencia , todos los videos de los últimos años ya se han subido allí y los materiales se subirán en 2018.
Si prefiere recibir información a través de canales asíncronos, hay una lista de correo para usted. Allí se publican descifrados, anuncios de informes interesantes, mensajes sobre la apertura de ciertos videos, reuniones, etc.
En general, ¡quédate con nosotros! :)