Novedades en Arquitectura Front End // Meetup UX UI @UTN Mendoza
Descargar como ODP, PDF1 recomendación495 vistas
El documento explora la transición de HTTP/1.1 a HTTP/2, destacando sus nuevas características como multiplexado y server push que mejoran la eficiencia de las aplicaciones web. También discute buenas prácticas para la optimización del rendimiento, incluyendo minificación, ofuscación y compresión de archivos, así como el uso de promesas y service workers para manejo asíncrono y mejora de la experiencia del usuario. Además, el documento presenta ejemplos prácticos y el ciclo de vida de los service workers, su importancia en aplicaciones de baja conectividad y consideraciones de rendimiento.
Novedades en Arquitectura Front End // Meetup UX UI @UTN Mendoza
- 2. 2 Confidential Arquitectura UI Rodrigo Sobisch Sr Front End Developer 12-10-2016
- 3. 3 Confidential 1. HTTP 2 2. Promises 3. Service Workers Agenda
- 4. 4 Confidential Http 2 - Soporte - Http 1.1 vs. Http 2 - Que dejar de hacer? - Que seguir haciendo?
- 5. 5 Confidential • En Http2 se usan las mismas llamadas que en http1.1 (mismos métodos: GET, PUT, POST, PATCH y DELETE) Lo nuevo: • Soporte para multiplexado de llamadas TCP • Server push y proactividad serverside para formar cache en el cliente • RST_STREAM frame, habilidad para cancelar solicitudes • Es binario, no texto, soporta otras encriptaciones Soporte de funcionalidades
- 8. 8 Confidential Transición de http1.1 a Http 2
- 9. 9 Confidential Http 1.1 vs. Http2
- 10. 10 Confidential • Consiste en separar tanto los archivos estáticos como las API en diferentes servidores para aumentar la cantidad de llamadas TCP disponibles totales para la aplicación. Prácticas obsoletas • Práctica en la cual se construye una gran imagen formada por una cantidad definida de imagenes mas pequeñas (generalmente íconos y pequeños assets) y después al momento de usarlas en la aplicación se selecciona que porción de la gran imagen se desea utilizar (mediante css). • Consiste mediante el método de concatenación unir diferentes archivos en uno de mayor tamaño, lo cual reduce la cantidad de llamadas TCP hechas a los servidores y no afecta el resultado final del lado del cliente (estando bien aplicada). TCP sharding CSS Spriting Concatenación
- 11. 11 Confidential Buenas prácticas a mantener • Minificado: Reducción del código/texto a su mínima expresión quitando todos los símbolos superfluos y reemplazando los símbolos humanamente comprensibles por equivalentes sin asociación con el negocio en cuestión. • Ofuscación agrega un nivel de complejidad alterando el código original mediante procesos de parseo y sustitución. • Compresión de los archivos mediante GZIP utilizando alguna de las dos técnicas más populares: – Configuración del servidor web para realizar tal tarea – Configuración para realizar la compresión desde el código propiamente dicha Mas recomendable la primera opción. Minificado y ofuscación Compresión
- 12. 12 Confidential Promises - ¿Qué son? - Descripción - Estados - Métodos - .then y .catch - Ejemplos
- 13. 13 Confidential • Es un objeto usado para realizar cómputo asíncrono. • Representa un valor que puede estar disponible ahora, en el futuro o nunca. • Javascript es de un solo hilo, lo cual a través de promesas puede aumentar considerablemente la velocidad de las aplicaciones, quitando los bloqueos característicos de llamadas síncronas. ¿Qué son las promesas?
- 14. 14 Confidential • Es un proxy para un valor no necesariamente conocido cuando la promesa es creada. Te permite asociar manejadores para cuando este valor esté disponible o falle. Permitiendo métodos asíncronos devolver promesas en vez del valor deseado para permitir obtener ese valor en algún momento futuro. • Recibe como parámetro una función ejecutora, que recibe callbacks para manejar éxito y fracaso. • Descripción
- 15. 15 Confidential Fulfilled (cumplida): La acción relacionada a la promesa tuvo éxito Rejected (rechazada): La acción relacionada a la promesa falló Pending (pendiente): No ha sido cumplida o rechazada aún Settled (arreglada): Ha sido cumplida o rechazada • Estados
- 16. 16 Confidential • Promise.all(iterable) • Promise.race(iterable) • Promise.reject(reason) • Promise.resolve(value) Métodos
- 17. 17 Confidential • Permiten realizar operaciones con los resultados de la resolución de una promesa (o cadena), dando un contexto de ejecución asíncrono a la llamada original cuando esta es cumplida (then) o rechazada (catch). Then y Catch
- 20. 20 Confidential Service Workers - ¿Qué son? - ¿Para qué sirven? - Ciclo de vida - Performance - Ejemplos
- 21. 21 Confidential • Un service worker es javascript que el navegador corre en segundo plano, separado de la pagina web, dando opciones a funcionalidades que no necesitan una pagina web o interacción del usuario. Hoy en día ya soportan notificaciones push y sincronizaciones asíncronas. En el futuro soportarán sincronizaciones periódicas y geofencing. • Su principal uso hoy en día es interceptar y manejar llamadas de red, incluyendo el manejo programático de una caché de respuestas. ¿Qué son?
- 22. 22 Confidential • Sirven principalmente para mejorar la experiencia de usuarios en situaciones de baja o nula conectividad. • Utilizados como proxy de red permitiendo el control de las peticiones de red ¿Para qué sirven? Offline first apps
- 24. 24 Confidential Registrar un service worker
- 25. 25 Confidential Instalar un service worker
- 26. 26 Confidential Cache y devolución de respuestas
- 28. 28 Confidential Gotchas y grises • Si la instalación falla, no es sencillo darse cuenta • Fetch no incluye credenciales como cookies por defecto • URL de terceros que no soporten CORS fallan por defecto • Manejo de imágenes responsivas y el tamaño de la cache
- 31. 31 Confidential Muchas Gracias! Rodrigo Sobisch Sr Front End Developer r.sobisch@globallogic.com 261-543-6483