Future Features of JS?!

Rate this content
Bookmark

Curious to know what are some of the potential JS features that are cooking right now?

Yes are at the right place! This talk will be walking you through such features with code samples and some insights from the TC39 meeting notes about them.

Hemanth HM
Hemanth HM
28 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to the future features of JavaScript, including proposals for array operations, throw expressions, records and TPUs, pipeline operators, and more. The talk covers the introduction of type assertions for imported files, non-mutating array operations, and the simplification of error handling. It also explores the concept of immutability with records and TPUs, and the use of the pipeline operator to simplify code. Other proposals include Map.implace, IteratorHelper, slice notation, type annotations, Array UNIQBY, number ranges, and the Function 1 proposal.

Available in Español: ¿Futuras características de JS?!

1. Introduction to JavaScript Proposals

Short description:

Welcome to the future features of JavaScript. We will go through different proposals from stage 0 to stage 3. The TC39 process includes different stages, starting from Stage 0 to Stage 4. Let's dive into and surprise ourselves with some of these proposals, starting with Stage 3. One proposal is about finding values from the end of an array. Another proposal is about finding the last index. The proposal suggests adding convenient methods to the array object. The proposal has been discussed and different names have been suggested. The implementation can be found in the Chromium source.

Hello, JS Nation. Welcome to the future features of JavaScript. In this talk, we will be going through different proposals from stage 0 to stage 3, understand why they exist, what they are trying to solve, and hopefully, they get implemented in all of the JavaScript environments.

I'm Hemant. I'm an Engineering Manager here at PayPal, a TC39 delegate, a Google developer expert for Web and Payments Domain. You can hit me at Newman on Twitter or find me on html.com. The ECMA International has a lot of technical communities, out of which TC39 happens to be the ECMAScript community, which is responsible for the specification that JavaScript implements. The TC39 process includes different stages, starting from Stage 0 to Stage 4, where Stage 4 is finished and implemented in different environments, and Stage 1 is more like a strawman with just a basic idea of what the proposal is. In this talk, we will go from Stage 0 to Stage 3 and see different proposals.

If we look into the current state of how the proposals are, on Stage 0, we have 18 proposals. On Stage 1 we have 91 proposals, and Stage 2 we have 22, and Stage 3 we have 17, and Stage 4 we have 59 proposals. Let's dive into and surprise ourselves with some of these proposals, starting with Stage 3.

Say we have an array of objects and you want to find a particular value from the end of the array. What would you do? You would probably do a reverse on that array and do a find. In this case we're trying to find the values which are not divisible by 2. And in this case we got value as 3, but we had to reverse the array and then do a find. What if we had a convenient method which says, array.findFromLast, array.findLast, here is the condition, give me the element. What if you were to find the last index? You would again do a reverse and do a find.index, and take the array.length and subtract minus 1 from it and subtract that value from whatever we found if the result is matched to find the index. In this case the value was 2. Suppose the condition is not met, where we are looking for number 42. The value should have been minus 1, but it is 4. What if we had a method that said, array.findLastIndex, and when the condition is met it will find the index if it's present, and if not it would give minus 1. Wouldn't it be convenient? Here on the left is a comment from one of the issues in GitHub for this proposal where the idea was to discuss and come up with names. As you can see, some of the names that were popped up in the issue was like findRight, findIndexRight, findLast, findIndexLast, findEnd, findIndexEnd, and so on. Finally we have findLast, and last, findLastIndex as the proposal today. On the right side we can see an implementation from the Chromium source which says fastArray findLast. If you want to open up spec, you could do a one on one mapping to each of those lines in this code to understand how the specification is implemented. For example, on the comment where it says 4, that's point four in the spec which says let k be length minus one, and that's where we have the exact implementation here. That is findLast and findLastIndex. Then we have import assertion.

2. Import Assertion and JSON Modules

Short description:

This proposal introduces a way to assert the type of imported files in JavaScript. It allows for explicit type declarations when importing JSON, JavaScript, or WebAssembly files, providing increased security and clarity in code. Additionally, there are separate proposals for JSON modules and the decoupling of JSON modules from import assertions. These proposals undergo modifications, discussions, and decisions during the proposal phase. It is important to stay updated on the progress of these proposals, and a recommended talk by Julia at GSNation provides insights into how JS modules work from a browser's perspective.

This kind of proposal gives a way to assert the type that we are importing. For example, in this case, we are saying import json from foo.json, assert type json. We are saying okay this is of type json, and if you were to use dynamic imports, you would say import foo.json and say assert type json when you are doing a dynamic import, and if say you have a JavaScript which is kind of exporting a value and you want to export that value from your file, we could say export value from foo.js which is exporting that value and then you are asserting type to be JavaScript.

And finally, you could use type to be WebAssembly and this can also be used in the script tag. And you might be wondering why should I use an assert type? Why do I need this inline thing? Why not just import JSON from foo.json? Well, it happens just relying on the MIME type to figure out whether it's JSON or not causes a security bug. There's a lot of concerns around security on just importing a random file. And then you have to make sure that you're asserting this is of type JSON and if it is something else, apart from JSON, it would throw and say, hey, I don't know because I'm trying to assert this to be a JSON file and it's not, thereby keeping the code more secure and giving us an easy way to express ourselves in line on what type is this in terms of asserting that this is what we are really importing.

Similarly, we have JSON modules, which is very much similar to what we saw previously, you can import JSON as modules and having this assertion type. But you might be wondering why two different proposals? Is it very much similar to what we just saw previously? Well, if you dig into the notes from the meeting, you can notice here that there was a discussion and the decision that was made it said, one of the decisions was that decouple JSON modules, so that makes into stage two, and then progresses to different states, right? This is a common thing that happens during the phase of a proposal, it might get modified, it gets changed, can branch into two different proposals, it can also get discarded and rejected to a lot of reasons. So here we saw that JSON module was part of the import assertion, but became an independent proposal in itself so that it can accelerate quickly towards the finish. Definitely don't miss this talk from Julia, which is part of GSNation this time and she's talking about how JS modules work from a browser's perspective. She's sitting in the 39 delegate of course and as an implementer in Firefox, this talk is a must watch if you want to know more about how JSON modules work.

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
Build a Powerful Datagrid With AG Grid
React Summit 2024React Summit 2024
168 min
Build a Powerful Datagrid With AG Grid
WorkshopFree
Brian Love
Brian Love
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.
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.