ECMAScript 2020

Clase 11 de 14 • Curso de ECMAScript 6+

Contenido del curso

Bienvenida al curso

1
Qué es ECMAScript
02:51 min

¿Qué se implementó en ES6?

¿Qué se implementó en ES7?

6
¿Qué se implementó en ES7?
04:49 min

¿Qué se implementó en ES8?

Actualidad y próximos pasos de ECMAScript

Resumen

La siguiente versión de ECMAScript fue publicada en 2020 y ahora conocerás sobre la importación dinámica.

Qué es la importación dinámica

La importación dinámica consiste en cargar los módulos cuando el usuario los vaya a utilizar, y no al iniciar la aplicación. Esto permite que la página web sea más rápida, porque descarga menos recursos.

La expresión import() permite manejar módulos dinámicamente, ya que la sintaxis de ECMAScript import ... from ... no lo permite.

La expresión import() recibe un argumento de tipo string con la ruta del módulo a importar y devuelve una promesa.

const ruta = "./modulo.js"

// Utilizando promesas
import(ruta)
    .then( modulo => {
        modulo.funcion1()
        modulo.funcion2()
    })
    .catch(error => console.log(error))
    
// Utilizando async/await
async function importarModulo(rutaDelModulo) {
    const modulo = await import(rutaDelModulo)
    modulo.funcion1()
    modulo.funcion2()
}

importarModulo(ruta)

Ejemplo de importación dinámica

De esta manera puedes utilizar una importación dinámica en tu aplicación para desencadenar una descarga de un módulo cuando el usuario lo vaya a utilizar. Por ejemplo, al realizar clic en un botón.

const boton = document.getElementById("boton")

boton.addEventListener("click", async function () {
    const modulo = await import('./modulo.js')
    modulo.funcion()
})

Puedes usar las herramientas de desarrollador para visualizar la descarga de archivos al realizar clic en el botón.

Contribución creada por Andrés Guano.

Comentarios

Manuel Andrés Buriticá Yepes

student•

Genial🔥 Esto absolutamente podría aumentar el rendimiento del tiempo de carga en caso de que el módulo no sea necesario para la carga, sino solo después de que ocurra algún evento e incluso hasta un condicional.

if (true) {
  import('./module.js').then((module) => {
    module.myFunction();
  });
}

Luis Berenguer

student•

Si, esto tiene el potencial de optimizar bastante nuestras aplicaciones.

Reinaldo Mendoza

student•

Toalmente

JuanFe Peralta

Team Platzi•

👀 Por aquí les dejo el link del plugin: Live Server

👩‍💻 Y el código que usamos en la clase:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">File</button>
    <script type="module" src="index.js"></script>
</body>
</html>

index.js

const button = document.getElementById("btn");

button.addEventListener("click", async function(){
    const module = await import("./file.js");
    module.hello();
});

file.js

export function hello() {
    console.log("Hola, Mundo!");
}

Carlos Alberto De Avila Suro

student•

Excelente, justo lo estaba buscando en los recursos. Gracias.

Reinaldo Mendoza

student•

Creo que en las primeras clases ya estaba disponible

Max Andy Diaz Neyra

student•

Dynamic import ( importación dinámica)

Permite llamar nuestro código cuando lo necesitemos.
El archivo no se va a cargar de manera automatica.
Con esto podremos dividir nuestro codigo y evitar que la app sea muy grande.
Por todo lo anterior, mejora la performance.

Codigo usando durante la clase: Archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">File</button>
    <script type="module" src="index.js"></script>
</body>
</html>

Archivo index.js

//dynamic import: podremos realizar importacion dinamica de piezas de codigo
const button = document.getElementById('btn');

button.addEventListener('click', async function () {
    const module = await import('./file.js');
    module.hello();
})

Archivo file.js

export function hello() {
    console.log('hola mundo');
}

Pd: deben entrar al sitio desde un servidor, por lo cual necesitaran de xampp o live server de VSC

Gutierrez Diego

student•

Gracias, logré entender para que podría ser útil.

Sergio Orejarena Rueda

student•

Aquí una pequeña prueba con cambios de imágenes. Si deseas probarlo, abajo podrás encontrar el código y hacerle las modificaciones que desees. 😀 .

Código:

-> index.js

const button = document.getElementById("btn");

button.addEventListener("click", async function() {
  const module = await import("./file.js");
  module.change();
});

-> file.js

export function change() {
  let character = document.getElementById("character");
  let n_character = Math.floor(Math.random() * 827) + 1;  // Calculates a random number from 1 to 826.

  character.setAttribute("src", `https://rickandmortyapi.com/api/character/avatar/${n_character}.jpeg`);
}

-> index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Character Changer</title>
</head>
<body style="background-color: rgb(2, 8, 17);">
  <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 100px">
    <img
      src="https://rickandmortyapi.com/api/character/avatar/1.jpeg"
      alt="Character of Rick and Morty"
      id="character"
      style="border-radius: 50%; box-shadow: 2px 2px 8px rgb(192, 192, 192);"
    >
    <button id="btn" style="border-radius: 10px; align-self: flex-end;">Change</button>
  </div>
  <script type="module" src="./index.js"></script>
</body>
</html>

Rubén Ernesto Aragón Gil

student•

José Pablo Jiménez Cucanán

student•

Despues de este curso me siento un geek de JS

Reinaldo Mendoza

student•

Y lo que falta

Emiliano Alfredo Barea Monetti

student•

En 1.25x le robo la voz al burro de shrek

Andrés Hernández Morales

student•

JAJA

Alexander Flores Rayme

student•

🤣🤣

Cristian Raul Arce Gallardo

student•

jaja no dejo el link de live server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Osvaldo Olea

student•

Deberían haber sido todos los videos anteriores como este.

Carlos Ponce

student•

Cuando empecé recuerdo hacer una aplicación bastante robusta que el 95% era javascript y dentro de ella estaba el HTML dentro de strings Xd entonces al ejecutar una función se pegaba el string en el documento html, era todo un chicle y recuerdo que al abandone porque necesita que cierto codigo se ejecutar en una cierta ocación, pero por culpa de llamar un objeto que no existe en el dom ejecutaba un error :( quizás si hubiera sabido esto antes la hubiera salvado Xd ahora solo es parte de mi historia

Ranulfo Fabián MorenoBello Salgado

student•

muy buen aporte !! Gracias

Diego Rojas

student•

Siempre estuve pensando como mejorar el rendimiento y esto sin duda es lo mejor que se ha agregado a js

Dario Paladines

student•

Super interesante la clase y que esta funcionalidad tiene gran importancia, pero entendí hasta el addEventListener ("click",... de ahi en adelante nose el porque usa async el await, si alguien me puede explicar porfa!

button.addEventListener("click", async function(){
    const module = await import ("./file.js");
    module.hello();
})

Luzan Muga

student•

Ahí se usa el async porque la parte de import ("./file.js") podría tomar bastante tiempo, entonces se necesita el async para que el await se puede usar.

Lo que significa que es que el código esperar hasta que terminé de importarse el archivo para que pueda continuar la ejecución del código :)

Néstor Peña

student•

Para que sirve el type module en el script?

Jonathan Guidi

student•

Hola! Es la forma en que el browser va a identificar que se trata de un script de tipo modulo, asi reconocera cuando tiene que cargarlo o no!

Uriel Zoe Sanjuán Morales

student•

Hola compañeros, en caso que les falle en WSL, una opción es que no tengan actualizado npm o node, aquí les comparto los comandos de actualización

primero actualizar npm

 $ sudo npm install -g npm@latest

Después con esta forma debemos instalar un gestor de paquetes de node llamado n

$ sudo npm install -g n

Finalmente actualizar node

$ sudo n stable

Finalmente cerrar y abrir wsl y listo estamos listos para el curso, espero les sirva

Deniss Bonilla Paredes

student•

Estoy en WSL2, utilizo Windows 10. Tengo enlazado el VSC y Git con Ubuntu, realizar esta actualización generará que tenga que volver a conectar Ubuntu con VSC o Git? ¿o no generará ningún cambio?

Carlos Alberto De Avila Suro

student•

Podria alguien ayudarme a saber por que obtengo el siguiente error al tratar de cargar mi modulo con import?. has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http Gracias de antemano

Luis Ignacio Santamaria Plúa

student•

Intenta añadiendo el plugin que tiene el profesor, el del live server. Luego abre el html en el live server, eso hará que tu archivo se abra en un servidor local. Me salía el mismo error y me funcionó una vez puse el live server. Esto ocurre gracias a que los modulos solo funcionan con HTTP(s). Hmm tu comentario es de hace 15 días. Mejor tarde que nunca JAJAJ

Carlos S. Aldazosa

student•

¡Genial! ¿Esto ayuda a la modularización de las funciones y el rendimiento de las páginas?

Max Andy Diaz Neyra

student•

Exactamente, tendremos nuestra App en partes. Esto mejora la performance.

Santiago Rodriguez Chaves

student•

en lugar de usar console.log en el archivo de file.js pueden usar document.write("Hello world"); para que se imprima directamete en la pantalla y no en la consola.

Ameth Ordoñez Erazo

student•

Podemos usar async y await o usar directamente el .then() al hacer el import, pues al final devuelve es una promesa. Les dejo el código de ambas opciones:

Rafael Martínez Rodríguez

student•

Muchas gracias

ÁNGEL URIEL VELASCO MEJÍA

student•

Super bueno este tema. Aún soy nuevo y me encantaría conocer más, pero voy avanzando. Fuerza!

Michael Martinez

company_admin•

la sección del curso que más me ha gustado

Luis Márquez

student•

No entiendo por qué hay que poner type="module" en el tag html script, es decir, entiendo que indica que vamos a hacer referencia a un script que es un modulo pero no entiendo por qué index.js es un modulo, en teoría el modulo es file.js y no index.js. Alguien me puede explicar por qué index.js es un modulo y no file.js Gracias!!!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">File</button>
    <script type="module" src="index.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">File</button>
    <script type="module" src="index.js"></script>
</body>
</html>

//dynamic import: podremos realizar importacion dinamica de piezas de codigo
const button = document.getElementById('btn');

button.addEventListener('click', async function () {
    const module = await import('./file.js');
    module.hello();
})

export function change() {
  let character = document.getElementById("character");
  let n_character = Math.floor(Math.random() * 827) + 1;  // Calculates a random number from 1 to 826.

  character.setAttribute("src", `https://rickandmortyapi.com/api/character/avatar/${n_character}.jpeg`);
} 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Character Changer</title>
</head>
<body style="background-color: rgb(2, 8, 17);">
  <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 100px">
    <img
      src="https://rickandmortyapi.com/api/character/avatar/1.jpeg"
      alt="Character of Rick and Morty"
      id="character"
      style="border-radius: 50%; box-shadow: 2px 2px 8px rgb(192, 192, 192);"
    >
    <button id="btn" style="border-radius: 10px; align-self: flex-end;">Change</button>
  </div>
  <script type="module" src="./index.js"></script>
</body>
</html>

ECMAScript 2020

Bienvenida al curso

Qué es ECMAScript

¿Qué se implementó en ES6?

Default Params y Concatenación

LET y CONST, Multilínea, Spread Operator y Desestructuración

Arrow Functions, Promesas y Parámetros en objetos

Clases, Módulos y Generadores

¿Qué se implementó en ES7?

¿Qué se implementó en ES7?

¿Qué se implementó en ES8?

¿Qué se implementó en ES8?

Async Await

Actualidad y próximos pasos de ECMAScript

¿Qué se implementó en ES9?

¿Qué se implementó en ES10?

ECMAScript 2020

ECMAScript 2020 - características importantes

ECMAScript 2021

Qué es TC39 y cierre del curso