 I saw that. The JavaScript is going to be structured and spread. I think I'll leave it for now, but do we need the clip on the recording? Yeah. That's mainly why I'm here to get the great recording. Cool. If you want to follow along, the slides are available here. Now, Ni Hao. What's your Leishen? Leishen? Thunder God. I was trying to make up my Chinese name, which is kind of basically translating Thor into Leishen, if that is correct. But yeah, I work as a development advocate at Stripe. Stripe, we built payments infrastructure. We have a lovely office. Not too far away, Anson Road. I think we might actually be hosting next month. So have a look at that. 60 Anson Road, I think Maple Tree, something like that. And I don't have any plane to catch. The only thing I have to catch is the MRT, and that runs until late. So I'm going to take out the speed a little bit here. And yeah. So yeah, location Singapore. I recently moved here, I think four months ago. So this was actually my first tropical Christmas, which was quite interesting. I miss the Christmas markets. I think that was the only thing I missed. Muld wine. Cool. Oh yeah. I've also been helping out, organizing some meetups. So Jamstack Singapore. If you know me, you know I love Gatsby, static sites. Anything that's static on the edge of the internet. And then APIs, JavaScript, lovely. And yeah, GraphQL Singapore. That was the first meetup yesterday. But if you weren't there, check it out on Meetup. We're going to have some more. And yeah, Jamstack and GraphQL are great friends as well. Cool. Now, I wouldn't actually dare to try and predict the future of JavaScript. If you know the history of JavaScript, you know it's not a good idea. I'm not going to play this video, but there is this great video. I think it's by Fireship, the history of JavaScript. And it's quite interesting. If you haven't seen it, give that a go. Cool. So yeah, instead of predicting the future, the reason why I did this talk is basically at the beginning of the year, I'd love to just kind of sit down, see, okay, what has happened recently in the JavaScript world and what is likely to come to JavaScript and sort of the adjacent ecosystems. And yeah, just kind of do a little research, see what's going on, maybe learn some new stuff. And so, let's start with some TC39 proposals. Actually, does anyone know what ECMA stands for? No. I actually just realized I forgot it as well. It's something European Computer Machinery Association or something. And then eventually they figured out, so it was founded in Switzerland, I think in the 60s. And eventually they figured out there's more to the world than Europe and so they call this ECMA International now. And so TC39 is the Technical Committee 39, which is working on the standardization of ECMA script, namely JavaScript. And if you haven't seen this, it's actually pretty cool to sort of click around, have a look. So there's a couple of stages for different proposals. Let's see if we can... So we have sort of a proposal, then becomes a draft, kind of a candidate proposal and eventually stage four is finished. I'm not going to go through this, but what we can do is we can look at some of the finished proposals which are going to make their way into JavaScript in 2020. And one I think of my favorites is the... What is it? Something chaining? Conditional chaining? Have you heard of that optional chaining? So if you've worked with JavaScript, you've likely done something like this before, especially if you're fetching data from a server, some kind of deeply nested data where it's like, okay, I want to get my user's street, but I don't actually know if there is even an address, right? And so I actually have to check, do I have an address on my user object? And if so, then I can try and access the street. Now, sometimes if you do this and the address is actually undefined, you get a JavaScript error. And so maybe let's actually do this and open up Node. Let's... Do you want to do the honest, maybe? Oh, maybe let's try the mark, yeah. Does that work? Hello. Okay, so we're going to have a user object, and we're just going to have an empty object for now. And let's basically actually try to sort of access the user's street address. Tag error cannot read proper street of undefined, right? You're familiar with that. But now, if we do this here, the optional chaining operator, what do you think is going to happen? Yes, unexpected token. So the thing is, it's not there yet. And there's a great resource for that, actually, which is called Node.green, which has a lot of green, but then if we go to, oh yeah, go to chaining, it's not so green yet. But we can see here, we can use the harmony flag. Let's try that. So let's do Node. Cool. And so we checked, I think, since, yes, 13.04 version, we can use it. So let's do, again, our user. And now, there's no more JavaScript error, but rather it returns undefined. Isn't that amazing? Just imagine when you write your React components, if you think kind of how often you've got the checking of that in there, it's going to make life so much sweeter now. Cool. Another one that is sort of similar to that is the Nullish-Koleskin operator. So if you've written JavaScript, you also have likely done this quite a bit. So if we have an undefined value. Now let's have a look here. Let's copy this. Okay. So let's say we have, you know, generally when you do this, basically you want to check, is there a value defined? And, you know, for example, if it's undefined, or you want to assign some default value. Now this becomes problematic when our default, when our value is zero, for example. So we want to have a number. Let's actually, let me do this here. So we basically want to check, okay, spawn settings. If we have an animation duration, you know, we want to set it to animation duration, otherwise we want to set it to 400. So now what do you think is the value of this? 400. Now the problem is zero in JavaScript is a, is it faulty, is it faulty, what do I say? Value. So that is actually not the outcome we want to get here. Now if we do the same thing, so generally what you would do now is basically you check, you know, is it type of number, and if it's type of number, you know, all that fun stuff. But now you can do this. Oh yeah, has already been declared, fair enough. Now let's just copy that. Now we get the actual number value instead of the wrong value. Isn't that amazing? No more type of checking. Now the downside is if you look at this, where was it? If you, yeah, look at this. So it's gonna probably take a while until it lands, specifically here. This is only in stage three at the moment. But if you use something like TypeScript, for example, you can already make use of these language features because TypeScript can actually compile it to currently usable JavaScript. So some cool thing for TypeScript is there is a TypeScript playground. So maybe let's actually copy that example over, or we can just do. So we have like zero, and then you want to check is duration is your mark and otherwise 400. And now you can see what actually happens, what is being translated to, we actually check if it's void or zero. But eventually all of that will be needed because in 2020 it's gonna be built into JavaScript. Cool. So some resources there if you look at the slides, you can find the links. Now moving on, yeah, TypeScript, so Carlos has preached a good word of GraphQL and TypeScript and the power of types. It first appeared on the 2016 Stack Overflow Survey back then almost half of 1%, well, almost half a percent of developers were using TypeScript. Now fast forward three years and TypeScript is actually in the top 10 languages with more than 20% usage. So it looks like people love their types. I've actually recently been converted for types as well, so we released our types within the Stripe Node Library and it's a game changer. Like you don't have to look at documentation anymore because the typing, you get basically self-documenting code completion. It's fabulous. So TypeScript probably in 2020 gonna see even more of that. You can see I think what's that sort of roughly tripled over the past two years. That correct? Yeah, definitely popular and rising. Here you can see the sort of the Christmas slum. You're gonna see that in all the graphs interestingly enough. People don't seem to work that much over Christmas. Cool, moving on. Some of the web platform APIs that are sort of in experimental stage at the moment. You might have already seen the Web Authentication API. Pretty cool. It allows the browser access to physical hardware tokens for authentication. There's a demo here you can click into by Mozilla. So basically you would register your token device and you might have seen this before. So this is the native browser window that pops up when you use the Web Authentication API. When I tap my security key here it's been registered and then I can actually verify that I didn't even touch it. Maybe my switch was sort of still giving it power or something interesting. But yeah, there's actually if you look at the documentation it is still a bit if the whole encryption piece and all of that sort of goes a bit over my head but I think the gist is the server creates some random number that is then basically signed with the public key of your hardware token. You then store that signed key on your server and then later when you want to verify it you basically do that again. Does it sound about right? Maybe someone wants to give a talk about the mechanics of it. I'm not going to do that. I'm going to move on to the native file system API. I think that's been yeah, that's going to be pretty popular especially when you're building like electron apps and things like that having access to the file system. There's a pretty good resource here. Web.dev. I don't know if you've seen that. Is it by Google? Yeah. That domain is fantastic. Web.dev. I have Thor, Web.dev which is almost as good. Yeah, so there's a good resource there. But then it's actually not you can't demo it that well. Where there is a nice demo is the native loading attribute which now gives us native lazy loading. There's been a ton of lazy loading libraries out there in the past but now it's natively baked into the browser. And Matias who is on the TC39 team has made this great demo with the kittens. And so if you what the lazy loading tag does is instead of loading all the images right away as the image tag comes into browser view and I need to go to all here you can see that as we scroll and our images come into view we actually then fetching the images from our server just in time and I mean if you think about some of the sort of data bandwidth that we get in some countries that is definitely, definitely useful. Cool. So native image loading another one. And yeah, here you can see so we're just saying ah, come on loading lazy and you can do the same for iFrames as well same tag there. Cool. Moving on to some of the frameworks one of the newcomers has been Svelte who here has heard of Svelte and to keep your hand up if you've used Svelte. Okay, so it's definitely a newcomer I think it's been around for a bit but so last year in I think early last year, Aprilish Svelte 3.0 came out it is quite interesting as it doesn't require any dependency so the idea is you actually compile into yeah, HTML sees as a JavaScript I think the idea is sort of it gives you it gets rid of kind of all the clutter and just keeps the good stuff and so what you can see is the actual output of this is then going to be clutter but also what's cool here you can actually switch between DOM and server-side rendering which is pretty nice and maybe let's look at some more useful example is this interesting? Yeah, so for example here like SRC is a shortcut for SRC equals SRC which is pretty cool and then also you can do styling in there and in the end it's just being compiled to compile it down into native code so no modules, no shadow DOM sort of that's what it prides itself with and therefore I guess you get pretty good speeds maybe definitely definitely something to watch in 2020 and yeah yeah, it's been growing it's been growing a bit kind of over the past two years but moving on to some of the more popular ones Angular, React and View I think you can see React is definitely so for the most popular here I think even more than double than Angular and View combined although growth that doesn't look like a lot of growth but maybe the scale is pretty big anyway, what's new? Did you get that picture? That's a pretty cool tool actually you can what's the website called? you can compare the NPM package downloads and get the charts trends NPM trends it's a great tool it makes your slides instantly beautiful what's new? Angular apparently Ivy, I'm not really in the Angular world anyone excited about Ivy? okay, nope no Angular, yes? okay so Ivy is Angular's new compiler or rendering engine something like that did I note down why it was new compiler? No why it is interesting, I forgot but maybe if you read the article but what's more exciting for me is Angular finally has a static side generator so maybe if someone wants to look into that and present it at the next Jamstack meetup so it's called Scully I think Scully IO I mean it's early days but still still exciting moving on to React have you been hooked? everyone loves hooks who loves hooks? hooks fantastic I personally don't like classes so anything that can be functions yes please I also prefer factory methods before new classes so yes functions everyday so hooks is great because we can now use state and effect hooks in our functional components so we don't need the class stuff anymore and another thing that is sort of in experimental mode the moment is the concurrent mode which basically allows concurrent updates so updates to the state at the same time and you can imagine it basically like a good workflow with branches so you branch off the state and you eventually merge the state back together and so now you can actually update the state concurrently so that's pretty exciting and that has pathed the way to the new suspense suspense quite interesting for data fetching so if you've done data fetching in React before you've likely had sort of some loading question mark show spinner component otherwise show my actual component and so suspense actually allows us to do this declaratively so we can say ok suspense if we're loading show our spinner otherwise the profile page and there's also a nice demo for this here let's see so maybe if we reload that you can see here at first we're loading the profile and then we're loading the post and it is really nice and readable so that's pretty cool suspense awesome and a view I personally don't work a lot with view but so apparently what's new is the composition API which exposes some of use core capabilities like reactive state as functions so the great thing about that apparently is kind of allows you to sort of write cleaner components especially at scale and also it allows easier typing of these components and as we've learned earlier it's all about the types in 2020 so that's pretty cool anyone who uses view view popular have you heard of the composition API? nice is it good? okay maybe tell us at the end of the year if it was great not forget Node.js so I think one sort of downside of JavaScript that often is being sort of pointed out is the single threadedness of JavaScript so with worker threats we can actually compute JavaScript in parallel by managing different worker threats so that's quite exciting ES modules so since Node 13 we have native modules so we can use import and export instead of the require statements in Node and lastly nest.js has been very popular in 2019 has been growing it's kind of a server site node framework have you heard of nest? okay so yeah again apparently good TypeScript support I think it's also written using TypeScript and then also GraphQL support by wrapping Apollo server so that seems to be pretty exciting now moving on native mobile so React Native vs NativeScript vs Ionic I think growth has been pretty flat here also what has happened to NativeScript? anyone know? anyone use NativeScript? no okay I don't know either but not much has happened React Native we've gotten fast refresh basically kind of allows us to get near instant feedback they call it and then Ionic has now React support if you use Ionic before you might know it was all about Angular but now Ionic React is here anyone use Ionic? okay lastly some emerging technologies I'm not sure I can I bucketed SwiftUI there as emerging but SwiftUI sort of allows you to build declarative UIs similar to React but with the Swift programming language so if you it is limited to iOS though so potentially more interesting Flutter which comes out of Google and uses the Dart programming language which is syntactically sort of similar to JavaScript and here if you look at the state of the October's report from GitHub Dart has actually been the fastest growing language in 2019 2018 to 2019 somewhere there and what's interesting Dart has now in beta support for the web as a target so potentially you can actually just write your whole apps and web in Dart so maybe that's interesting lastly maybe more excitingly at the beginning of December the World Wide Web Consortium has officially taken WebAssembly into well I guess the fourth official language for the web I've linked some resources there that I found interesting I think what sort of trimmed me up a little was kind of WebAssembly as the fourth language and I was like don't you write basically with WebAssembly you write in like C, C++, Rust whatever but the idea is that you write in these languages you compile it to WebAssembly and then WebAssembly actually allows you using JavaScript you can then access your code that you've written in C, C++ on the web platform so I guess it is a language that languages compile to interesting I haven't looked into it myself but I'd love to learn more so if anyone wants to give a talk at the next talk.js meet up talk about WebAssembly will be awesome that's it from me but I'd love to hear if we have time what are you most excited about in 2020 JavaScript so JSConf is happening again this year sometime this year next year this year, sometime this year anyone else something anyone excited no one excited we just shouted out do I hear WebAssembly yeah that's exciting another talk that I advised last year was not to use it so maybe I can look that up on engineer studies team or what's the title don't use WebAssembly anyway thanks everyone hopefully you're somewhat excited about 2020