ESNext: Propuestas a tener en cuenta

Rate this content
Bookmark

Con las versiones anuales de ECMAScript (ES2015..ES2019) muchas cosas han cambiado en el mundo de JavaScript, y aún hay más por venir. Esta charla echa un vistazo a algunas de las características más nuevas (ES2020) y algunas de las próximas funcionalidades de ECMAScript, que esperamos se conviertan en parte de la Especificación del Lenguaje ECMAScript en un futuro cercano.

9 min
18 Jun, 2021

Video Summary and Transcription

Las etapas de las propuestas de ES Next incluyen persona ficticia, propuesta, borrador, candidato y finalizado. Los operadores de encadenamiento opcional y de fusión nula son soluciones para manejar valores indefinidos y nulos. Los operadores de asignación lógica y de fusión nula están buscando avanzar a la etapa cuatro. Se introduce el tipo decimal para abordar problemas de matemáticas de punto flotante. La API de cancelación y el control de aborto son soluciones para cancelar la ejecución de una promesa. La coincidencia de patrones permite emparejar la forma de un vector y realizar acciones basadas en ello.

Available in English

1. Introducción a ES Next y Etapas de Propuesta

Short description:

Hola, ES Next propone mirar hacia adelante. Mi nombre es Bramus y estamos en Yes Nation. TC39 es un comité que mantiene y evoluciona el lenguaje ECMAScript. Han establecido este proceso de desarrollo para avanzar en el lenguaje. El proceso consta de varias etapas: persona ficticia, propuesta, borrador, candidato y finalizado. En la reunión de enero de TC39, se recopilan las propuestas de etapa cuatro para la próxima versión de ES. Una de mis propuestas favoritas es el encadenamiento opcional, que ya es parte de ES 2020.

Hola, ES Next propone mirar hacia adelante.

Mi nombre es Bramus y estamos en Yes Nation.

Entonces, permítanme enfocar la pantalla correcta aquí, sí.

Si observamos la línea de tiempo de ECMAScript, vemos esta gran división entre antes de 2015 y después de 2015. Esto se debe a que TC39 es un comité que mantiene y evoluciona el lenguaje ECMAScript. Han establecido este proceso de desarrollo que comenzaron a utilizar para avanzar en el lenguaje.

Ahora, como tenemos poco tiempo hoy, porque es una charla rápida, les daré la versión muy resumida.

La etapa cero es la etapa de persona ficticia, que básicamente es como decir: aquí hay una amplia identificación. Puedo proponer una, tú puedes proponer una, todos pueden proponer una. Para que tu propuesta avance a la etapa uno, debe pasar a la etapa de propuesta. Básicamente, TC39 dice: está bien, estamos interesados en esta propuesta. Veamos a dónde nos lleva. Luego, cuando tu propuesta avanza a la etapa dos, es una etapa de borrador, TC39 básicamente confirma que parece que estamos en algo, vamos a desarrollarlo. Así que lo desarrollas, lo desarrollas, lo desarrollas, lo desarrollas, lo desarrollas. Y finalmente, tu propuesta puede llegar a la etapa tres, que es la etapa de candidato. En este punto, se considera que la propuesta está terminada, pero requieren comentarios. Comentarios de los implementadores, que son los navegadores, y ustedes, los desarrolladores. Si todo va bien, tu propuesta avanza a la etapa cuatro, que es la etapa final sin cambios. Así que en esta etapa, de la etapa tres a la cuatro, solo se permiten cambios críticos. La etapa cuatro, la etapa final, todo está en orden, y luego en la reunión de enero de TC39, se recopilan todas las propuestas de etapa cuatro, y luego se incluyen en la próxima versión de ES. Así que en enero, que acabamos de tener, se recopiló la versión ES 2020.

Echemos un vistazo a algunas de mis propuestas favoritas. La primera es el encadenamiento opcional. Esto ya es parte de ES 2020, y me gusta mucho y lo uso mucho personalmente. Tenemos este objeto aquí, mensaje con un usuario y demás. Si seleccionamos la primera cosa de él, se muestra sin problemas. Ahora, si seleccionamos algo que no existe, por ejemplo, un apellido, obtenemos undefined. Podemos agregar un valor predeterminado allí, como un valor de respaldo predeterminado en caso de que sea falso. Lo que uso allí es una lógica de cortocircuito con un or. Entonces, en este caso, se devolverá 'anónimo'.

2. Operadores de Encadenamiento Opcional y No Coalescing

Short description:

Pero esto no cubre el 100% de todos los escenarios. Tenemos algunas soluciones alternativas, pero el operador de encadenamiento opcional es la solución que se incorpora al lenguaje ECMAScript. Evalúa undefined si el operando es undefined o null. El operador de no coalescing sirve como una comprobación de igualdad contra null o undefined.

Pero esto no cubre el 100% de todos los escenarios. Por ejemplo, si seleccionamos meta.publicationDate, no obtenemos undefined, obtenemos un error. ¿Puedo leer la propiedad publicationDate de undefined, siendo undefined aquí, el mensaje.meta es undefined, por lo que obtenemos un error.

¿Cómo podemos solucionar esto? Bueno, entra en juego el operador de encadenamiento opcional. Por supuesto, tenemos algunas soluciones alternativas. No te recomiendo que las uses. Son soluciones alternativas realmente desagradables, pero el operador de encadenamiento opcional, esa es realmente la solución que se incorpora al lenguaje ECMAScript. Se ve así. Es un signo de interrogación y un punto.

¿Cómo funciona? Bueno, dice que el operando. Si ve uno, hará una pequeña comprobación. Si el operando del lado izquierdo del operador de encadenamiento opcional evalúa undefined o null, entonces toda la expresión evalúa undefined. Esa es la regla. El mensaje, eso es undefined, por lo que continúa. La próxima vez que encuentre el operador de encadenamiento opcional, comprobará message.meta. ¿Es eso undefined o null? Ese es el caso aquí. Toda la expresión evaluará a undefined, undefined o la nueva fecha, cadena ISO. Obtenemos la fecha real aquí en la pantalla. Ten en cuenta que el operador se escribe como signo de interrogación y un punto. No es solo un signo de interrogación. También puedes usarlo para acceder a propiedades o llamar funciones.

Luego, el no coalescing. Vimos esto justo antes. Usamos el operador para comprobar si es null o undefined, pero hay un problema aquí porque hacemos message.settings.show splash screen. Eso es false o true. Eso da como resultado true, pero queremos ver false allí. Aquí es donde entra en juego el operador de no coalescing. Es así y dará el resultado correcto. ¿Cómo funciona? Entonces, el doble signo de interrogación es el operador. ¿Cómo funciona? Bueno, sirve como una comprobación de igualdad contra null o undefined.

3. Asignación Lógica y Coalescing Nulo

Short description:

Si el elemento del lado izquierdo es nulo o indefinido, se devolverá el elemento del lado derecho. Esto está en la etapa tres y busca avanzar a la etapa cuatro en julio. El operador de asignación lógica, representado como signo de interrogación, signo de interrogación igual barra, establece el valor de barra a la variable si options.foo es nulo o indefinido. También funciona con or y and.

Entonces, si el elemento del lado izquierdo es nulo o indefinido, solo se devolverá el elemento del lado derecho. Aquí obtenemos falso, doble signo de interrogación, verdadero. Eso dará como resultado falso, que es el resultado correcto.

Genial. Asignación lógica. También es bueno. Esto está en la etapa tres. Busca avanzar a la etapa cuatro en la próxima reunión. Eso será en julio. Probablemente será ES 2021.

Digamos que no tenemos un valor para options.foo. Bueno, podemos usar nuestro operador de coalescing nulo y options.foo doble signo de interrogación barra, pero esto siempre hace un derecho. options.foo se asignará o barra se asignará a options.foo. Siempre tenemos un derecho allí. Los operadores de asignación lógica se ven así. La asignación lógica se ve así. Entonces es signo de interrogación, signo de interrogación igual barra. Entonces, si options.foo es nulo o indefinido, establecerá el valor de barra en esa variable. También funciona con or, también funciona con and. Una característica realmente buena. Esto me va a ahorrar tiempo al escribir JavaScript.

4. Tipo Decimal y Matemáticas de Punto Flotante

Short description:

Si sumamos 0.1 y 0.2 en JavaScript, obtenemos 0.30004.com. ¿Es esto un error de JavaScript? No, no lo es. Las computadoras tienen problemas con las matemáticas de punto flotante. La solución es agregar el nuevo tipo decimal con el sufijo m.

Y decimal, contemos hasta cero a tres. Esto es interesante. Si sumamos 0.1 y 0.2 en JavaScript, obtenemos 0.30004.com. Hmm, extraño. ¿Es esto un error de JavaScript? No, no es un error de JavaScript. Es un problema de las computadoras. Básicamente, tienen problemas con las matemáticas de punto flotante. Hay este maravilloso sitio web con una magnífica URL, 0.30004.com, que hace esto por nosotros. Nos lo explica. Entonces, ¿cuál es la solución? Bueno, la solución es agregar el nuevo tipo decimal. Es esto, el sufijo m. Entonces, el decimal 0.1 y el decimal 0.2, si los sumas, obtienes el decimal 0.3, que es el resultado correcto.

5. Introducción a la API de Cancelación

Short description:

Etapa cero, por cierto, no sé hacia dónde se dirige esto. Luego, etapa uno, la API de cancelación. Digamos que tenemos una promesa aquí y la llamamos, llamamos a esta función con la promesa adentro. Primero, es una promesa de registro al inicio, y luego, después de 2.5 segundos, será una promesa resuelta en protector solar. Pero, ¿cómo podemos cancelar la ejecución? No hay una forma real de hacerlo. Bueno, la solución es la API de cancelación, etapa uno. Ten en cuenta que la sintaxis está a punto de cambiar, pero así es como se ve. Básicamente, consta de tres pasos.

Etapa cero, por cierto, no sé hacia dónde se dirige esto. Luego, etapa uno, la API de cancelación. Digamos que tenemos una promesa aquí y la llamamos, llamamos a esta función con la promesa adentro. Primero, es una promesa de registro al inicio, y luego, después de 2.5 segundos, será una promesa resuelta en protector solar. Pero, ¿cómo podemos cancelar la ejecución? No hay una forma real de hacerlo. Bueno, la solución es la API de cancelación, etapa uno. Ten en cuenta que la sintaxis está a punto de cambiar, pero así es como se ve. Básicamente, consta de tres pasos. Uno, pasas el token de cancelación. Luego, dos, con ese token de cancelación, lo primero que haces, bueno, si ya está cancelado, detienes la ejecución. Luego registras una devolución de llamada cuando se llama al token de cancelación, el método de cancelación. Esta función se ejecutará, y luego, justo antes de que se resuelva, anulas el registro de tu devolución de llamada. El uso se ve así. Entonces creas una fuente de token de cancelación. Lo pasas a tu función. Luego, por ejemplo, después de un segundo, llamas a source.cancel. Así que esto será una promesa iniciada. Y luego, después de un segundo, la promesa será cancelada, que es el resultado correcto.

6. Abort Control y Pattern Matching

Short description:

El abort control es una solución específica del proveedor, no parte de ECMAScript o JavaScript en sí. El pattern matching permite hacer coincidir la forma de un vector y realizar acciones basadas en ella. Es útil para casos como las solicitudes fetch. ECMAScript tiene más propuestas desde la etapa cero hasta la etapa cuatro, que se pueden encontrar en GitHub o en mi blog.

Nota al margen, el abort control, es algo que ya existe. Esta es una solución específica del proveedor. No es parte de ECMAScript o JavaScript en sí. Esto es algo que aún no se puede usar en los navegadores, pero no es parte de la sintaxis de ECMAScript.

Y luego, el último, el pattern matching, del que voy a hablar. Digamos que quieres calcular la longitud de un vector. Bueno, dependiendo de si es un vector 3D o un vector 2D o algo más, debes usar una fórmula diferente. x, y, y z, debes usar la fórmula uno. Es un vector 2D. Debes usar otra fórmula. Si tiene una longitud, debes devolver la longitud. Pero, ¿qué pasa si simplemente quieres hacer coincidir la forma? Bueno, esto es lo que hace el pattern matching. Dice, mira la forma del vector. Cuando hay una x, y y z presentes, usa esta fórmula, x e y, la otra fórmula. Si es spreadable, es decir, tiene una longitud, devuelve la longitud, de lo contrario, verdadero y error.

Esto es genial. Un caso de uso, por ejemplo, las solicitudes fetch. Si se devuelve un 200, si se devuelve un 400, simplemente puedes mirar la forma y luego realizar una acción basada en eso. Y esto, amigos míos, es solo una selección. Hay mucho más por venir en ECMAScript. Propuestas que van desde la etapa cero hasta la etapa cuatro. Todas están abiertas, así que puedes consultarlas en GitHub, tcturr9. Trabajan de forma abierta. También puedes consultar mi blog, bram.us, o usar el enlace corto que se encuentra a continuación para ver algunas propuestas sobre las que escribí.

Quiero agradecerles por su atención. Mi nombre es Bramuis. También tengo un blog, bram.us. También estoy en Twitter, en bramusblog. Gracias. ♪♪♪

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

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.