If you can't read please download the document
Upload
diego-suarez
View
174
Download
1
Embed Size (px)
Citation preview
PowerPoint Presentation
Confidential
Confidential
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to edit Master text styles
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaNameTitleDate
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textClick to add textClick to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textSecond level contentSecond level contentThird level content
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
ConfidentialConfidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textSecond level contentSecond level contentThird level content
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
ConfidentialConfidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textSecond level contentSecond level contentThird level content
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textSecond level contentSecond level contentThird level content
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textSecond level contentSecond level contentThird level content
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textClick to add textClick to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textClick to add textClick to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
ConfidentialPulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to edit Master text styles
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add contentClick to add contentClick to add content
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textSecond level contentSecond level contentThird level content
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textClick to add textClick to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
ConfidentialPulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Click to add text
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textClick to add textClick to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
ConfidentialPulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Click to add text
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
Click to add text
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add textClick to add textClick to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text
ConfidentialPulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add text Click to add text
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add textClick to add text
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaSubtitle
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquema
Sptimo nivel del esquemaClick to add textClick to add text
Click to add text
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add text
Confidential
Pulse para editar el formato de esquema del textoSegundo nivel del esquemaTercer nivel del esquemaCuarto nivel del esquemaQuinto nivel del esquemaSexto nivel del esquemaSptimo nivel del esquemaClick to add text
Confidential
Arquitectura UI
Rodrigo SobischSr Front End Developer12-10-2016
HTTP 2
Promises
Service Workers
Agenda
Http 2
- Soporte- Http 1.1 vs. Http 2- Que dejar de hacer?- Que seguir haciendo?
En Http2 se usan las mismas llamadas que en http1.1 (mismos mtodos: 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
Transicin de http1.1 a Http 2
Http 1.1 vs. Http2
Consiste en separar tanto los archivos estticos como las API en diferentes servidores para aumentar la cantidad de llamadas TCP disponibles totales para la aplicacin.
Prcticas obsoletas
Prctica en la cual se construye una gran imagen formada por una cantidad definida de imagenes mas pequeas (generalmente conos y pequeos assets) y despus al momento de usarlas en la aplicacin se selecciona que porcin de la gran imagen se desea utilizar (mediante css).
Consiste mediante el mtodo de concatenacin unir diferentes archivos en uno de mayor tamao, 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
Concatenacin
Buenas prcticas a mantener
Minificado: Reduccin del cdigo/texto a su mnima expresin quitando todos los smbolos superfluos y reemplazando los smbolos humanamente comprensibles por equivalentes sin asociacin con el negocio en cuestin.
Ofuscacin agrega un nivel de complejidad alterando el cdigo original mediante procesos de parseo y sustitucin.
Compresin de los archivos mediante GZIP utilizando alguna de las dos tcnicas ms populares:Configuracin del servidor web para realizar tal tarea
Configuracin para realizar la compresin desde el cdigo propiamente dicha
Mas recomendable la primera opcin.
Minificado y ofuscacin
Compresin
Promises
- Qu son?- Descripcin- Estados- Mtodos- .then y .catch- Ejemplos
Es un objeto usado para realizar cmputo asncrono.
Representa un valor que puede estar disponible ahora, en el futuro o nunca.
Javascript es de un solo hilo, lo cual a travs de promesas puede aumentar considerablemente la velocidad de las aplicaciones, quitando los bloqueos caractersticos de llamadas sncronas.
Qu son las promesas?
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 mtodos asncronos devolver promesas en vez del valor deseado para permitir obtener ese valor en algn momento futuro.
Recibe como parmetro una funcin ejecutora, que recibe callbacks para manejar xito y fracaso.
Descripcin
Fulfilled (cumplida): La accin relacionada a la promesa tuvo xitoRejected (rechazada): La accin relacionada a la promesa fallPending (pendiente): No ha sido cumplida o rechazada anSettled (arreglada): Ha sido cumplida o rechazada
Estados
Promise.all(iterable)
Promise.race(iterable)
Promise.reject(reason)
Promise.resolve(value)
Mtodos
Permiten realizar operaciones con los resultados de la resolucin de una promesa (o cadena), dando un contexto de ejecucin asncrono a la llamada original cuando esta es cumplida (then) o rechazada (catch).
Then y Catch
Ejemplo 1:
Ejemplo 2:
Service Workers
- Qu son?- Para qu sirven?- Ciclo de vida- Performance- Ejemplos
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 interaccin del usuario. Hoy en da ya soportan notificaciones push y sincronizaciones asncronas. En el futuro soportarn sincronizaciones peridicas y geofencing.
Su principal uso hoy en da es interceptar y manejar llamadas de red, incluyendo el manejo programtico de una cach de respuestas.
Qu son?
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
Ciclo de vida
Registrar un service worker
Instalar un service worker
Cache y devolucin de respuestas
Versiones
Gotchas y grises
Si la instalacin 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 imgenes responsivas y el tamao de la cache
Performance
Preguntas?
Muchas Gracias!
Rodrigo SobischSr Front End [email protected]