ES?.next()

Rate this content
Bookmark

¿Te emociona escuchar sobre posibles nuevas características de Javascript? ¡Entonces esta charla es para ti! Recorreremos algunas propuestas interesantes de TC39 desde la etapa 0 hasta la etapa 3. Veamos qué tan beneficiosas son estas propuestas con ejemplos de código y algo de codificación en vivo.

Hemanth HM
Hemanth HM
31 min
10 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla discute varias propuestas para la próxima versión de ECMAScript (ES Next) y el proceso de TC39. Cubre características como la sintaxis de enlace, asignaciones de propiedades abreviadas, coincidencia de patrones, coincidencia asíncrona, sobrecarga de operadores y más. Estas propuestas tienen como objetivo simplificar el código, hacerlo más legible e introducir nuevas funcionalidades. La charla también aborda preguntas sobre el proceso de toma de decisiones del comité y la experiencia de ser parte del comité TC39.

Available in English

1. Introduction to ES Next and TC39 Process

Short description:

Hola, JS Nation. Estamos hablando de ES Next en esta charla. ECMA tiene muchos comités técnicos que deciden y definen las especificaciones de diferentes entidades. TC39 trabaja en ECMAScript y tiene 5 etapas en el proceso. La primera etapa es una propuesta inicial, seguida de una propuesta, borrador, candidato y finalizado. Repasaremos propuestas interesantes en cada etapa. Es posible que algunas características no lleguen al estado final.

Hola, JS Nation. Estamos hablando de ES Next en esta charla. Soy Hemant. Soy miembro del personal técnico de PayPal, un GDE en el dominio web y de pagos y, por supuesto, un delegado de TC39 y puedes enviarme un tweet a gnumonth. ECMA, la Asociación Internacional de Fabricantes de Computadoras de Europa, tiene muchos comités técnicos que deciden y definen las especificaciones de diferentes entidades.

Y uno de ellos, el 39, es el TC39 que trabaja en ECMAScript. ¿Cómo funciona básicamente el proceso? Entonces, básicamente tenemos 5 etapas que van desde la etapa 0 hasta la etapa 4. La primera etapa se llama propuesta inicial. En esta etapa, se permite la entrada en la especificación. Es más como tener una idea y aún no se ha presentado en el comité. Y la etapa 1 es más como una propuesta. Entonces tienes una idea y presentas un caso para la adición y luego describes la forma y también la solución. Y lo que estás tratando de resolver y cuál es la solución y cuál es el problema que quieres resolver es lo que se discute aquí en la etapa 1. Y en la etapa 2, tienes un borrador donde describes precisamente la sintaxis y la semántica utilizando un lenguaje de especificación formal. Y luego, en la etapa 3, tienes un candidato que indica que, hey, esto se puede probar con una bandera, tal vez en tu navegador o en un entorno de nodo. Entonces, es como si estuvieras buscando comentarios sobre el candidato de los desarrolladores y diciendo, hey, úsalo con precaución porque ahora está bajo una bandera. Solo úsalo y dinos cómo se ve. Y finalmente, en la etapa 4, está terminado y está listo para ser lanzado. Y a veces ya se ha lanzado con la bandera, como dije, en la etapa 3, la bandera se elimina en esta etapa y está disponible en la mayoría de los navegadores modernos y otros entornos. Ese es todo el proceso de cómo funciona TC39, desde la propuesta inicial hasta el final después de la propuesta, el borrador, el candidato, por supuesto. Curiosamente, esto se llamaba Strawman antes, y ahora se llama Strawperson, lo cual tiene mucho sentido.

Aquí hay un gráfico interesante, que se extrae del estado actual donde tenemos propuestas desde la etapa 0 hasta la etapa 4 y tenemos 18 propuestas en la etapa 0 y 79 propuestas en la etapa 1, y tenemos 26 en la etapa 2, 14 en la etapa 3 y 49 en la etapa 4. Así que durante esta charla, repasaremos algunas propuestas interesantes en cada una de estas etapas y una palabra de precaución, por supuesto, porque estamos hablando de algunas de las propuestas que están en una etapa muy temprana. Por supuesto, cambiarán, algunas de ellas incluso podrían cambiar su comportamiento. La sintaxis podría cambiar, algunas de ellas incluso podrían no llegar al estado final, así que no supongas que todas estas características estarán disponibles en Javascript algún día. Estas son algunas de las posibles características futuras en las que nos fijaremos. Así que marqué cada una de las diapositivas con estos dos emojis aquí, a la izquierda lo que vemos aquí con el icono de gafas es más como una IP que dice, hey, así es como lo estamos haciendo hoy. Y a la derecha con las gafas es lo que estamos diciendo, hey, cómo sería probablemente en el futuro. Digamos que tengo un iterLib y tienes una función obtener jugadores, que te da un objeto que tiene personajes y tiene atributos de fuerza y necesitas extraer alguna información de él. Entonces, iterLib te proporciona los métodos map, take while y forEach.

2. Binding Syntax and Simplification

Short description:

Y el getPlayer aquí, con el val, te da un objeto. Entonces quieres mapear o, como se hace hoy en día, haces un map.call en ese valor y obtienes todos los personajes. Luego haces un take while y dices, hey, si la fuerza es mayor que cien, dame todos esos. Y finalmente, probablemente tendrías que hacer un forEach y hacer algún procesamiento. En este caso, solo estamos imprimiendo en la consola el valor. ¿Puede ser mejor? Así que en el estado cero, tenemos esta sintaxis de enlace, que facilita la vida con el operador bind. Si puedes pensarlo como dos columnas sucesivas aquí, lo que vemos después de getPlayer, tienes map y luego tienes take while y luego tienes forEach. ¿No es más simple en comparación con cómo lo estamos haciendo hoy en día, probablemente y cuán preciso y simple se ve aquí en el estado cero tenemos esta sintaxis de enlace. Entonces, esta sintaxis de enlace, si tuviéramos que resumir en las diferentes variantes que proporciona, si ves objeto con el operador bind y función, que es igual a function.bind objeto seguido del operador bind objeto.función, que de hecho es equivalente a objeto.función.bind con objeto. Si tienes objeto enlace con valor de función, eso es equivalente a function.call objeto.valor. Y si solo tienes enlace objeto.función.valor, que es igual a objeto.función.call objeto.valor. Esto hace que la vida sea mucho más simple e intuitiva de leer y entender. Y además, la sintaxis se ve hermosa, ¿verdad?

Y el getPlayer aquí, con el val, te da un objeto. Así que quieres mapear o, como se hace hoy en día, haces un map.call en ese valor y obtienes todos los personajes. Y luego haces un take while y dices, hey, si la fuerza es mayor que cien, dame todos esos. Y finalmente, probablemente tendrías que hacer un forEach y hacer algún procesamiento. En este caso, solo estamos imprimiendo en la consola el valor. ¿Puede ser mejor?

Así que en el estado cero, tenemos esta sintaxis de enlace, que facilita la vida con el operador bind. Si puedes pensarlo como dos columnas sucesivas aquí, lo que vemos después de getPlayer, tienes map y luego tienes take while y luego tienes forEach. ¿No es más simple en comparación con cómo lo estamos haciendo hoy en día, probablemente y cuán preciso y simple se ve aquí en el estado cero tenemos esta sintaxis de enlace. Entonces, esta sintaxis de enlace, si tuviéramos que resumir en las diferentes variantes que proporciona, si ves objeto con el operador bind y función, que es igual a function.bind objeto seguido del operador bind objeto.función, que de hecho es equivalente a objeto.función.bind con objeto. Si tienes objeto enlace con valor de función, eso es equivalente a function.call objeto.valor. Y si solo tienes enlace objeto.función.valor, que es igual a objeto.función.call objeto.valor. Esto hace que la vida sea mucho más simple e intuitiva de leer y entender. Y además, la sintaxis se ve hermosa, ¿verdad? Veamos otro ejemplo aquí.

QnA

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

Scaling Up with Remix and Micro Frontends
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.
Full Stack Components
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.
Making JavaScript on WebAssembly Fast
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.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.
Webpack in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
Top Content
What can we learn from the last 10 years for the next 5 years? Is there a future for Webpack? What do we need to do now?
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
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.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
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.
Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
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
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
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
JavaScript-based full-text search with Orama everywhere
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
Michele Riva
Michele Riva
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.
Back to the basics
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
Guillermo Gutierrez Almazor
Guillermo Gutierrez Almazor
“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.