ES13 and Beyond: The Future of JavaScript | Christina Zhu | SeattleJS Conf 2023

All right. Next up we have Christina Zoo, who is going to be giving us a a lovely history of JavaScript, as well as a look at its future. Christina is a senior developer Advocate who co-founded the hackathon hack Davis, which just is still running, happened just a few months ago. Not too long ago. Christina's coveted Hobby, who had covert Hobbies- go ahead, put your hand up. If you had a weird coveted hobby you might be a little embarrassed about. Today. I was collecting rocks. Christina's covet hobby, though, was collecting Pokemon cards, and, if I recall correctly, is quoted as saying: opening Pokemon cards is basically just gambling for nerds. And with that, Christina, thank you cool, the mic is working. Show more

Yeah, nice to meet everyone. My name is Christina. I'm a senior developer Advocate, formerly asleep. I used to work at Amazon too, so I am super excited to be here today to discuss some history and evolution of JavaScript. Show more

So, while these changes might seem kind of trivial at the surface, they have substantial impact on how we program on the day-to-day. So if you walk away from my talk and learn like at least one new thing, I'll consider that a success. Yeah, so, first off, does anyone remember these? Yeah, do you guys remember having one? When was the last time you fed one, shed your pet, all right anyway. So these are Neopets. I had been coding JavaScript for a while now, but, if I were to be honest, my introduction to JavaScript happened with Neopets, and I will explain what that means. So, Neopets, when you first joined, this is what your user profile would look like: pretty ugly. But luckily, Neopets had the ability you could customize your profile page with HTML, CSS and JavaScript. So I was nine years old and making sure my profile didn't look like this, because I wanted to flex on all my friends, I had to make sure it looked like this, which was way, way cooler. Yes, thank you. Um, so I had been technically coding in JavaScript for 20 years, even though I did not know what JavaScript was back then. So, yeah, so that that's, that's my history with JavaScript. So let's Journey back to 1995, when Brandon at Netscape introduced a revolutionary programming language, initially called mocha, out of a 10-day coding Sprint, which can be seen sometimes, I think. Show more

But it was a business driven decision, because netscape's competitor named Microsoft was about to release something called Internet Explorer. So Netscape wanted to get ahead of it and decided to make a mocha. Well, which was then called livescript, but then something called Java was created. They were like, okay, this is too juicy to pass up, we actually need to call it JavaScript. So, but despite their like linguistic similarities, they're about as similar as a car and a carpet, so they're like not really related at all. But yeah, that's a. That's how JavaScript was born. So I'm gonna do a lightning round. Show more

We're gonna go through each year of JavaScript and what was introduced in their new features, one by one. I guess now is a good time to mention that es6 was the year that the JavaScript committee decided to do yearly releases instead of once in a decade releases. So yeah, that's. Let's go through them very quickly. Some of you probably already use all of these all the time. So, 2016, we were introduced to includes. We also have a new exponential operator, so now we don't have to use mathpal, we can just use the exponential operator, um, and you can see that the includes method also can detect not a number, which is great, so awesome. 2017. we were introduced to the amazing, incredible, beautiful ASAC, async await syntax, one of its major features, which change asynchronous programming forever, basically. Show more

So it's a cleaner, more intuitive way to deal with promises, and before this we use promises and callbacks, but I'm sure many of you remember the nightmare code that would kind of result from very complicated projects. So it was, you know, a godsend when they introduced this. We also introduced objectentries and objectvalues, which was pretty cool, but before this we were live on a four in Loop. Es9 introduced a rest and spread properties, so this allows you to copy or combine arrays more concisely- very pythony. Show more

Asic iterators and generators were also notable features of this release. So it allows promises to enter operate with more generators in a more controlled manner. So it works the regular way as a regular iterators, but they return a promise for an object and then finally we have promisef. Finally, it's a new instance method, so when the promise is settled, it runs whether or not it is resolved or rejected. So really great for running writing like cleanup code, regardless of the outcome of the promise, and then regex improvements. So es10, we're at 2019. It provided the flat and flap map methods for arrays. Show more

No longer will you need to have to wrestle with reduce or concat. But, more importantly, one of my favorite features that were introduced is try catch binding, so you can catch an error even when the error is not specified. This is probably one of my favorite features and I use it all the time because I'm an anxious programmer. So with es11, optional chaining was introduced, as well as the double question mark operator, which is called knowledge coalescing. Show more

So it's a logic operator that checks for knowledge values. So these two things, when used in conjunction, reduce the number of error cases and improved efficiency and handling variables. Specifically, with optional chaining, it checks to make sure that each one is, you know, valid before continuing on. So that was also really awesome. You didn't have, to like write a 10 level if statement, making sure each one existed before you kept going. And then es12, the last one before we continue. So we're at 2021. Now we have numeric separators, which improves the readability for big numbers. Show more

You can use an underscore to break up big numbers and promise not any. This is a promise combinator. It resolves as soon as any one of the promises is fulfilled, any single one of them. The rest of them can reject. They will still return, okay, it will only reject when all the promises are rejected. So these are some pretty cool things that were introduced only two years ago, right? So let's talk about some of the newer things that were introduced last year and this year. So, despite the fact that they were introduced last year, not everyone really knows how to use them, even though even if they've heard of them. Show more

So this data was taken from the state of JavaScript 2022.. A lot of people have heard of top level weight, but only 70 of people have used it, and you can see the rest of them as well. I'm sorry, I did not organize them from biggest to smallest, right, so yeah, so I think it would be good to go over a couple of these. So the most popular one that has been implemented since last year is called top level await. So async functions were added to JavaScript in 2017, but until now we can only use a weight inside async functions. Show more

But now you can use the away keyword outside of the async functions at the top level to wait for a promise to resolve. So, while using a top level weight in the module, where one module Imports another one, the execution of the parent module will wait when the execution of the child one is finished. So I made an example here. So the top one is how we do it before. You kind of wrap it in like an anonymous async function, which looked quite ugly, but for the new one. The bottom one worked and I'm sure a lot of you have tried to write the bottom one before. They implemented the feature. But now it's real and now you can do it like that. So this is actually one of the most popular features that they implemented last year. We also have private class methods and Fields. That were implemented last year, so this can improve the encapsulation of your code and prevent accidental access to sensitive data. Show more

So by default, class fields and methods are public in JavaScript, so they are Global, accessible globally. They can be read or modified from outside the class. So before, developers would kind of Mark their class with an underscore to mean like, oh, this is private, but there's nothing that actually prevents other code from accessing it. So JavaScript specification does not give any particular meaning to underscore. But now if you mark it as private with the little hashtag there, it will actually be private and that is pretty cool. There are also static class Fields now, so very Java e. You might have remembered learning this in your intro to object oriented programming class. Show more

But yeah, static class Fields: this means they are shared between all instances of said class and they can only be accessed by other static methods. So that was introduced last year as well. And last but not least, we have the dot at method for indexing. So the common practice before was to write array arraylength minus n, where n is the nth item from the end, or array dot slice negative n, which is hard to read for the first one or has performance issues for the second one. Show more

But you know now, with the creation of dot at, this also works for Strings. It's better for negative indexes and it's better for error handling too. But yeah, traditionally we've been using square brackets to access everything, and now we can access it using dot app, which is safer and handles more edge cases. I think cool. So now that we are done with last year's releases, we can talk about es14, which was just released two months ago actually. So these are the list of the features that were released this year and I can talk a bit more about these. So we have five new array methods- very exciting- and I didn't want to dedicate a slide to each of them, so I put them all here. But essentially we have two sorted. Show more

So it Returns the elements of the original array in ascending order to reverse, which is the original array in reverse order. Fine blast finds the last element of the array that matches a specified function that you pass in. Fine, blast index is the same thing, but it passes back the index instead of the element. And then two spliced returns: a copy of the original way with the specified element sliced out. Yeah, so actually only fight last and find last index were technically released two months ago, but Chrome implemented all five already. So if you want to try these out, you totally should, and I think this will make you know leak code a lot easier if you for some reason decided to delete code in JavaScript. Yeah, shebang comments. So they can now standardly interpret scripts, beginning with the hash bang, specifically in nodejs. So this essentially allows the execution of JavaScript scripts as Standalone executables. I showed the node interpreter here, but it can run lots of kinds of interpreters. So this is really great if you love to script in JavaScript. And next we have symbols as weak weak map keys. So I had to do a bit of research on this because I personally haven't used a week map before, but a weak map could only use objects as Keys before. Show more

Now you can also use symbols. So weak map will automatically remove keys that are no longer referenced by any other object. So this is really great for storing temporary data or data that you, you know, might need to process once or twice and don't need anymore, so that's really cool. It's always great to see them expanding on stuff like this. So what is next? So I also took the liberty of reading through the entirety of the state of JavaScript 2022, which is an incredible survey, and all of you guys should also answer it every single year if you can. But here are some of the highlights from it. So the top level wait saw a 26.5 increase in usage. Show more

Fight or Vitae- not sure which one it is- is very hot and growing fast. It won four Awards this year. So if you haven't heard of this framework Library yet, you guys should definitely check it out. It has a 98 retention rate. There's a lot of globally distributed talent. I think India is one of the top countries where JavaScript developers are growing right now. There are lots of performance Innovations in reactivity and hydration specifically, so expect to see more of those in the future and, surprisingly, private fields are the hottest debate topic of the new features that were released recently, so it got the most comments. I don't know why people are fighting about private Fields, but here we are. So what do I think es15 is going to look like and what do I think that JavaScript will look like in the future? So I guess first I talk more about the more focus on ES modules. So ecmascript modules, also known as es modules, is a JavaScript module format which is the official standard format to package. Show more

Javascript code offers an easier route to writing JavaScript which can run in the browser on the server. So it's like very modular. It's really reusable and I think as JavaScript applications continue to grow in size, we're going to see more and more of those. A functional programming is very, very exciting right now. So you've been seeing a lot of adoption of functional programming Concepts within JavaScript. It leads to cleaner, more robust and Bug resistant code. So, for example, libraries like low Dash or ramda help apply these Concepts and you know low Dash is one of the top libraries that were also used this year around- maybe like 70, I think. So I think we'll be seeing a lot more of that. Better async handling: we already saw that with the introduction of async and await. I think it will continue to improve and it is time to learn typescript, my dudes and dudits. So it is a super set of JavaScript that adds strong typing. It allows Ides to, you know, provide better auto complete navigation and refactoring. It also increases the speed of development and reduces the number of runtime errors. So it's gained a lot of traction within the JavaScript Community within the past couple years, and even several prominent JavaScript libraries, such as view, angular and Dino recommend it or even use it by default. So, oh yeah, there's a typescript workshop tomorrow. You guys should go. Webassembly also is very popular right now, so it allows running very high performance code in the browser. I know some speakers have mentioned it already, which is really cool and just goes to show how true this is. It offers a lot of promising possibilities for JavaScript to handle really complicated tasks such as game Graphics, video editing or even physics simulation. Progressive web apps combine the best of web and mobile applications, so they serve as a practical alternative to Native apps, while it also maintains, you know, accessibility and shareability of a web page. They are pretty much exclusively built in JavaScript, so I think it would be worthwhile to kind of investigate this if you guys have time. Show more

And, yeah, a more accessible AI. So there's going to be another Workshop about it in two days and you guys should probably go because I think there's going to be a lot of AI stuff happening in the next couple years and it's going to be very exciting. So I stole some of the data from the report and we can talk about how our favorite Frameworks are doing. So it's about is introduced in 2019 and is currently the most interesting front-end framework in the world right now, and you can kind of see that it took View and react spot, as they both kind of took a couple percentage points of a dive. Show more

Angular has, unfortunately, given driven quite a bit low, lower, and Ember has always just kind of been chilling there and I expect Amber to continue chilling there for quite a bit. Yeah, so really exciting to see how things go and really cool to see spell, you know, continue to gain more ground in market share as time goes on, so that is really exciting. Now, usage of rendering Frameworks: it's really cool to see the increase in usage of all kinds of rendering Frameworks. Nextjs is obviously the biggest and most popular one and, you know, still remaining at the top, but it's really cool to see that a couple new Frameworks have also jumped into The Fray, with nux, Gatsby, remix and Astro also gaining a lot of points. Show more

So I do think that you know more rendering Frameworks will become very popular in the future and I think their usage will continue to increase. So if you guys want to pick up learning something new, next is probably a pretty good choice. Next is usage of testing Frameworks. I'm really happy to see that JavaScript developers are embracing testing now. Really great to see more unit testing and integration testing and JavaScript applications, and you can kind of see this with lots of different kinds of testing Frameworks gaining popularity over the past couple years. Show more

Specifically, just mocha, storybook and Jasmine. These are just a few. The full report has all the different kinds of ones that you might have heard about, but I just picked the top couple just to see the trends over time. Essentially, next, JavaScript versus typescript usage in 2022. So on the far left, we have developers that code exclusively in JavaScript and on the right, we have people who code exclusively in typescript only. So this is a very interesting graph because, as you can see, a vast majority of JavaScript developers code almost exclusively in typescript or almost exclusively in typescript. Show more

So I think this is a sign of the times and I do think you know typescript is probably where we're going to be headed for the next couple years, and I do believe that the vast majority of JavaScript developers will also become typescript developers. So now's a good time to, you know, pick up some type scripting skills- and I know a couple of the speakers already talked about a lot of these, but it's really cool just to see the data anyway. Here are the most popular application patterns of 2022. So single page applications of beating out the rest of the pack at almost 75 percent, but server side rendering- also very popular- coming in as second, and you can see all the kinds of other patterns that are gaining traction. Show more

I just think it's really cool that partial hydration is there at all. I think that Tech is really awesome, but also really exciting to see server-side rendering becoming, you know, more of a thing, considering how good it is for SEO and your browser in general. So really excited to see where this goes next year as well. Javascript pain points in 2022, the top one being code architecture, then managing dependencies, then State Management and, surprisingly, date management at number four, which I guess is a big headache, because I myself also wrestled with this for a couple hours last week- then debugging and finding packages. Show more

So if any of you guys have some really great ideas on how to solve these pain points. These are what people are complaining about, and now is the time to you know. Release your own GitHub repository and rack up those stars and slap it on your resume. Following up on that, what do you feel like is missing in JavaScript? Static typing, a standard Library, better date management which ties back to the date management thing. So we really need a hero in this field right now. Immutable data structures and observable JavaScript. So if you guys have any great ideas on how to fix any of these issues in JavaScript, now is your time to shine. Show more

Next, how happy are you with JavaScript? So this was one of the funniest questions I saw in the report and I decided to put this up here. So overall, it does seem like JavaScript developers are quite happy, and I can kind of see why. You know, when I first started using JavaScript a couple years ago, when I first graduated- oh man, that was a while ago, yeah, it was- it was quite the struggle sometimes and you could add strings and numbers together for some reason. Show more

But you know, with all the improvements they've made these past couple years- and async await, for example, try catch blocks, typescript, for example- I can see why a lot of JavaScript developers are pretty happy nowadays and doing pretty well. So I don't know if this reflects all y'all's experience, but it does seem like the vast majority of us are having a good time, and I think it goes to show that you know tc39, the committee that runs JavaScript and releases the new features, is doing a pretty good job. That being said, if you are part of the 10 that is very unhappy and having a terrible time, there are ways to contribute to es15 to solve your own woes. I included a link over here in my slides, but essentially it's very similar to just opening a regular PR. You write about the issue you're having you code up a solution. They rip it apart with comments. I do that over and over until they're happy with it, and then you can say: I made JavaScript and flex on that during your family dinner. Show more

But yeah, so it's a pretty easy readme and it actually is a lot less intimidating than I thought it was when I took a look at it. So if you ever thought about actually, you know thinking, you know I have a really good idea for another array sorting operator, then now is your time to shine, right. So yeah, that's actually all I had today. Hopefully you guys learned at least one new thing, and thank you very much for listening. [applause]. Show more

Show more