Qué es el asincronismo

Clase 2 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

🤹🏻‍♀️ Clase #2: Qué es el asincronismo 2/21 🤹🏾‍♂️ . ✍🏾 ++Conceptos importantes para entender el asincronismo:++ . • 🧵 Thread: Thread para Javascript permite realizar programación multihilos en este entorno. En realidad, simula la creación y ejecución de hilos, pero para el desarrollador es lo mismo. Ésto simplifica muchísimo la creación de aplicaciones Javascript. • 🚫 Bloqueante: Una llamada u operación bloqueante no devuelve el control a la aplicación hasta que se ha completado. Por tanto el thread queda bloqueado en estado de espera. • 🚿 No bloqueante: Una tarea no bloqueante se devuelve inmediatamente con independencia del resultado. Si se completó, devuelve los datos. Si no, un error. • 🎞️ Síncrono: Las tareas se ejecutan de forma secuencial, se debe esperar a que se complete para continuar con la siguiente tarea. • 🚦 Asíncrono: Las tareas pueden ser realizadas más tarde, lo que hace posible que una respuesta sea procesada en diferido. La finalización de la operación I/O (entrada/salida) se señaliza más tarde, mediante un mecanismo específico como por ejemplo un callback, una promesa o un evento, lo que hace posible que la respuesta sea procesada en diferido. • 🛤️ Paralelismo: El paralelismo es la ejecución simultánea de dos o más tareas. Algunas tareas se pueden dividir en partes más pequeñas que pueden ser resueltas simultáneamente. • 🎮 Concurrencia: La concurrencia es la capacidad de un algoritmo o programa para ejecutar más de una tarea a la vez. El concepto es similar al procesamiento paralelo, pero con la posibilidad de que muchos trabajos independientes hagan diferentes cosas a la vez en lugar de ejecutar el mismo trabajo. • 🌀 Eventloop o Loop de eventos: El bucle de eventos es un patrón de diseño que espera y distribuye eventos o mensajes en un programa. . 📝 ++Formas de manejar la asincronía en JavaScript:++ . • 📩 Callbacks: Una función que se pasa como argumento de otra función y que será invocada. • 🫱🏼‍🫲🏾 Promesas: (implementado en ES6) Una promesa es una función no-bloqueante y asíncrona la cual puede retornar un valor ahora, en el futuro o nunca. • 🛣️ Async / Await: (implementado en ES2017) Permite estructurar una función asincrónica sin bloqueo de una manera similar a una función sincrónica ordinaria. . 📌 En JavaScript casi todas las operaciones de I/O (Entrada y Salida) no se bloquean. A esto se le conoce como asíncronismo. Lo único que no es procesado antes de que termine la operación son los callbacks, ya que éstos están amarrados a una operación y esperan a que sea finalizada para poder ejecutarse. . ⏳ El asincronismo es una manera de aprovechar el tiempo y los recursos de la aplicación, ejecutando tareas y procesos mientras otros son resueltos en background (como la llegada de la información de una API), para posteriormente continuar con las tareas que requerían esa información que no tenías de manera instantánea. . ⏲️ Un ejemplo fácil de asincronismo vs sincronismo es invitar a unos amigos a una fiesta y ofrecer una parrillada. Primero decides colocar la carne y verduras a la parrilla y luego repartir bebidas y algo para picar (snacks). Si fuera ++una persona síncrona++ (Blocking) tendrías que esperar a que la comida de la parrilla esté cocinada y luego atender a los invitados. Pero si fuera ++una persona asíncrona++ (Non Blocking) luego de poner la carne al carbón, sacas las bebidas frías de la nevera y compartes con los invitados mientras se cocina la carne. La acción de que la comida en la parrillada esté lista sería ++un callback++ que está esperando que finalice el proceso para ejecutarse. Pero otros procesos (como compartir la velada con bebidas y algo de picar) ya podrían irse realizando.

Daniel Palacios Romero

student•

Muchas gracias por el resumen, a veces me gusta leer mas que ver los videos, por eso agradesco mucho a los que se toman el tiempo de hacerlo <3 exito!!!

Eduardo Pérez

student•

Muy buenos tus apuntes, gracias por compartirlos!

Matias Diaz

student•

Cuando preguntan si JavaScript es multi-hilo y asíncrono

Kevin Salazar

student•

Si obvio, yo te entiendo.

Jonathan Forero

student•

Yesn't

José Alberto Ramírez Quiroz

student•

Esta clase es Oro para entender de forma muy facil el asincronismo

https://platzi.com/clases/1798-javascript-navegador/26016-asincronia/

Raúl Romero Sánchez

student•

excelente recomendación!!!

Juan Carlos Aguilar

student•

¡Gracias por el aporte!

Diego Garcia

student•

Tengo que decirlo, porque fui uno de los que constructivamente, dejaba mensajes para que nuestro Profesor Oscar mejorará varios aspectos para la enseñanza y que nosotros como estudiantes aprendiéramos mejor y más si recién comenzábamos. Hoy volviendo a ver estos cursos, felicito primero al profesional y persona que se preocupa por la mejora constante, tengo que reconocer el crecimiento del profe y agradecer su enseñanza, voy por su segundo curso y ya denoto un cambio muy positivo que ayuda mucho a nosotros los estudiantes. Gracias también al equipo platzi por tener en cuenta ese feedback que uno trata de aportar de la mejor manera.

Daniel Palacios Romero

student•

Opino igual, vi parte del curso anterior de Asincronismo y me parece que esta vez el profesor tuvo una evolucion importante y tambien el contenido.

Irving Juárez

student•

El profe da la clase como si estuviera diciendo un poema. Utiliza la pausa para atraer la atencion de la audencia, nos sorprende con enfasis cada vez que quiere remarcar algo... Solo hizo falta la rima

Raul Ochoa

student•

¿En qué formas JS puede manejar la asincronía?

Callbacks:

Una función que se pasa como argumento de otra función y que será invocada según sea su necesidad.
Promesas (ES6):

Función no-bloqueante y asíncrona la cual puede retornar un valor ahora, en el futuro o nunca.
Async / Await (ES2017)

Permite estructurar una función asincrónica sin bloqueo de una manera similar a una función sincrónica ordinaria.

Estos 3 conceptos son con los que más se trabajan dentro del asincronismo.

Paul Martin Vargas Portugal

student•

El asincronismo es básicamente una manera de aprovechar el tiempo y los recursos de nuestra aplicación, ejecutando tareas y procesos mientras otros son resueltos en background (como la llegada de la información de una API), para posteriormente continuar con las tareas que requerían esa información que no tenías de manera instantánea.

Un ejemplo fácil es comparando asincronismo vs sincronismo: En lenguajes síncronos al hacer un temporizador para ejecutar una función, todo el código se pausa hasta terminar el tiempo, mientras que en Javascript u otros lenguajes asíncronos, podemos estar aprovechando ese tiempo para ejecutar otros procesos hasta que ese tiempo finaliza.

GLOSARIO

API Interfaz de programación de aplicaciones (Application Programming Interface). Es un conjunto de rutinas que provee acceso a funciones de un determinado software. Concurrencia Cuando dos o más tareas progresan simultáneamente. Paralelismo Cuando dos o más tareas se ejecutan, literalmente, a la vez, en el mismo instante de tiempo. Bloqueante Una llamada u operación bloqueante no devuelve el control a nuestra aplicación hasta que se ha completado. Por tanto el thread queda bloqueado en estado de espera. Síncrono Es frecuente emplear ‘bloqueante’ y ‘síncrono’ como sinónimos, dando a entender que toda la operación de entrada/salida se ejecuta de forma secuencial y, por tanto, debemos esperar a que se complete para procesar el resultado. Asíncrono La finalización de la operación I/O se señaliza más tarde, mediante un mecanismo específico como por ejemplo un callback, una promesa o un evento, lo que hace posible que la respuesta sea procesada en diferido. Call Stack La pila de llamadas, se encarga de albergar las instrucciones que deben ejecutarse. Nos indica en que punto del programa estamos, por donde vamos. Heap Región de memoria libre, normalmente de gran tamaño, dedicada al alojamiento dinámico de objetos. Es compartida por todo el programa y controlada por un recolector de basura que se encarga de liberar aquello que no se necesita. Cola o Queue Cada vez que nuestro programa recibe una notificación del exterior o de otro contexto distinto al de la aplicación, el mensaje se inserta en una cola de mensajes pendientes y se registra su callback correspondiente. Eventloop o Loop de eventos Cuando la pila de llamadas (call stack) se vacía, es decir, no hay nada más que ejecutar, se procesan los mensajes de la cola. Con cada ‘tick’ del bucle de eventos, se procesa un nuevo mensaje. Hoisting Sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código en tiempo de compilación. DOM DOM permite acceder y manipular las páginas XHTML como si fueran documentos XML. De hecho, DOM se diseñó originalmente para manipular de forma sencilla los documentos XML. XML Lenguaje de marcado creado para la transferencia de información, legible tanto para seres humanos como para aplicaciones informáticas, y basado en una sencillez extrema y una rígida sintaxis. Así como el HTML estaba basado y era un subconjunto de SGML, la reformulación del primero bajo la sintaxis de XML dio lugar al XHTML; XHTML es, por tanto, un subconjunto de XML. Events Comportamientos del usuario que interactúa con una página que pueden detectarse para lanzar una acción, como por ejemplo que el usuario haga click en un elemento (onclick), que elija una opción de un desplegable (onselect), que pase el ratón sobre un objeto (onmouseover), etc. Compilar Compilar es generar código ejecutable por una máquina, que puede ser física o abstracta como la máquina virtual de Java. Transpilar Transpilar es generar a partir de código en un lenguaje código en otro lenguaje. Es decir, un programa produce otro programa en otro lenguaje cuyo comportamiento es el mismo que el original.

Jose Tellez

student•

Esa es una definicion muy entendible de lo que es el asicronismo

Jonathan Barzola

student•

Muy buen aporte!

Matias Diaz

student•

Una clase de apoyo a esta gran clase que dio Oscar.

Asincronía por Diego de Granda

Por si una clase de apoyo te fue poco, te dejo una segunda

Cómo funciona el asincronismo en JavaScript por Sacha

Porfirio González López

student•

El video fue de gran ayuda, Gracias por compartir.

Jorge Almaguer Sánchez

student•

Qué es el asincronismo

Asincronismo  Esto significa que tienen que ejecutarse tarea por tarea y en el transcurso de la evolución de las tecnologías hemos implementado ya sea conceptos librerías y recursos que le añaden a estos lenguajes de programación el poder de trabajar con el asincronismo y en este caso lo tenemos dentro de JS. 
JavaScript se define Como un lenguaje de programación sincrono por defecto y que sola mente utiliza un sub proceso un solo hilo para trabajar. 
JavaScript es síncrono y no bloquean, con un bucle de eventos (concurrencia), implementando con un único hilo para sus interfaces de I/O.  (entrada y salida) 
JavaScript es single-threaded (un solo hilo) Aún con múltiples procesadores en tu computadora, JavaScript sigue procesándolo en una sola tarea o en un solo hilo, llamado el hilo principal. 
Bloqueante  Una tarea no devuelve el control hasta que se ha completado. · significa que una tarea no devuelve el control de la implementación o de la lógica que estes haciendo hasta que se a completado, por lo tanto una tarea puede llegar para ser bloqueada. 
No bloquean:  Una tarea se devuelve inmediatamente (el control) con independencia del resultado.  Si se completó, devuelve los datos.  Si no, un error. 
Síncrono Las tareas se ejecutan de forma secuencia, se debe esperar a que se complete para continuar con la siguiente tarea. 
Asíncrono Las tareas pueden ser realizadas mas tarde, lo que hace posible que la respuesta pueda ser diferida y con esto poder continuar, avanzar hacer otras tareas y gradualmente obtener la información que deseamos. 
Concurrencia en JavaScript Para eso utiliza un modelo de concurrencia basado en eventos mejor conocido como event “loop”  
EventLoop El bucle de eventos que no es mas que un patrón de diseño que espera y distribuye eventos o mensajes en un programa segun sea el caso. 

Dentro de el lenguaje de programación tenemos Callbacks 
Callbacks Una funcion que es basada como un argumento de otra función y que sera invocada segun sea la nececidad. 
Promesas… (ES6) Son funciones no-bloqueantes que trabajan con la asincrónica y con lo cual va a cumplir como su nombre lo dice una promesa  la cual puede retornar un valor ahora, en el futuro o nunca.  
Async / Await… (ES2017) Nos va a permitir estructurar una función asíncronica sin bloqueo de una manera similar a una función sincrónica ordinaria y con esto añadimos una forma de utilizar sintaxis mas amigable, entendible, fácil de trabajar sin tener que recurrir a problemas particulares que nos daban los colebars los cuales original mente enpesabamos a tener las soluciones a este problema de el asincronismo. 
JavaScript acaba de convertirse en Multi-Threaded con la capacidad de realizar múltiples tareas simultáneamente. El concepto como tal de como fue conseguido es sincrono, pero tenemos herramientas que nos ayudan a trabajar con la asincrónica dentro de lo que vendría siendo nuestro proyecto.  
JavaScript es Asíncrono y no bloqueante, con un bucle de eventos (concurrencia) implementando con un único hilo para sus interfaces de I/O (entrada y salida). 
Definición de asincronismo Es una manera de aprovechar el tiempo y recursos de nuestra aplicación, ejecutando tareas y procesos mientras otros son resueltos en segundo plano.

Ulises Pérez

student•

La asincronia del trabajo remoto me trajo hasta aqui xD

Luis Hernando Sendoya Serrato

student•

conclusión: JavaScript ha evolucionado la forma en que agiliza la realización de tareas. En sus inicios se concibió de modo síncrono, pero han surgido mejoras sustanciales que permiten ser un lenguaje de programación asíncrono, no bloqueante, que está definido por el EventLoop, que se encarga de distribuir las tareas en un único hilo en el input y output de la interfaz de usuario.

Bárbaro Javier Valmaseda Vázquez

student•

Wow me encanta este nuevo Oscar, ha mejorado un montón pedagógicamente

LUZ ADRIANA MARTINEZ RAMIREZ

student•

Jajajajaja y la respuesta final es NO :V

Josue Marcilla Diaz

student•

En buena hora Platzi actualizó su curso, me parece muy bueno, toma más temas y se explaya mucho más, ¡excelente!

Kevin Salazar

student•

¿En dónde puedo leer sobre este tema?

Kevin Salazar

student•

Por aquí.

Christopher Armando Jiménez Valverde

student•

JavaScript es síncrono por naturaleza ya que maneja un solo hilo de concurrencia para el Input y Output, sin embargo por medio de funciones como Callbacks, Promesas y/o Async-Await JavaScript puede ser asíncrono por lo que deja de ser bloqueante y se pueden realizar diferentes tareas o peticiones en paralelo.

Jherom Chacon

student•

La concurrencia en Javascript. En este video podemos ver en profundidad como funciona el EventLoop de Javascript: https://youtu.be/h1P2vmquFMA Básicamente tendremos un call Stack dónde almacenaremos todo el código de nuestro script, es decir todo los que tenemos en nuestro scope global. Luego vamos a ir ejecutando las instrucciones en un orden LIFO (por eso se llama Stack). Aquellas operaciones que impliquen un orden de procesamiento diferido o asíncrono, como las que implican setTimeout o setInterval serán administradas por la API del tiempo o timbre API alimentando el Callback Queue que es una cola FIFO dónde serán almacenando los bloques de código que deban ser llamados de forma asíncrona. Estos bloques de código se irán poniendo en el Call Stack cuándo este esté vacío.

Jherom Chacon

student•

Característica no bloqueante de Javascript. Esta característica hace referencia a una capacidad asíncrona de trabajo en la que sin importar se ejecute o no correctamente permite al código continuar, mostrando un resultado esperado o un error dado el caso.

Olga Acosta Bravo

student•

Asincronismo en JavaScript

Los lenguajes de programación por sí mismos son síncronos, deben ejecutarse tarea por tarea y se les ha implementado con el tiempo librerías o nuevos recursos para poder trabajar con el asincronismo.

JS es un lenguaje de programación síncrono por defecto y que solamente utiliza un subproceso, un solo hilo.

JavaScript es single-threaded. Aún con múltiples procesadores, solo puede ejecutar tareas en un solo hilo.
Conceptos a considerar en JavaScript:

JS es síncrono y no bloqueante, con un bucle de eventos (concurrencia), implementado con un único hilo para sus interfaces de I/O (input/output).
- Bloqueante: una tarea no devuelve el control de la implementación o la lógica hasta que se ha completado.
- No bloqueante: una tarea devuelve inmediatamente el control para poder continuar sin necesidad de detener nuestra aplicación, ya sea devolviendo los datos o manejando errores.
- Síncrono: las tareas se ejecutiva de forma secuencial, deben esperar a que se completen para continuar con la siguiente tarea.
- Asíncrono: las tareas pueden ser realizadas más tarde, lo que hace posible que la respuesta pueda ser diferida y avanzar en otras tareas para obtener la información que deseamos después.
- Concurrencia en JS: utiliza un modelo de concurrencia basado en eventos o “event loop”.
- EventLoop: el bucle de eventos que no es más que un patrón de diseño que espera y distribuye los eventos según sea el caso.
Formas de manejar la asincronía en JavaScript:
- Callbacks: función que es pasada como argumento de otra función y que será invocada según sea la necesidad.
- Promesas (ES6): función no-bloqueante y asíncrona la cual puede retornar un valor ahora, en el futuro o nunca.
- Async / Await: permite estructurar una función asíncrona sin bloqueo de una manera similar a una función síncrona ordinaria.
Con las herramientas para manejar la asincronía en JavaScript, podríamos definir que JS es: asíncrono y no bloqueante, con un bucle de eventos (concurrencia) implementado con un único hilo para sus interfaces I/O.

Juan Nicolás Cabrera

student•

Es crucial que en la escuela de javaSript agreguen el curso de EngineV8 y el navegador por Diego de Granda, antes incluso que el de Ecmascript, es inentendible lo que pasa sino, se los recomiendo con amor

JOSE FABIAN BONILLA GUZMAN

student•

voy a intentarlo, estos temas son complejos por lo mismo estoy leyendo antes de ver videos