TEST T.9

Comunicación síncrona VS asíncrona. síncrona. asíncrona.

SINCRONICIDAD EN JS. JS es single-threaded --> y en principio SÍNCRONO --> es decir, el código se ejecuta en el orden en que está escrito. Sin embargo, aveces ASÍNCRONO.

Motivos para usar ASÍNCRONÍA. eventos que no sabemos si serán respondidos o cuando, y no pueden quedarse bloqueando la experiencia de usuario ej: consultas a una API.

3 posibles soluciones a SINCRONICIDAD. Funciones callback. Promesas. Generadores, async/await...

En JS la PROGRAMACIÓN ASÍNCRONA se utiliza principalmente para... Gestionar eventos (callbacks) --> No se puede decir en qué momento de tiempo se ejecutará el código asociado a un evento, sólo podemos asegurar que SERÁ CUANDO OCURRA EL EVENTO. Operaciones en segundo plano (async/await) --> EVITAR que el hilo de ejecución se BLOQUEE si una PETICIÓN a una API TARDA en ser respondida (realizar varias peticiones a una API de manera paralela).

función callbacks (mirar ejs). es cualquier función que se pasa como parámetro para ser ejecutada. Generalmente se usan para definir un código asociado a un EVENTO. NO SABEMOS exactamente en QUÉ MOMENTO se ejecutará el código de la función de callback, sólo que SERÁ CUANDO OCURRA EL EVENTO.

PROBLEMAS PROGRAMACIÓN SÍNCRONA EN LA WEB. Implicaciones de ser JS single-threaded: - La carga de otros elementos en la página queda también bloqueada esperando - La gestión de eventos se detiene --> ya que todo el hilo queda bloqueado - La percepción para el usuario es que la página deja de responder. SOLUCIÓN --> operaciones que puedan bloquear --> se ejecuten en SEGUNDO PLANO --> se consigue con función async/await.

función async await --> SOLUCIÓN a operaciones bloqueantes. una función marcada como async no es bloqueante, si no que se ejecuta en paralelo con la función que la invoca. son promesas pero de forma transparente al progrmador. Las llamadas a servicios externos (por ejemplo, APIs REST) --> se encapsulan en funciones async. una función async sólo puede ser invocada dentro de otra función async. Las funciones síncronas, no pueden tener llamadas asíncronas en su interior.

PROMESAS (solución antigua de async/await). Antes se usaba objeto llamado Promise para gestionar llamadas asíncronas. La promesa --> llamaba a una función de callback ("then") si op. asíncrona éxito, si no --> a otra diferente ("catch").

await --> solución a operaciones bloqueantes. usar await para esperar la repsuesta de la API.

BUENAS PRÁCTICAS consideraciones generales. usar siempre ; --> tras cada instrucción. usar let --> para delcarar variables, en lugar de var. nombrar variables y funciones en camelCase. usar {} en lugar de new Object() y usar [] en lugar de new Array(). CONSISTENCIA: - usar siempre el mismo tipo de comillas - usar la misma indentación (recomendaciones: 4 espacios o 1 tab).

for of VS for...if. for...of --> para iterar sobre arrays. for...in --> para iterar sobre claves de Objects.

BUENAS PRÁCTICAS + consideraciones generales. usar el comparador === en vez de. usar !== en vez de !=. === es más estricto, ya que == intenta hacer conversiones de tipo y es más errático. 8 == "8" es true " " == 0 es true [] == "" es true true == 1 es true.

BUENAS PRÁCTICAS Función main. usar una función de entrada main en los scripts JS asociados a cada vista --> debe ser async si tiene llamada a API o cualquier operación asíncrona. document.addEventListener("DOMContentLoaded",main); La última línea indica al navegador que debe ejecutar la función main() cuando cargue la página. Por defecto en JS no existen las funciones de entrada.

BUENAS PRÁCTICAS modo estricto. ofrece un modo "estricto" opcional --> que cambia algunos comportamientos del lenguaje. Impide usar variables no declaradas. Impide que se puedan cambiar los valores como Nan y Infinity. Impide que se pueda definir un Object con propiedades repetidas. convierte en errores, cosas que de otro modo serían advertencias. se activa si aparece "use strict"; al principio del script. se recomienda su uso.

BUENAS PRÁCTICAS uso de módulos (mirar ejs). Permiten exportar e importar funciones y variables de otros módulos. Se recomienda su uso uso --> ya que si no todo lo que sea definido en el ámbito global --> será accesible por cualquier otro fichero cargado después --> dificultando la depuración. Para activar el uso de módulos --> type="module". cada archivo script es un módulo. ej: <script type="module" src="js/edit_photo.js"></script> indicamos que el sript ruta es un módulo.

ESTRUCTURA ORGANIZACIÓN DE CÓDIGO. mirar fotos.