No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

JavaScript Runtime

11/13
Recursos

Recordando el material de Call Stack, se mencion贸 que JavaScript realiza una tarea a la vez en el Call Stack, esto se denomina c贸digo s铆ncrono o Single thread. La sincron铆a puede presentar problemas en operaciones que demoren demasiado.

Representac铆on de s铆ncronismo en JavaScript

Ejemplo pr谩ctico

Por ejemplo, imagina que JavaScript es una tienda de tacos, t煤 trabajas ah铆 y solamente puedes hacer una preparaci贸n a la vez. Llegan tres personas que ordenan un taco, una torta y un taco, y tienes que atenderlos en ese orden.

El primer taco probablemente se demore 5 minutos. Luego, la preparaci贸n de la torta es m谩s compleja, por lo que posiblemente demorar谩 20 minutos. En este punto, el tercer cliente se ha hartado de la espera y se retira. Este proceso no es 贸ptimo.

console.log("taco")
console.log("torta")
console.log("taco")

En Internet sucede lo mismo, si un usuario no observa informaci贸n en tu p谩gina web en los primeros cinco segundo, se retirar谩.

Entonces, una soluci贸n ser铆a ejecutar las tareas m谩s lentas (torta) despu茅s de las m谩s r谩pidas (tacos). Y esta soluci贸n se llama asincronismo y JavaScript tiene una manera de manejarlo.

Contribuci贸n creada por Andr茅s Guano.

Aportes 87

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

鉂わ笍 grabado en la memory heap de mi coraz贸n.

No soy de M茅xico, pero como que se me antoj贸 un taco.

Qui茅n m谩s se antoj贸 de tacos como yo !!! 馃尞馃槶hahah
Am茅 esta explicaci贸n 馃挌

Aqu铆 pueden probar como funciona todo el Runtime:
http://latentflip.com/loupe/

Por aqu铆 te dejo una lectura para complementar acerca del Runtime Enviroment 馃槈
Y, por aqu铆 te dejo una receta de tacos al pastor, para que no te quedes con las ganas 馃槣

les recomiendo este articulo,aclara mucho mas los conceptos
https://medium.com/@olinations/the-javascript-runtime-environment-d58fa2e60dd0

De forma gr谩fica as铆 es como funciona JS Runtime

Genial el ejemplo de los tacos jaja

Pr贸ximamente curso de preparaci贸n de tacos con Diego de Granda !!

JavaScript es s铆ncrono, hace una tarea a la vez. Esto hace que se vea lento o que el tiempo de espera sea bastante lento.

Ya que tengamos la variable podemos agregarla al CallStack y con esto ya le podemos dar interacci贸n con los elementos del navegador.

Un ejemplo de esto es que si nos entran 4 tareas, una de 1 segundo, una de 2 segundos, una de 10 segundos y otra de 3 segundos. Quiere decir que se ir谩n haciendo con forma de pila pero se tendr谩n que esperar la ultima a que termine totalmente de hacer la tarea larga, ya que solo puede hacer una tarea al mismo tiempo.

JS runtime

JavaScript es s铆ncrono, va haciendo una tarea a la vez.

  • Primero tenemos nuestro c贸digo en el memory heap, tenemos referencias
  • Cuando vamos a ejecutar alguna parte de nuestro c贸digo va al call stack
  • En el call stack se va apilando las tareas que tiene que hacer, cuando resuelve la tarea la saca del call stack
  • Si hay c贸digo as铆ncrono se va a la parte de Web API麓s, son API麓s que nos proporciona el navegador para poder hacer interacciones dentro de nuestra aplicaci贸n (DOM, XMLHttpRequest, eventos)
  • Cuando las API麓s son requeridas pasan al callback queue, usan el modelo FIFO (First In First Out)
  • Cuando termina de ejecutarse la parte s铆ncrona, la parte as铆ncrona que esta en el callback queue pasa al call stack

Se viene uno de los temas estrella de JavaScript, y Platzi tiene un curso enteramente dedicado al as铆ncronismo con JavaScript 馃憖

Qu茅 es el Javascript Runtime?

El runtime lo podemos definir como el entorno donde se est谩 ejecutando nuestro c贸digo. Unos ejemplos claros serian Google Chrome y NodeJs.

Es el Runtime parte del motor?

No, Es lo contrario.
El motor sera una de las partes que compongan el runtime, y cada runtime puede tener diferentes caracter铆sticas adicionales, las cuales trabajaran en conjunto con el motor.

Algunos de los componentes pueden ser:

  • Motor de Javascript
  • Web APIs
  • Event Loop
  • Job Queue
  • Callback Queue
    .
    Fuente

No entend铆 lo que es el JavaScript Runtime

El mejor ejemplo de la vida 鉂わ笍 que gran profesor, ya tienes un nuevo fan @dgranada 鉂わ笍____鉂わ笍

ok, entendido, no tortas 馃槈

Que bueno saber como funciona todo lo de JavaScript en los navegadores, ya entiendo mejor todo lo que pasa detras de lo que hacemos.

Entendido.
Ya no quiero torta

console.log("taco 1");
console.log("taco 2");
console.log("torta");
console.log("taco 3");

Todo melo melo 馃槃

Ya me dio hambre

Si, as铆 es Estudiante.
Esta clase da hambre, es normal. Descansa y ve por tus tacos. 馃挌锔

Muy buen ejemplo, aunque ya me provoco comer tacos 馃ぃ 馃尞

Excelente ejemplo para dar el tema.
Aunque sal铆 de clase con antojo de unos tacos D:
Pero desde que empez贸 la cuarentena no salimos mas que para lo indispensable.

espero que lo entiendan

Ahhh entonces mi JavaScript es lento por la tortilla!!! jajaja

Me pareci贸 un ejemplo o demostraci贸n un poco extra帽o pero creo que se entiende el concepto jajaja

Justo tenia la duda en clases pasadas de si primero iba el memory heap y luego el call stack

jaja buen ejemplo con tacos y torta, ya se me antojaron 馃槄

JavaScript es s铆ncrono. Aunque con el event loop podemos simular procesos multi-hilo

Con el ejemplo de los tacos comprend铆 mejor lo de la sincron铆a y asincron铆a馃榾馃憤

La parte as铆ncrona se ejecuta mientras la parte s铆ncrona se ejecuta. Luego de que haya terminado todas la parte s铆ncrona para no afectar el rendimiento de la p谩gina, el resultado de la parte as铆ncrona pasa al callstack.

JavaScript hace las cosas como yo, de una en una :p

Jajaja mas alla de lo que explico Diego, fue muy gracioso notar cuando habla de la torta y dice que se debe abrir el pan. Por lo tanto, me pregunto: como es una torta hecha de pan?

Interesante la clase de cocina y JavaScript XD

Excelente explicacion

Quiero un taco al pastor.

Ya antojaron 馃槇馃槼馃槑馃
.

Buenas, como estan! Les comparto mi carpeta de Google Docs para que entre todos podamos seguir aportando a la toma de notas de un mont贸n de los cursos de Platzi. Hagamos una comunidad!!!

https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

esta clase me hizo dar hambre XD

En el desarrollo web, no se suele utilizar el motor directamente. El motor de JavaScript funciona dentro de un entorno (JavaScript runtime environment), lo que proporciona caracter铆sticas adicionales a sus scripts que puede usar en tiempo de ejecuci贸n.

Estas caracter铆sticas pueden ser librer铆as o API鈥檚 que permiten comunicarse con el mundo que rodea al motor. Un ejemplo aqu铆 podr铆a ser el acceso a la informaci贸n sobre el navegador web en el que se ejecuta el script. O una notificaci贸n sobre un clic del rat贸n.

Se me antojaron los tacos 馃槶

Muchos tacos por aqui, pero basicamente esto funciona que se hace una tarea la vez y cuando hay una tarea grande deja todo lo demas y hace esa tarea?

JavaScript Runtime Enviroment (JRE)
El JS engine est谩 formado por heap y call stack.
El motor de JS no se ejecuta de forma aislada
Esta embebido en el entorno de JS runtime enviroment, donde existen m谩s componentes.
EL JRE son todos los componentes que trabajan al ejecutar el codigo JS.
El JRE nos proporciona caracter铆sticas adicionales (click evento, informaci贸n del navegador, solicitudes HTTP, etc.) y hace a JS as铆ncrono y no bloqueante con ayuda de sus componentes.
El JRE contiene los siguientes componentes:
鈥 Motor JavaScript
鈥 Web APIs
鈥 Callback Queue (cola de devoluci贸n o cola de mensajes)
鈥 Job Queue
鈥 Event Loop (bucle de eventos)

JavaScript Runtime

Como llegan las tareas van saliendo en el entorno de JavaScript. El lenguaje no se fija en si hay otros procesos m谩s rapidos o no, solo se fija en sacar las tareas tal y como fueron entrando en la pila de tareas.

Diego: *Va a la taquer铆a y pide una orden
Taquero: 鈥淣o se puede, no hay tortillas鈥

const torta = "sanguche";

Diego hablando de Tacos :v ya medio hambre jajajaj 馃槃

Con este ejemplooooo!

El ejemplo de los tacos <3

a este ejemplo le falto鈥 una Coca Cola

!TACOSSSSSSSSSSSSSSSSSSSS!

Me dio hambre con el men煤 XD

Esta clase da antojo de tacos xD

隆Llegando a esta clase, me dio mucha hambre! jeje Genial ejemplo!

El mejor ejemplo 鉂わ笍

Mucho taco y torta, pero 驴Y la coquita? xD

Lo ideal siempre pedir tacos jeje, buena explicaci贸n!

Ya me dieron ganas de taco 馃槃

Vamos a vender tacos ahor amismo jaja xd

Que buena analog铆a lo de los tacos, 馃槃 gran explicacion

馃槂

A darle!

Obligado a pausar el video e ir a la cocina a buscar que comer鈥!! Efecto colateral de esta clase.

Excelente explicaci贸n

Es lo mismo que ocurre cuando agregamos un timeOut 馃槂

Excelente ejemplo, gracias Diego

Js lenguaje sincrono y que puede simular una asincronia total.

Pero por favor, el tremendo ejemplo para entender el tema, mejor no pudiste haberlo dicho Diego. Si no se entiende con esta explicaci贸n鈥 (sin comentarios)

gran info neni

Que mejor manera de aprender que con tacos!

Son las 11pm y Diego ha hecho que se me antojen de tacos 馃槮

Lo mejor de esta clase no fue el tema, fue la explicaci贸n con tacos del proceso s铆ncrono. Viva M茅xico 馃嚥馃嚱

Creo que aqui quizas hizo falta explicar un poco mas del JS Engine, no menciono nada del Event Loop.

Esta es la clase del curso donde te va a dar hambre.

Muy buena explicaci贸n. Bastante fundamental, pero estuvo genial.

a alguien mas le dio hambre durante la explicacion? 馃槀

Se podr铆a decir que el Runtime por defecto es sincrono ?

Ahora cada que vaya por unos de pastor :3 me voy a acordar del event loop 鉂わ笍

f

Hace 1 a帽o el tema de sincron铆a y sincron铆a me causaban mucho dolor de cabeza. Y tan sencillo que es! >.<