novedades en arquitectura front end // meetup ux ui @utn mendoza

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


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


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 add textSecond level contentSecond level contentThird level content



ConfidentialConfidential




ConfidentialConfidential




Confidential




Confidential




Confidential




Confidential




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



Confidential


Click to add text



Confidential






Click to add text

Click to add text


Sptimo nivel del esquemaSubtitle








Click to add text

Click to add text



Click to add text

Click to add text











Sptimo nivel del esquemaClick to add text Click to add text

Click to add text


Sptimo nivel del esquemaClick to add textClick to add text

Click to add text










Sptimo nivel del esquemaClick to add textClick to add text

Click to add text


Confidential


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]

novedades en arquitectura front end // meetup ux ui @utn mendoza

Design