ES?.next()

Rate this content
Bookmark

Does hearing about potential new features of Javascript makes you excited? Then this talk is for you! We will walk through a few interesting proposals from TC39 from stage-0 to stage-3. Let us see how beneficial these proposals are with code samples and some live coding.

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

FAQ

The TC39 committee is a technical committee within ECMA (European Computer Manufacturing Association International) that is responsible for developing and maintaining the ECMAScript specification, which is the standard underlying JavaScript. They work through a process involving multiple stages, from initial ideas (stage 0) to finalized features (stage 4) that are ready for implementation in JavaScript engines.

The ECMAScript proposal process involves five stages, starting from stage 0 (Strawperson) where initial ideas are presented, to stage 4 (Finished) where the proposal is ready to be implemented in browsers. Each stage progressively refines and tests the proposal, gathering feedback and making necessary adjustments.

The term 'Strawman' was updated to 'Strawperson' in the ECMAScript proposal process terminology. This change was made to use more inclusive language within the technical discussions and documentation.

No, regular JavaScript users cannot directly vote on ECMAScript proposals. Voting is typically conducted within the TC39 committee, which consists of delegates from various organizations that have a stake in the web technologies. However, the general public can participate in discussions, provide feedback, and influence the direction of proposals through forums and social media.

The bind syntax, introduced in stage 0 of the ECMAScript proposal process, provides a more intuitive and simplified way to handle 'this' context in functions, making the code easier to read and understand. It allows chaining methods directly without needing to explicitly bind 'this' or use additional function calls.

The TC39 committee meticulously reviews each proposal to ensure that new features do not break existing JavaScript code. This involves extensive testing, discussions about potential edge cases, and consideration of how new features interact with existing features. The goal is to evolve the language while maintaining compatibility across the web.

Hemanth HM
Hemanth HM
31 min
10 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Talk discusses various proposals for the next version of ECMAScript (ES Next) and the TC39 process. It covers features such as binding syntax, shorthand property assignments, pattern matching, async match, operator overloading, and more. These proposals aim to simplify code, make it more readable, and introduce new functionalities. The Talk also addresses questions about the committee's decision-making process and the experience of being part of the TC39 committee.
Available in Español: ES?.next()

1. Introduction to ES Next and TC39 Process

Short description:

Hello, JS Nation. We are talking about ES Next in this talk. ECMA has many technical committees that decide and define the specifications of different entities. The TC39 works on ECMAScript and has 5 stages in the process. The first stage is a strawperson, followed by proposal, draft, candidate, and finished. We will be going through interesting proposals in each stage. Some features may not make it to the final state.

Hello, JS Nation. We are talking about ES Next in this talk. I am Hemant. I am a member of technical staff at PayPal, a GDE in web and payment domain and of course a TC39 delegate and you can tweet to me at gnumonth. ECMA, the European Computer Manufacturing Association International, has many technical committees that decide and define the specifications of different entities.

And one such, the 39th, is the TC39 which works on ECMAScript. How does the process basically work like? So we have basically 5 stages starting from stage 0 to stage 4. The first stage is called a strawperson. At this stage, you allow input into the specification. It's more like you have an idea and it's not yet presented in the committee. And stage 1 is more like a proposal. So you have an idea and you make a case for the additional and then describe the shape and also the solution. And what you are trying to solve and what is the solution like and what is the problem that you want to solve for is what you discuss here at stage 1. And at stage 2, you have a draft where you precisely describe the syntax and semantics using formal specification language. And then at stage 3, you have a candidate which indicates kind of, hey, this can be tested with a flag may be on your browser or a node environment. So it's kind of you are seeking feedback on the candidate from developers and saying, hey, use it with caution because now it's under a flag. Just use it and let us know how it looks like. And finally, at stage 4, it's finished and it's ready to be shipped. And sometimes it's already shipped with the flag, as I said, in stage 3, the flag is kind of removed at this stage and it's available in most of the modern browsers and other environments. That's the whole process of how TC39 works, like starting from straw person to the finished after the proposal drafted candidate, of course. Interestingly, this was called as Strawman before, and it's renamed to be Strawperson, which makes a lot of sense.

Here's an interesting graph, which is being pulled in the current stat where we have proposals from stage 0 to stage 4 and we have 18 such proposals on stage 0 and 79 proposals on stage 1, and we have 26 on stage 2, 14 on stage 3 and 49 on stage 4. So during this talk, we will be going through some interesting proposals in each of these stages and word of caution of course, because we are talking about some of the proposals which are at the very early state. Of course they will change, some of them might even change how they behave. The syntax might change, some of them might not even make it to the final state, so don't presume that all of these features will be available in Javascript some day. So these are some of the potential future features that we will be looking into. So I kind of marked each of the slides with these two emojis here, on the left what we see here with the glass icon is more like an IP saying that, hey, this is how we are doing it today. And on the right with the glasses is what we are saying, hey, how the future would probably look like. Let's say I have an iterLib and you have a function get players, which kind of gives you an object, which has characters and has attributes on strength and you need to pull some information out of it. So the iterLib is giving you map, take while and forEach methods.

2. Binding Syntax and Simplification

Short description:

And the get player here, with the val, gives you an object. So you want to map or as of today, you do a map.call on that value and fetch all the characters. And then you do a take while and say, hey, if the strength is greater than a hundred, give me all of those. And finally, you would probably have to forEach and do some processing. In this case, we are just console logging the value. Can this be better? So on state zero, we have this binding syntax, which makes life easier with the bind operator. If you can think of it as two successive columns here, what we see after get player, you have map and then you have take while and then you have forEach. Isn't it simpler compared to how we are doing it today, probably and how precise and simple it looks like here at state zero we have this bind syntax. So this bind syntax, if you were to summarize in the different variants that it provides, if you see object with the bind operator and function, which is equal to function.bind object followed by the bind operator object.function, which is indeed equivalent to object.function.bind with object. If you have object bind with function value, that's equivalent of function.call object.value. And if you just have bind object.function.value, which is equal to object.function.call object.value. This makes lives much simpler and intuitive to read, understand. And also the syntax looks beautiful, doesn't it?

And the get player here, with the val, gives you an object. So you want to map or as of today, you do a map.call on that value and fetch all the characters. And then you do a take while and say, hey, if the strength is greater than a hundred, give me all of those. And finally, you would probably have to forEach and do some processing. In this case, we are just console logging the value. Can this be better?

So on state zero, we have this binding syntax, which makes life easier with the bind operator. If you can think of it as two successive columns here, what we see after get player, you have map and then you have take while and then you have forEach. Isn't it simpler compared to how we are doing it today, probably and how precise and simple it looks like here at state zero we have this bind syntax. So this bind syntax, if you were to summarize in the different variants that it provides, if you see object with the bind operator and function, which is equal to function.bind object followed by the bind operator object.function, which is indeed equivalent to object.function.bind with object. If you have object bind with function value, that's equivalent of function.call object.value. And if you just have bind object.function.value, which is equal to object.function.call object.value. This makes lives much simpler and intuitive to read, understand. And also the syntax looks beautiful, doesn't it?

QnA

Available in other languages:

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
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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
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.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
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.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
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 in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
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.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
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 JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
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
Top Content
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.
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
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