Curso Web Developer

Bootcamp
Sección de Javascript

Conceptos de Javascript Asíncrono

Modern Javascript (ES6)
Fundamentos de Javascript Asíncrono
(Async)
Cuál es la diferencia entre los modelos
Asíncrono y Síncrono

● Síncrono: Espera hasta que un

proceso termine para iniciar el
siguiente

● Asíncrono: El proceso ocurre

independientemente de los procesos
que se estén corriendo en el
programa en ese instante.
Heap - Stack

Heap / Región de memoria libre:

Se dedica al alojamiento dinámico
de objetos.

Stack / Pila de Llamadas:

Alberga las instrucciones que deben
ejecutarse. Indica en qué parte del
programa nos encontramos en
Heap o región El Stack o Pila
cuanto a procesos.
de memoria de Llamadas
libre
Cómo funciona la Pila de Llamadas (The
Stack) ?
El stack comienza vacío, y cuando se invoca
una función, ésta automáticamente se agrega a
la pila de llamadas. Después de que la función
ha ejecutado todo el código, ésta se elimina
automáticamente del stack.

greetin
g()
sayHi()
Fuente de imágen: Lemon Code
Callbacks
Los Callbacks son patrones asíncronos en Javascript y que permiten
ejecutar operaciones futuras una vez se terminen las actuales y éstas lo
hayan notificado.

Un Callback es una función que se pasa como argumento a otra función

y que será invocada para completar algún tipo de acción.
Callback Hell
Se le denomina así a la complejidad ciclomática que viene de la
anidación de callbacks.

La anidación de Callbacks además

de restar legibilidad, dificulta el
mantenimiento y soporte del
bloque de código. A esto también
se le llama
Pyramid of Doom o Hadouken.
Promesas
Es un objeto que representa
la eventual finalización
exitosa o con algún fallo de
una operación asíncrona.

Una promesa consta de dos

argumentos: resolve y
reject, que nos indica qué
debe hacer la promesa en
caso de que todo vaya bien
(resolve) o si el proceso ha
fallado (reject ).
La promesa se resuelve o se rechaza de acuerdo a unas
condiciones dadas y su resolución o rechazo se maneja con los
métodos .then() y .catch()
AJAX
AJAX (Asynchronous Javascript and
XML) es una forma de utilizar
tecnologías para la web ya existentes
combinandolas para crear aplicaciones
dinámicas cuyo contenido puede
actualizarse sin necesidad de cargar la
página completa, creando así una
mejor experiencia de usuario y mayor
velocidad.

AJAX utiliza las capacidades intrínsecas

que los navegadores poseen: realizar
XML y JSON
XML y JSON son dos formatos muy conocidos dentro del terreno del envío
de datos, ya sea, por ejemplo, de servidor a servidor o de servidor a
navegador. Ambos estructuran y dan formato a la información y contenido
que se genera para las aplicaciones web de manera dinámica.

XML (Extensible Markup JSON (Javascript Object

Language) puede ser Notation) puede
considerado el padre del considerarse un formato
HTML. Es un lenguaje no ligero de intercambio de
predefinido, lo que nos datos. Está basado en un
permite generar nuestras subconjunto de
propias etiquetas. Javascript, aunque
totalmente independiente
XM JSON
L
Fetch
Es una API basada en Promesas flexible y potente que es usada para
recuperar ( fetch ) recursos. Básicamente, fetch() toma como
argumento obligatorio la ruta de acceso al recurso (url) el cual desea
recuperarse, para luego ser devuelto como una Promesa que es
resuelta por medio de un Response a dicha petición.
Los datos que se recuperan del recurso con Fetch son incluidos
como Readable Stream, que es un objeto que hace parte de la
API Stream, que contiene una gran cantidad de datos y cuyo
objetivo es permitirnos trabajar con esos mismos de manera
eficiente.
Para leer esta gran cantidad
de datos y trabajar con
ellos, usamos el método
json().
Éste método nos retorna
una promesa que debe
resolverse para poder
trabajar con los datos
arrojados.
Tengamos en cuenta que la
Promesa devuelve error
únicamente si Fetch no puede
hacer el pedido del recurso,
ejemplo, en problemas de
conexión de red o que el sitio
no exista. Códigos de estado
HTTP como 404 o 500 no
causan error.
Para solucionar esto,
asegurémonos entonces que la
propiedad del código de estado
HTTP no sea ok (200-299) y
lancemos un nuevo error (throw
new error) que nos permita
resolver la promesa con catch().
AXIOS
Axios es una librería externa
basada en Promesas que permite
trabajar y consumir datos de una
API. Posee dos diferencias clave
con la API Fetch:

● No necesitamos usar el
método json() para descifrar
los datos que nos llegan del
recurso. Axios lo hace
automáticamente.

● Cuando hay error en el pedido

del recurso, AXIOS maneja
ASYNC - AWAIT

Como parte de su versión ECMAScript

2017 (ES7), JavaScript ha agregado unas
características importantes para
trabajar con el código asíncrono,
haciéndolo mucho más fácil de escribir y
de leer. Éstas adiciones son las
Funciones asíncronas (async
functions) y la keyword await.
Async
Async es una palabra clave (keyword ) que va en frente de una función
y que vuelva a la misma una función asíncrona. Una función asíncrona
es aquella que devuelve una Promesa como valor.
Await
Await funciona de maravilla con las funciones asíncronas, ya
que puesta en una función de ésta clase nos permite pausar
nuestro código en esa línea en particular hasta que la Promesa
sea resuelta, devolviendonos el valor resultante de la misma.
ES6 - ECMAScript 6

Como lenguaje, Javascript ha tenido

diferentes especificaciones llamadas
ECMAScript, que le han adherido a su
funcionamiento diferentes
implementaciones.

Una de ellas, ECMAScript en su versión 6,

acortada en su término como ES6 y
lanzada en el año 2015, agrega diferentes
elementos que hacen su uso más
poderoso y ágil que en sus versiones
anteriores.
Let
En versiones anteriores de Javascript,
sólo teníamos una sola palabra para
declarar variables: var. Pero var tenía
algunas limitaciones. La nueva palabra
clave Let corrige muchas de estas
inconsistencias previas.

Con let, por ejemplo, no podemos

acceder a variables que se encuentren
dentro de un contexto diferente. Es
decir, si una variable pertenece a un
bloque (todo lo que se encuentre entre
llaves) en particular, no podremos
acceder a la misma.
Const
● Const es otra palabra especial
que nos permite declarar
variables.
● Const no puede cambiar el valor
de la variable, ya que como su
nombre lo indica, es una
constante.

● Al igual que let, Const también

tiene la restricción de acceso a
variables fuera de bloques.
● Podemos tener una variable con el
mismo nombre, pero si éstas se
encuentran dentro de llaves
distintas, no habrá problema
Arrow Functions (funciones tipo flecha)

En versiones anteriores de Javascript,

como la ES5, estábamos
acostumbrados a escribir funciones de
una manera en particular. ES6 agrega
un poco de ayuda sintáctica a la
creación de funciones, haciéndolas
mucho más fáciles de escribir y
acortando su longitud.
Podemos acortar aún más la función si el
valor a retornar es tan sólo uno.
Igualmente, si el argumento es único,
podemos quitar los paréntesis.
Template strings

Las plantillas de cadena

de texto (template
strings) permiten el uso
de expresiones
incrustadas, haciendo que
nuestro código se vea más
agradable a la vista y sea
fácil de leer.
Objetos: nuevas características y sintaxis

● Si las propiedades y
los valores son
idénticos, pueden
denotarse una sola
vez.

● Se agregó la nueva
característica
Propiedad
computada.
Desestructuración de Array y Objetos

La desestructuración de
arreglos (array
destructuring) y de objetos
permite desempaquetar
valores de los mismos en
grupos de variables, lo que
nos ayuda a simplificar y
crear código más legible.