Qué es el asincronismo

🤹🏻‍♀️ 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.

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

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

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

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.

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

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.

¿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.

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.

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
  

		**Qué es el asincronismo**

1. 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.

2. 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.

3. 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)

4. 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.

5. 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.

6. No bloquean:
   Una tarea se devuelve inmediatamente (el control) con independencia del resultado.
   Si se completó, devuelve los datos.
   Si no, un error.

7. Síncrono
   Las tareas se ejecutan de forma secuencia, se debe esperar a que se complete para continuar con la siguiente tarea.

8. 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.

9. Concurrencia en JavaScript
   Para eso utiliza un modelo de concurrencia basado en eventos mejor conocido como event “loop”

10. 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

11. Callbacks
    Una funcion que es basada como un argumento de otra función y que sera invocada segun sea la nececidad.

12. 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.

13. 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.

14. 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.

15. 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).

16. 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.

La asincronia del trabajo remoto me trajo hasta aqui xD

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.

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

Jajajajaja y la respuesta final es NO :V

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.

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.

• 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.

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

Gracias a las herramientas añadidas a JavaScript es que podemos decir esto:

<aside>
💡 JavaScript es un lenguaje multihilo con capacidad de realizar tareas simultáneamente.

</aside>

No obstante, cabe recalcar que JavaScript se concibió como síncrono y de un solo hilo, son las herramientas las que dieron la definición anterior.

Con muchas ganas de aprender asincronismo de mano del profe Oscar

¿Qué es asincronismo?

En JavaScript, el asincronismo es una característica crucial debido a su naturaleza basada en eventos y al entorno de ejecución en el que se encuentra comúnmente: el navegador web. JavaScript se ejecuta en un solo hilo, lo que significa que solo puede realizar una tarea a la vez. Sin embargo, para manejar operaciones que podrían bloquear la ejecución, como la carga de recursos externos o las solicitudes a servidores, se utilizan técnicas asincrónicas para evitar que el hilo principal quede inactivo.

Aquí hay algunas formas comunes en las que se implementa el asincronismo en JavaScript:

1. Callbacks: Los callbacks son funciones que se pasan como argumentos a otras funciones. Se utilizan para manejar acciones asíncronas. Por ejemplo, en una solicitud de XMLHttpRequest (XHR) para obtener datos de un servidor, un callback se ejecuta cuando los datos están listos para ser procesados.

   fetchDataFromServer(function(data) {
     // Hacer algo con los datos obtenidos
   });
   

2. Promesas: Las promesas son una abstracción más avanzada que maneja el asincronismo. Permiten un mejor manejo de la ejecución asíncrona y el manejo de errores. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. Las promesas tienen dos métodos clave: then() para manejar el resultado exitoso y catch() para manejar errores.

   fetchDataFromServer()
     .then(function(data) {
       // Hacer algo con los datos obtenidos
     })
     .catch(function(error) {
       // Manejar errores
     });
   

3. Async/await: Esta es una sintaxis más moderna y legible para trabajar con promesas. La palabra clave async se coloca antes de una función para indicar que contiene operaciones asíncronas, y await se usa dentro de la función para esperar a que una promesa se resuelva antes de continuar.

   async function fetchData() {
     try {
       const data = await fetchDataFromServer();
       // Hacer algo con los datos obtenidos
     } catch (error) {
       // Manejar errores
     }
   }
   

En resumen, en JavaScript, el asincronismo se implementa mediante callbacks, promesas y la sintaxis async/await. Estas técnicas permiten que las operaciones asíncronas se manejen de manera más eficiente y legible, evitando bloqueos en la ejecución y mejorando la capacidad de respuesta de las aplicaciones.

Espero sea de utilidad. 👨‍💻

Ejecucion en Parallel vs Concurrency
.
Un **cpu ** es una parte física del computador que ejecuta el software (nuestro código), para simplificar un poco el cpu ejecuta una instrucción a la vez.
.
Una tarea esta compuesta de una o más instrucciones.
.

• En ejecuciones en Parallel cada tarea es ejecutada en su propio cpu. Así cada cpu ejecuta su conjunto de instrucciones dentro de la Tarea asignada.
  Tarea_1 –> cpu_1
  Tarea_2 –> cpu_2

.

• En ejecuciones en Concurrency es una ilusión de ser ejecutadas en Parallel pero lo que hacer es compartir el mismo cpu, para ejecutar dos o mas tareas a la vez. Así el cpu_1 ejecuta alternando entre las instrucciones de la Tarea_1 y la Tarea_2.
  Tarea_1 --_
  . . . . . . . . _ –> cpu_1
  Tarea_2 –

.
.
.
.
Si me equivoque en algo o puedes ayudarme con feedback, te lo agradezco mucho si dejas una respuesta a este aporte 😄.

Recuerden…

JavaScript es un lenguaje asíncrono de concurrencia y no bloqueante, esto porque nuestro espacio de ejecución solo puede responder a 1 tarea a la vez pero pudiendo hacerlas sin importar si la respuesta es dato o error con tal de no obstruir el programa.

Esta muy buena esta clase, por que es como un glosario de los conceptos que veremos a lo largo del curso y son los aspectos principales del manejo de los procesos síncronos y asíncronos en JavaScript indispensable esta clase!! 💚

Mis apuntes de Call Stacks https://coda.io/d/_djCO9D-Iyr0/The-JavaScript-Call-Stack_sunXU

Formas en las que JavaScript puede manejar la Asincronía:
Callbacks
Promesas
Async / Await

callback -> funcion pasado hacia otra funcion !!

Modelo de concurrecion basado en evento llamado event loop

Este video de youtube es sobre como funciona el event loop, va paso a paso. Me ayudo a entender un poco mas como funciona el asincronismo en chrome.

Si tienen dudas acerca de como funciona y entienden inglés, el siguiente video fue lo que me iluminó respecto a casi todos los conceptos que menciona Oscar:

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

¡Espero sea de ayuda!

por aca un ejemplo practico de asincronismo.

https://www.youtube.com/watch?v=bWvnWhVCHAc

Es importante no confundir paralelismo y concurrencia como me pasó a mi 😅

• Concurrencia: Capacidad de un sistema para manejar múltiples tareas o procesos simultáneamente
• Paralelismo: Capacidad de un sistema para ejecutar múltiples tareas o procesos simultáneamente en núcleos diferentes de procesamiento

La diferencia es clave:

• Concurrencia -> Manejar
• Paralelismo -> Ejecutar

Por lo tanto JS goza de concurrencia, pues puede manejar distintas tareas simultáneamente, ejecutando unas sincronamente y “postergando” otras (sujetándolas a alguna espera, evento, etc.)

NB: Este concepto de tratar tareas de manera no bloqueante sujetándolas a ciertos triggers gracias a un event loop es la nominada: “event-driven programming” o la “programación basada en eventos”

Cualquier aporte o crítica a mi pequeñísima investigación de conceptos es bienvenida 😃

"Concurrencia en JavaScript: Utiliza un modelo de concurrencia basado en…"
No pos muy bien…

Obligatorio ver este video al menos 2 veces, no porque el profe no sepa explicar, si no para que nos quede bien clarito, este video es importantisimo!! Gracias 😃

https://stackoverflow.com/questions/1050222/what-is-the-difference-between-concurrency-and-parallelism#1050257

Recurso en inglés de StackOverflow sobre programación concurrente y paralela

Les dejo un ejemplo de callback

function saludar(nombre) {
  alert('Hola ' + nombre);
}

function procesarEntradaUsuario(callback) {
  var nombre = prompt('Por favor ingresa tu nombre.');
  callback(nombre);
}

procesarEntradaUsuario(saludar);

Link: https://developer.mozilla.org/es/docs/Glossary/Callback_function

Vengo de ver un curso antiguo donde Oscar era el profe, y o sea, no estaba mal, pero ha mejorado muchísimo como profe, felicitaciones y gracias por ayudarme a entender bien este concepto 🙂 estoy ansioso de seguir con las otras clases

Definición de características de Javascript: Javascript es asíncrono y no bloqueante con un bucle de eventos que define su concurrencia y que implementa un único hilo de procesamiento.

Descripción propiedad de Javascript: Single Thread. Aunque tengas una arquitectura de múltiples procesadores en tu computador, Javascript trabajará en un único hilo llamado hilo principal.

Característica bloqueante de Javascript. Significa que una tarea no devuelve el control hasta que esta haya terminado bloqueando por completo el flujo del programa. Un ejemplo de esto se encuentra en el uso de los Alert.

Característica de asincronismo en Javascript. Las tareas pueden ser realizadas mas tarde haciendo posible que su respuesta sea procesada en diferido. Podemos continuar nuestro procesamiento sin tener que esperar que una API devuelva los datos que le pedimos. Ya si estos se muestran o no no va a significar que nuestra página se congele mientras se espera la respuesta del API.

Caracteristica de sincronismo en Javascript. Cada tarea deberá esperar a que termine la anterior para continuar con la siguiente.

Básicamente el ser síncrono es que puede realizar una tarea a la vez, mientras que cuando es asíncrono realiza varias tareas a la vez, donde estas tareas se realizan en “segundo plano” hasta que estén listas para ser usadas.

Mi único conflicto con los cursos de Oscar es que redunda mucho sus ideas, y tanto rodeo le hace perder el hilo. “Ahora… Mañana… ó Nunca” ¡Por Dios!

Oscar Bajaras TOP 1 😎

JavaScript is an synchronous language, executing task by task in a one single thread, non-blocking, with a event loop to hangle concurrency
.
.
Asynchronims is a paradigm where we need handle things happens in a parallalel way or in different moments. Where task are executed independently of each other and do not need to wait for each other to complete.
.
Asynchronous operations can occur concurrently or in a non-blocking manner, allowing the program to continue executing other tasks while waiting for certain operations to finish.
.
It looks like a assembly line where every box is a task and they pass throught the executer one by one, like in a line assembly
.

Me encantó la explicación final

Osea es singlethrea multithread

ASINCRONISMO CON JAVASCRIPT

-Todos los lenguajes de programación son síncronos. Es decir, tienen que ejecutarse tarea por tarea.

-JavaScript procesa las tareas en un solo hilo (single-thread), sin importar si se tiene o no múltiples procesadores.

-Conceptos clave:

*Bloqueante: una tarea no devuelve el control hasta que se ha completado. Ejemplo la función alert() para que siga la ejecución luego de esta, se tiene que cerrar el cuadro que invoca.

*No bloqueante: Una tarea devuelve el control inmediatamente con independencia del resultado. Si se completó, devuelve los datos, sino arroja un error.

*Síncrono: Las tareas se ejecutan de manera secuencial y por ende deben esperar a que se completen para continuar con la siguiente tarea.

*Asíncrono: Las tareas pueden ser realizadas más tarde, por lo que la respuesta puede ser diferida, mientras otras tareas se estén ejecutando durante esa espera.

*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: 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.

-CALLBACKS: Una función es pasada como argumento en otra función.

-PROMESAS (ES6): Son funciones no bloqueantes y asíncronas, las cuales pueden retornar un valor ahora, en el futuro o nunca.

-ASYNC/AWAIT: Permite estructurar una función asincróna sin bloqueo de una manera muy similar a una función sincróica ordinaria.

Con todo lo mencionado se puede definir a JavaScript como un lenguaje asíncrono, y no bloqueante.

JS curso asincronismo. que significa que un lenguaje sea bloqueante.

• Una de las características importantes de JavaScript es que es asíncrono, lo que significa que puede hacer varias cosas al mismo tiempo. También es “no bloqueante”, lo que significa que cuando se hace una tarea, no bloquea todo el programa. En otras palabras, puedes hacer algo más mientras estás esperando que una tarea se complete.

• Para permitir que JavaScript haga varias cosas al mismo tiempo, usa un “bucle de eventos”. Este es un proceso que permite que el programa espere a que ocurran eventos, como hacer clic en un botón o recibir una respuesta de un servidor, mientras se sigue ejecutando el resto del programa.

• Aunque JavaScript puede hacer varias cosas al mismo tiempo, utiliza solo un hilo para sus interfaces de entrada/salida (I/O). Esto significa que solo puede hacer una cosa a la vez para leer o escribir datos en la pantalla o en el servidor. Sin embargo, el bucle de eventos ayuda a mantener todo en orden, permitiendo que el programa responda rápidamente a las solicitudes de los usuarios.

2/26 Qué es el asincronismo
Los lenguajes de programación son sincronos de por sí. Esto significa que se ejecutan tarea, a tarea. Se le han agregado a los lenguajes de programación a traves de librerias, conceptos y recursos la posibilidad de trabajar de manera asincronica. Para el caso de JavaScript es un lenguaje de programación síncrono por defecto y que solo utiliza un subproceso, es decir un solo hilo para trabajar. Otra forma de definirlo es que JavaScript es síncrono y no bloqueante, con un bucle de eventos (concurrencias), implementado con un único hilo para sus interfaces de I/O.

Los conceptos que se manejan de forma general son:

• Single-Threaded: JavaScript solo puede realizar una tarea a la vez, lo que lo hace menos eficiente para manejar tareas intensivas en recursos y para aprovechar los sitemas de múltiples núcleos.
• Bloqueante: Una tarea en JavaScript debe completarse antes de que se pueda realizar la siguiente tarea. Esto puede hacer que la ejecución de tareas intensivas en recursos se vuelva lenta o incluso se detenga, lo que afecta el rendimiento de la aplicación.
• No Bloqueante: una tarea en JavaScript no tiene que esperar hasta que se completa otra tarea antes de poder comenzar.
• Síncrono: las tareas se relizan una a la vez en un orden determinado, es decir, una tarea debe completarse antes de que se inicie la siguiente.
• Asíncrono: Varias tareas pueden ejecutarse al mismo tiempo sin esperar a que una tarea se complete antes de iniciar la siguiente.
• Concurrencia: Varias tareas pueden ejecutarse al mismo tiempo en un solo hilo de ejecución.
• EventLoop: Es un mecanismo de programación que permite manehar la concurrencia y el asíncronismo. El event loop verifica constantemente si hay tareas que se han completado, y si es así, las maneja de manera asíncrona. De esta manera permite que varias tareas se ejecuten al mismo tiempo sin bloquear el hilo de ejecución.

Formas de Manejar la asincronía en JavaScript:

• Callbacks: Son funciones que se pasan como argumentos a otras funciones y se llaman después de que se completa una tarea asíncrona.
• Promesas: Son objetos que representan valores que pueden estar disponibles ahora, en el futuro o nunca, y permiten manejar de forma asíncrona la finalización de una tarea.
• Async y Await: Son palabras clave de javaScript que se utilizan para escribir código asincrónico de forma síncrona y fácilmente legible. Permiten esperar la finalización de una tarea asincrónica antes de continuar con la ejecución del código.

En resumen JavaScript es asíncrono y no bloqueante, con un bucle de eventos (concurrencia) implementado con único hilo para sus interfaces de I/O.

Los lenguajes de programación por si mismos son síncronos, o sea que ejecutan solo de a tarea. JS es sincrónico y no bloqueante con un bucle de eventos (concurrencia) implementado con un único hilo para sus interfaces de In (entrada) y O (out) salida.

• Single threaded o hilo único: aún con múltiples procesadores, solo se puede ejecutar las tareas en un solo hilo, llamado el hilo principal.
  Bloqueante: una tarea no devuelve el control hasta que se ha completado.

• No bloqueante: una tarea devuelve inmediatamente el control para poder continuar sin necesidad de detener la aplicación.

• 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 tarea sea procesada en diferido.

• Concurrencia de JS: utiliza un modelo de concurrencia basado en loop de eventos. Event Loop es un patron de diseño que espera y distribuye eventos o mensajes en un programa.

• Callback: una función que se pasa como argumento de otra función y que sera invocada.

• Promesa: función no bloqueante, y asíncrona la cual puede retornar un valor ahora, en el futuro o nunca.

JS es síncrono pero tenemos herramientas que nos ayudan a trabajar en asincronía.

Mis apuntes en Notion💚

Mi resumen:

Javascript es un lenguaje de programacion single-threaded por naturaleza. Nos permite ejecutar una serie de procesos de manera secuencial, donde necesitamos que termine uno para que inicie otro.
.
Con las nuevas herramientas traidas en ES6+ podemos poner en practica en asincronismo.
.
El asincronismo seria el poder realizar multiples tareas al mismo tiempo, sin que hayan tareas necesariamente bloqueantes.
.
Esto nos permite que otras tareas puedan llevarse acabo sin importar que otra no haya terminado…

Aqui por si quieren entender el asincronismo y event loop paso a paso y reforzar lo aprendido en la clase

Click Aqui

¿Qué es el asincronismo?

Resúmen:

Hay que entender que los lenguajes son síncronos, incluyendo a Js. Significa que tienen que ejecutarse tareas en orden. Poco a poco se han ido agregando funcionalidades que permiten trabajar con el asincronismo.
.
Javascript es sincrono y no bloqueante, con un bucle de eventos (concurrencia), implementado con un unico hilo para sus interfaces de entrada y salida.
.
Javascript es single-threaded. (Unico hilo) Aún con múltiples procesadores, solo se puede ejecutar en un solo hilo, llamado el hilo principal.
.
Bloqueante: Una tarea no devuelve el control hasta que se ha completado.
.
No-bloqueante: Una tarea se devuelve inmediatamento con independencia del resultado. Si se completó.
.
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 más tarde, lo que hace posible que una respuesta sea procesada en diferido.
.
Concurrencia en Javascript: Utiliza un modelo de concurrencia basado en un loop del eventos, “Event Loop”.
.
Event Loop: El bucle de eventos es un patron de diseño que espera y distribuye los eventos segun sea el caso.
.

¿Cuáles son las formas en que Javascript puede trabajar la asincronía?

1. Callbacks.
   Una funcion que se pasa como argumento de otra función y será invocada.
2. Promesas (ES6).
   Función no bloqueante y asíncrona la cual puede retornar un valor ahora, en el futuro o nunca.
3. Async, Await (ES8, ES13)
   Permite estructurar una funcion asincrona sin bloquea de una manera similar a una funcion sincronica ordinaria.

Javascript acaba de convertirse en Multi-Threaded con la capacidad de realizar múltitlpes tareas simultáneamente gracias a las nuevas herramientas implementadas.

¿Qué es el Asincronismo?

Los lenguajes de programación por si mismo son sincrónos, es decir, implementan, tarea después de otra tarea. JavaScript es síncrono por defecto y tiene un solo subproceso, un solo hilo para trabajar.

JavaSCript es síncrono y no bloqueante con un bluche de eventos que maneja la concurrencia. implementando con un único hilo para sus interefaces de entrada y salida (inputs y outputs)

JavaScript es Single-Threaded
Aún con multiples procesadores solo se puede ejcutar tareas en un solo hilo llamado el hilo principal.

Bloqueante: Una tarea no devuelve el control hasta que se ha completado.

No Bloqueante: Una tarea se devuelve inmediantamente con independecia del resultado. si se completó devuelve los datos. Si no, un error.

Síncrono: Las tareas se ejecutan de forma secuencial, sebe 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.

Concurrencia en JavaScript: Utiliza un modelo de concurrencia basado en un “loop de eventos” llamado EVENT LOOP.

EventLoop: El búcle de eventos es un patrón de diseño que espera y distribuye eventos o mesnajes en un programa.

Formas de manejar la Asincronia
Callbacks: una función que se pasa como argumento de otra función y que será invocada.

Promesas…(ES6) Función no-bloqueante y asíncrona la cual puede retornar un valor ahora, mañana o nunca.

Async / Await (ES2017) Permiteestructurar una función asíncrona sin bloqueo de una manera similar a una función sincrónica ordinaria.

JavaScript acaba de convertirse en Multi-Threaded(Multi-Hilo) con la capacidad de realizar múltiples tareas simultáneamente.

JavaScript ahora sería: asíncrono y no bloqueante, con un bucle de eventos (concurrencia) implementado con un unico hilo para sus interfaces de inputs y outputs.

Excelente profe! me quedo muy claro todo lo que explico!!

Los lenguajes de programación por sí mismo son Síncronicos, lo qie significa que ejecutan una tarea detrás de otra, pero con el tiempo se desarrollaron librerías y recursos para poder trabajar con el asíncronismo.

Definiones de cómo funciona JavaScript

• JavaScript es síncrono por defecto y que solamente utiliza un subproceso, un solo hilo para trabajar.
• JavaScript es síncrono y no bloqueante, con un bucle de eventos (concurrencia), implementado con un único hilo para sus interfaces de I/O;

JavasScript es single-threaded

Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el hilo principal.

Qué quiere decir:

• Bloqueante: una tarea no devuelve el control hasta que se ha completado.
• No bloqueante: una tarea 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 (un tiempo después).

Concurrencia en JavaScript

Utiliza un modelo de concurrencia basado en un “loop de eventos”.

EventLoop

El bucle de eventos es un patrón de diseño que espera y distribuye eventos o mensajes de un programa según sea el caso.

Formas de manejar la asicronía en JavaScript.

1. CallBacks: una función que se pasa como argumento de otra función y será invocada según la necesidad.
2. Promesas (ES6): función no-bloqueante y asíncrona la cual puede retornar un valor ahora, en el futuro o nunca.
3. Async / Await (ES2017): permite estructurar una función asincrónica sin bloquo de una manera similar a una función sincrónica ordinaria.

¿JavaScript acaba de convertirse en Multi-Threaded con la capacidad de realizar múltiples tareas simultaneamente?

Si y no. JS es sícrono por defecto, pero tenemos herramientas que nos ayudan a trabajar con el Asíncronismo.

Nueva definición de cómo funciona JavaScript

JavaScript es: Asíncrono y no bloqueante, con un bucle de eventos (concurrencia) implementado con un único hilo para sus interfaces de I/O.

En esta clase entendí mucho más de lo que entendí en todo el curso pasado, la verdad muy bien explicado.

definición JS

Es muy recomendable echar un vistazo al curso de V8

Asíncronismo en JS - Notion

Excelente esta clase, realmente me hizo despejar todas mis dudas sobre los conceptos de como funciona el lenguaje pero quiero acotar nada mas este pequeño resumen:

JAVASCRIPT no es multi-hilo(implementa un único hilo para sus interfaces de entrada/salida), el concepto del lenguaje es síncrono pero gracias a la CONCURRENCIA hay mecanismos
con la capacidad de realizar múltiples tareas simultáneamente(estos gracias a la arquitectura del EventLoop o loop de eventos)

Dicho eso de ahí parte el concepto final del tutor en el min 08:44

Si les quedan dudas sobre la concurrencia básicamente es es la habilidad que tiene un computador, programa etc de realizar varias tareas a la vez ,de ahí parte los conceptos de asíncrono o asincronismo

Saludos !!

WOW, Excelente explicación de Asincronismo ❤️

Mi resumen de la clase

JavaScript es síncrono y no bloqueante, con un bucle de eventos (concurrencia), implementado con un único hilo para sus interfaces de I/O.

• JavaScript es single-threaded. Todas las tareas se ejecutan en un solo hilo, conocido como hilo principal.
• Bloqueante: una tarea no devuelve el control hasta que esté terminada. Ejemplo: función alert().
• No bloqueante: la tarea devuelve inmediatamente el control independientemente del resultado. Si se completa exitosamente devuelve los datos, de lo contrario devuelve un error. Dado que la tarea devuelve inmediatamente el control, no es necesario detener la App.
• Síncrono: las tareas se ejecutan de forma secuencial, uno después de la otra, para que una tarea se ejecute, antes debe finalizar la anterior.
• Asíncrono: las tareas se pueden ejecutar de forma diferida, pudiendo poner tareas en espera.
• Concurrencia: JavaScript utiliza un modelo de concurrencia basado en un loop de eventos.
• EventLoop: es un patrón de diseño en el que se espera y distribuye eventos o mensajes en un programa.
• Formas en que JavaScript implementa la asincronía:
  • Callbacks: función que se pasa como argumento a otra función.
  • Promesas: función no bloqueante y asíncrona que puede retornar un valor ahora, en el futuro o nunca.
  • Async / await: permite crear una función asíncrona sin bloqueo de una forma muy similar a una función síncrona convencional.
• En síntesis JavaScript sigue siendo single-threaded, pero a lo largo del tiempo ha implementado herramientas que faciliten implementar concurrencia, algo similar a tener un asistente que haga unas tareas mientras nosotros terminamos otras.

JavaScript es síncrono y trabaja en un solo hilo (single-threaded), pero cuenta con subproceso que lo convierte en asíncrono, pero sigue trabajando en un solo hilo. Esto es posible por la lógica de los call backs (Luego se actualizo a promesa y posteriormente a async / await).

Javascript fue concebido como un lenguaje de programación sincrono, no obstante, con el paso de los años ha ido evolucionando de acuerdo a las nuevas problemáticas en el desarrollo web. Actualmente javascript es un lenguaje asincrono y no bloqueante que maneja la concurrencia con un event loop el cual maneja dos estructuras de datos: pila y cola de prioridades. En la pila están los procesos principales y no bloqueantes, en la cola de prioridades se maneja la asincronía, sin embargo, las promesas tienen prioridad.

Hice una investigacion sobre los conceptos explicados en esta clase, les dejo para quien le sea de ayuda:

• Proceso
  • Es la ejecución de un programa ( conjunto de instrucciones y datos).
  • Para poder ser ejecutado necesita al menos un thread.
  • El sistema operativo será quien cree, ejecute y controle todos los procesos.
  • Son entidades independientes y no comparten recursos entre ellos.
• Thread (hilo):
  • Es un sub proceso.
  • Es la ejecución de un conjunto de instrucciones.
  • Estos nacen y mueren dentro de un proceso, pertenece a él.
  • Si comparten recursos, comparten información.
• Single-threaded:
  • aun con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el hilo principal.
• Concurrencia:
  • Cuando dos o más tareas progresan simultáneamente.
  • No implica necesariamente más de un thread.
• Paralelismo:
  • Cuando dos o más tareas se ejecutan, literalmente, a la vez, en el mismo instante de tiempo.
  • Necesita más de thread.
  • Es un caso particular de concurrencia donde las cosas suceden exactamente al mismo tiempo.
• Operaciones CPU-bound.
  • Conocidas como operaciones limitadas por CPU.
  • Son operaciones de las tareas cuya carga (el código asociado a ellas) será ejecutada en nuestra aplicación.
• Operaciones I/O-bound
  • Conocidas como operaciones limitadas por entrada/salida.
  • Estas operaciones disparan peticiones especiales que son atendidas fuera del contexto de nuestra aplicación.
  • Ejemplo: leer un fichero en disco, acceder a una base de datos externa o consultar datos a través de la red.
  • Desde nuestro programa se ordena la lectura de un fichero en disco, pero es el sistema operativo y el propio disco los involucrados en completar esta petición.
• Las operaciones I/O comprendidas en dos fases:
  • Fase de Espera a que el dispositivo esté listo, a que la operación se complete o que los datos estén disponibles.
  • Fase de Ejecución entendida como la propia respuesta, lo que sea que quiera hacerse como respuesta a los datos recibidos.
  • Respecto a la fase de espera la operación puede ser bloqueante o no.
  • Respecto a la fase de ejecución será síncrona o asíncrona.
• 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 devuelve el control inmediatamente con independencia del resultado.
  • Si se completó, devuelve los datos. Si no, un error.
• Síncrono:
  • 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:
  • Las tareas pueden ser realizadas más tardes, , lo que hace posible que una respuesta sea procesada en diferido.
  • 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.
  • Como se puede adivinar, su comportamiento es no bloqueante ya que la llamada I/O devuelve inmediatamente.

El modelo de JavaScript

• JavaScript fue diseñado para ser ejecutado en navegadores, trabajar con peticiones sobre la red y procesar las interacciones de usuario, al tiempo que se mantiene una interfaz fluida.
• Ser bloqueante o síncrono no ayudaría a conseguir estos objetivos, es por ello que JavaScript ha evolucionado intencionadamente pensando en operaciones de tipo I/O.
• Por esta razón: JavaScript es asíncrono y no bloqueante, con un bucle de eventos (concurrencia) implementado con único hilo para sus interfaces de I/O.

Debo agregar que estas clases quedaran mas completas si llevas antes o despues el curso de JS engine y navegador.
El event loop es una parte del navegador el cual permite a JS comportarse de manera asincrona, por eso el profesor menciona que existen herramientas que permiten eso, herramientas del navegador.
El evento loop junto al js engine ( memory heap y callstack) y otros elementos conforman el enviroment runtime que permite al JS crear apps como las conocemos.
Y es por esta razón cuando uno empieza a estudiar nodejs encuentra la definicion" enviroment runtime fuera del navegador", es decir esta presente el engine y el evento loop.
Es muy interesante manejar todos los conceptos relacionados a nuestro lenguaje favorito para observar el panorama completo.

Resumen de la clase:

JavaScript es un lenguaje asincrono y no bloqueante, con un bucle de eventos (concurrencia) implementado con un unico hilo para sus interfaces de I/O.
Donde:

• Asincrono: Las tareas no se realizan de manera secuencial. Las tareas pueden realizarse más tarde, la respuesta sera procesada en diferido.
• No boqueante: El hilo del proceso no queda en un estado de espera. Una tarea no bloqueante devuelve el control inmediatamente con independencia del resultado. Si se completó, devuelve los datos. Si no, un error.
• Bucle de eventos: Patron de diseño encargado de manejar la concurrencia de eventos.
• Hilo: el treadh, es el proceso donde se ejecutan las tareas.

Async - Await (ES2017) Permite estructurar una función asincrónica sin bloqueo de una manera similar a una función asíncrona ordinaria. En este video vamos a ver un ejemplo muy claro del uso de Asyn Await: https://youtu.be/rKK1q7nFt7M

Promesas (ES6). Función asíncrona (no bloqueante) que puede devolver un valor ahora, en el futuro o no devolver nada.

Los callbacks en Javascript. Un callback es una función que se pasa como argumento de otra función esperando ser ejecutada más tarde.

Javascript es sincrono, ejecuta tarea por tarea en el call stack(pila de ejecucion), cuando se detecta una tarea que es asincrona(por ejemplo, un setTimeout), lo que realiza es colocarlo en espera, fuera del callstack. De ahi el event loop realiza una ejecucion preguntando cada momento si el call stack ya se ha terminado las tareas sincronas, una vez finalizada se pasa las tareas asincronas al call stack y se ejecutan de acuerdo al orden en que fueron llenados en el stack. Las tareas se ejecutan de arriba hacia abajo, esto por el apilamiento que se crea al cargar nuestro codigo javascript que es interpretado por el motor v8. Siempre al final la ultima tarea que se ejecutara es la primera tarea y lo ultimo que saldra del stack es el objeto global(window).

Ya termine el curso y les cuento que despues de este curso, veran todo mas claro, de pana que el profe mejoro mucho

Buena clase

Que gran explicacion de sincronia vs asincronia en js

Siento que el profe entro con mal pie a la clase de ECMA, pero aun tengo fe que era una introduccion mas que todo.

Espero que las clases que vengan , vengan con todo 😃

Obviamente como todo profesor da pautas y a uno le toca investigar mas a fondo 😃

Wow cada dia aprendo mas y mas, muchas gracias!!!