¿Futuras características de JS?!

Rate this content
Bookmark

¿Curioso por saber cuáles son algunas de las posibles características de JS que se están cocinando en este momento?

¡Sí, estás en el lugar correcto! Esta charla te guiará a través de dichas características con ejemplos de código y algunas ideas de las notas de la reunión TC39 sobre ellas.

FAQ

TC39 es la comunidad de ECMAScript dentro de ECMA International, responsable de la especificación que implementa JavaScript. Este comité incluye varias etapas en su proceso, desde la Etapa 0 hasta la Etapa 4, para revisar y aceptar nuevas propuestas para el lenguaje JavaScript.

Actualmente, hay 18 propuestas en la Etapa 0. Las etapas en el proceso de TC39 describen el progreso de una propuesta, desde la Etapa 0, que es una idea inicial, hasta la Etapa 4, donde la propuesta está terminada e implementada.

El método 'array.findLast' es una propuesta para JavaScript que permite encontrar un valor en un array empezando por el final. Este método es útil para situaciones donde se necesita buscar un elemento desde el final sin tener que invertir el array.

Las afirmaciones de importación son una propuesta que permite especificar explícitamente el tipo de archivo que se está importando, como JSON o JavaScript. Esto ayuda a evitar errores de seguridad al asegurar que el tipo de archivo importado corresponde al esperado.

El operador de tubería es una propuesta que permite encadenar operaciones en JavaScript de una manera más legible y eficiente. Facilita la aplicación de funciones una tras otra, transmitiendo el valor de una expresión como entrada a la siguiente.

Change Array by Copy es una propuesta que permite modificar copias de un array sin alterar el array original. Proporciona métodos como 'reversed', 'sorted', y 'spliced' que devuelven un nuevo array con las modificaciones, manteniendo el original sin cambios.

La sintaxis de 'import assertion' propone una manera de afirmar el tipo de los módulos importados, asegurando que el contenido importado es del tipo declarado. Esto evita problemas de seguridad al prevenir importaciones incorrectas que podrían llevar a ejecución de código malicioso.

Un módulo JSON es una propuesta que permite importar JSON como módulos de JavaScript, asegurando que el tipo de archivo importado sea correctamente interpretado como JSON. Difiere de las afirmaciones de importación en que es una propuesta separada que se enfoca específicamente en la importación segura y directa de JSON.

Hemanth HM
Hemanth HM
28 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Bienvenido a las futuras características de JavaScript, incluyendo propuestas para operaciones de array, expresiones de lanzamiento, registros y TPUs, operadores de tubería, y más. La charla cubre la introducción de afirmaciones de tipo para archivos importados, operaciones de array no mutantes, y la simplificación del manejo de errores. También explora el concepto de inmutabilidad con registros y TPUs, y el uso del operador de tubería para simplificar el código. Otras propuestas incluyen Map.implace, IteratorHelper, notación de corte, anotaciones de tipo, Array UNIQBY, rangos de números, y la propuesta de la Función 1.

Available in English: Future Features of JS?!

1. Introducción a las Propuestas de JavaScript

Short description:

Bienvenidos a las futuras características de JavaScript. Vamos a repasar diferentes propuestas desde la etapa 0 hasta la etapa 3. El proceso TC39 incluye diferentes etapas, comenzando desde la Etapa 0 hasta la Etapa 4. Vamos a sumergirnos y sorprendernos con algunas de estas propuestas, comenzando con la Etapa 3. Una propuesta es sobre encontrar valores desde el final de un array. Otra propuesta es sobre encontrar el último índice. La propuesta sugiere agregar métodos convenientes al objeto array. La propuesta ha sido discutida y se han sugerido diferentes nombres. La implementación se puede encontrar en la fuente de Chromium.

Hola, JS Nation. Bienvenidos a las futuras características de JavaScript. En esta charla, vamos a repasar diferentes propuestas desde la etapa 0 hasta la etapa 3, entender por qué existen, qué están tratando de resolver, y esperamos, que se implementen en todos los entornos de JavaScript.

Soy Hemant. Soy un Gerente de Ingeniería aquí en PayPal, un delegado de TC39, un experto desarrollador de Google para el Dominio Web y Pagos. Puedes encontrarme en Newman en Twitter o buscarme en html.com. ECMA International tiene muchas comunidades técnicas, de las cuales TC39 resulta ser la comunidad de ECMAScript, que es responsable de la especificación que JavaScript implementa. El proceso de TC39 incluye diferentes etapas, comenzando desde la Etapa 0 hasta la Etapa 4, donde la Etapa 4 está terminada e implementada en diferentes entornos, y la Etapa 1 es más como un hombre de paja con solo una idea básica de lo que es la propuesta. En esta charla, vamos desde la Etapa 0 hasta la Etapa 3 y vemos diferentes propuestas.

Si observamos el estado actual de cómo están las propuestas, en la Etapa 0, tenemos 18 propuestas. En la Etapa 1 tenemos 91 propuestas, y en la Etapa 2 tenemos 22, y en la Etapa 3 tenemos 17, y en la Etapa 4 tenemos 59 propuestas. Vamos a sumergirnos y sorprendernos con algunas de estas propuestas, comenzando con la Etapa 3.

Supongamos que tenemos un array de objetos y quieres encontrar un valor particular desde el final de el array. ¿Qué harías? Probablemente harías un reverse en ese array y luego un find. En este caso estamos tratando de encontrar los valores que no son divisibles por 2. Y en este caso obtuvimos el valor 3, pero tuvimos que invertir el array y luego hacer un find. ¿Qué tal si tuviéramos un método conveniente que dijera, array.findFromLast, array.findLast, aquí está la condición, dame el elemento. ¿Y si quisieras encontrar el último índice? De nuevo harías un reverse y harías un find.index, y tomarías el array.length y restarías menos 1 de él y restarías ese valor de lo que encontramos si el resultado coincide para encontrar el índice. En este caso el valor era 2. Supongamos que la condición no se cumple, donde estamos buscando el número 42. El valor debería haber sido menos 1, pero es 4. ¿Qué tal si tuviéramos un método que dijera, array.findLastIndex, y cuando se cumple la condición encontrará el índice si está presente, y si no, daría menos 1. ¿No sería conveniente? Aquí a la izquierda hay un comentario de uno de los problemas en GitHub para esta propuesta donde la idea era discutir y llegar a nombres. Como puedes ver, algunos de los nombres que surgieron en el problema eran como findRight, findIndexRight, findLast, findIndexLast, findEnd, findIndexEnd, y así sucesivamente. Finalmente tenemos findLast, y last, findLastIndex como la propuesta hoy. En el lado derecho podemos ver una implementación de la fuente de Chromium que dice fastArray findLast. Si quieres abrir la especificación, podrías hacer un mapeo uno a uno para cada una de esas líneas en este código para entender cómo se implementa la especificación. Por ejemplo, en el comentario donde dice 4, ese es el punto cuatro en la especificación que dice que k sea length menos uno, y ahí es donde tenemos la implementación exacta aquí. Eso es findLast y findLastIndex. Luego tenemos import assertion.

2. Afirmación de Importación y Módulos JSON

Short description:

Esta propuesta introduce una forma de afirmar el tipo de archivos importados en JavaScript. Permite declaraciones de tipo explícitas al importar archivos JSON, JavaScript o WebAssembly, proporcionando mayor seguridad y claridad en el código. Además, existen propuestas separadas para los módulos JSON y la separación de los módulos JSON de las afirmaciones de importación. Estas propuestas sufren modificaciones, discusiones y decisiones durante la fase de propuesta. Es importante mantenerse actualizado sobre el progreso de estas propuestas, y una charla recomendada de Julia en GSNation proporciona información sobre cómo funcionan los módulos JS desde la perspectiva de un navegador.

Este tipo de propuesta ofrece una forma de afirmar el tipo que estamos importando. Por ejemplo, en este caso, estamos diciendo importar json de foo.json, afirmar tipo json. Estamos diciendo que esto es de tipo json, y si fueras a usar importaciones dinámicas, dirías importar foo.json y decir afirmar tipo json cuando estás haciendo una importación dinámica, y si dices que tienes un JavaScript que está exportando un valor y quieres exportar ese valor desde tu archivo, podríamos decir exportar valor de foo.js que está exportando ese valor y luego estás afirmando que el tipo es JavaScript.

Y finalmente, podrías usar el tipo para ser WebAssembly y esto también puede ser usado en la etiqueta de script. Y podrías estar preguntándote por qué debería usar un tipo de afirmación? ¿Por qué necesito esto en línea? ¿Por qué no simplemente importar JSON de foo.json? Bueno, resulta que simplemente confiar en el tipo MIME para averiguar si es JSON o no causa un error de seguridad. Hay muchas preocupaciones en torno a la seguridad al importar un archivo aleatorio. Y luego tienes que asegurarte de que estás afirmando que esto es de tipo JSON y si es algo más, aparte de JSON, lanzaría un error y diría, hey, no lo sé porque estoy tratando de afirmar que esto es un archivo JSON y no lo es, manteniendo así el código más seguro y dándonos una forma fácil de expresarnos en línea sobre qué tipo es esto en términos de afirmar que esto es lo que realmente estamos importando.

De manera similar, tenemos módulos JSON, que son muy similares a lo que vimos anteriormente, puedes importar JSON como módulos y tener este tipo de afirmación. Pero podrías estar preguntándote por qué dos propuestas diferentes? ¿Es muy similar a lo que acabamos de ver anteriormente? Bueno, si te adentras en las notas de la reunión, puedes notar aquí que hubo una discusión y la decisión que se tomó decía, una de las decisiones fue que desacoplar los módulos JSON, para que eso pase a la etapa dos, y luego avance a diferentes estados, ¿verdad? Esto es algo común que sucede durante la fase de una propuesta, puede ser modificada, cambia, puede ramificarse en dos propuestas diferentes, también puede ser descartada y rechazada por muchas razones. Así que aquí vimos que el módulo JSON formaba parte de la afirmación de importación, pero se convirtió en una propuesta independiente en sí misma para que pueda acelerarse rápidamente hacia el final. Definitivamente no te pierdas esta charla de Julia, que es parte de GSNation esta vez y ella está hablando de cómo funcionan los módulos JS desde la perspectiva de un navegador. Ella es delegada del 39 por supuesto y como implementadora en Firefox, esta charla es imprescindible si quieres saber más sobre cómo funcionan los módulos JSON.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
JavaScript en el navegador se ejecuta muchas veces más rápido de lo que lo hacía hace dos décadas. Y eso sucedió porque los proveedores de navegadores pasaron ese tiempo trabajando en intensivas optimizaciones de rendimiento en sus motores JavaScript.Debido a este trabajo de optimización, JavaScript ahora se está ejecutando en muchos lugares además del navegador. Pero todavía hay algunos entornos donde los motores JS no pueden aplicar esas optimizaciones de la manera correcta para hacer las cosas rápidas.Estamos trabajando para resolver esto, comenzando una nueva ola de trabajo de optimización de JavaScript. Estamos mejorando el rendimiento de JavaScript para entornos completamente diferentes, donde se aplican reglas diferentes. Y esto es posible gracias a WebAssembly. En esta charla, explicaré cómo funciona todo esto y qué vendrá a continuación.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
¿Webpack en 5 años?
JSNation 2022JSNation 2022
26 min
¿Webpack en 5 años?
Top Content
¿Qué podemos aprender de los últimos 10 años para los próximos 5 años? ¿Hay un futuro para Webpack? ¿Qué necesitamos hacer ahora?
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Node Congress 2022Node Congress 2022
34 min
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Top Content
Puedes revisar las diapositivas de la charla de James aquí.

Workshops on related topic

Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior
Construye una Potente Rejilla de Datos con AG Grid
React Summit 2024React Summit 2024
168 min
Construye una Potente Rejilla de Datos con AG Grid
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Node Congress 2023Node Congress 2023
49 min
Búsqueda de texto completo basada en JavaScript con Orama en todas partes
Workshop
Michele Riva
Michele Riva
En este masterclass, veremos cómo adoptar Orama, un potente motor de búsqueda de texto completo escrito completamente en JavaScript, para hacer que la búsqueda esté disponible donde sea que se ejecute JavaScript. Aprenderemos cuándo, cómo y por qué sería una gran idea implementarlo en una función sin servidor, y cuándo sería mejor mantenerlo directamente en el navegador. Olvídate de las APIs, configuraciones complejas, etc.: Orama facilitará la integración de la búsqueda en proyectos de cualquier escala.