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

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

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
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
¿Webpack en 5 años?
JSNation 2022JSNation 2022
26 min
¿Webpack en 5 años?
Top Content
In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.
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
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

Workshops on related topic

Master Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Master Patrones de JavaScript
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
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.
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
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