Take a look at the future of JavaScript in the year 2020. Expect awesome new language features and disruptive trends that could change everything! 

TC39 Proposals https://github.com/tc39/proposals
Stack Overflow Survey https://insights.stackoverflow.com/survey/2019
State of the Octoverse https://octoverse.github.com/
Fireship Lesson https://fireship.io/lessons/javascript-2020-predictions/

#JavaScript #future #2020

Want to learn more? Upgrade to PRO status

https://fireship.io/pro

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:26:58.964Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
424834aa-d211-4fc2-9b7e-c4def4279d27
a0135687a45856dd8a360060fb90b6a1519fc5a15e02abf79939ec106a21c961
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Prediction is very difficult, especially if it's about the future, and even more so if it's about the future of JavaScript.
As app developers, we'll be spending the rest of our lives in the future of JavaScript.
So in today's video, we'll look at new features coming to the language, the current state of front end frameworks and new features they're releasing, as well as disruptive trends that could change everything in 2020.
And if you're here because you hate JavaScript, make sure to stay tuned until the end, because we'll look at a few tools that you can use to build web apps without JavaScript.
The future of JavaScript isn't what it used to be.
Make sure to like and subscribe, and let me know what you think about JavaScript in the comments below.
One lucky comment will win this one of a kind t shirt.
Let's start things off by taking a look at some of the newest features coming to a JavaScript near you in 2020.
And if you don't already know how new features make their way into the language, make sure to check out my history of JavaScript video.
It explains the purpose of Technical Committee 39 and how proposals make their way into the language as actual Scrchers.
You can see all the proposals on GitHub.
There are currently 8 finished proposals slated to be published in 2020, but many of them have already been shipped to the browser, Node.
Js, and TypeScript, so you can start using them today.
Let's take a look at a few of the big ones and see why they're awesome, and when you would want to use Dynamic imports, a function that allows you to lazily import a module at runtime.
In other words, your imports no longer have to be static at the top of the file.
You can load modules asynchronously from anywhere in your code.
This means you can delay the loading of non essential dependencies in your application to improve performance.
Notice in this code snippet how we're awaiting the loading of a module as a promise when the user clicks a button.
Next, we have optional chaining, which is the most popular new feature according to my extremely limited Twitter poll.
We call it the Elvis operator for obvious reasons.
If you've ever used Angular, it should look very familiar to you.
It makes it possible to call a deeply nested object property without throwing an error if its parent property is undefined.
If you've ever used the lodash Git function, this is a good replacement for it.
It's extremely useful if you're working with an API or database that returns a bunch of deeply nested objects, and you don't want your app to break at runtime if intermediate properties on those objects are undefined.
Next, we have a similar looking new feature called the nullish coalescing operator.
In many cases, you might want to set a default value for a property when it's undefined.
You can already do that in JavaScript using a logical or operator, but but it can be problematic if the defined value is a 0 or an empty string because JavaScript will coerce those values to falsy.
It's super annoying because then you have to do runtime type checking in your code.
In 2020, no more.
The double question mark is falsie only if it's null or undefined.
So the end result is more predictable code when setting default values.
JavaScript is also getting a new primitive data type, bigint.
It can represent numbers beyond JavaScript's max safe integer value, which is limited to 64 bits.
You can create a big int by adding an n to a regular integer, or you can use the big n constructor to make numbers that are completely massive.
But to be honest, it probably won't be needed by most developers, unless you're doing extremely precise time stamps or geometric calculations.
But it is a JavaScript primitive, so you should definitely know about it.
So that gives you a preview of things coming to JavaScript, but make sure to check out all the finished proposals on GitHub.
Let's switch gears to one of the biggest disruptions in the JavaScript world, TypeScript.
It first appeared on the 2016 Stack Overflow survey, being used by less than half of 1% of developers.
Fast forward 3 years, it's now a top ten language used by more than 20% of developers.
It's one of those rare technologies in the JS world that seems to be well loved by both front end and back end developers and across frameworks.
Now, you might have watched my prediction video last year.
My first prediction was that 2019 would be the year of Web Components.
At this point, I'd have to say that mostly has not been the case.
They did see more adoption in 2019, but not in any big spectacular way.
More importantly, they saw a lot of criticism and a lot of pushback.
But there are some really good tools out there dedicated to building web components, like Stencil and LitElement, which is another Google sponsored project that has been gaining a lot of steam lately.
Now let's talk about some front end frameworks, starting with the big underdog of 2019, Svelte.
It's been around for a few years, but in April 2019, version 3 was released.
It generated a ton of excitement because it's put together into a very elegant, easy to learn package, and it's highly performant with no runtime dependencies.
Its npm downloads have roughly tripled over the last year, and it's a great place to take refuge from the status quo.
Speaking of which, let's take a look at React, Angular, and Vue.
In In terms of adoption, React is by far the dominant force with more than twice as many downloads as Angular and Vue combined.
But downloads are just one piece of data in a bigger picture.
Let's also take a look at jobs on Stack Overflow.
We've got 850 openings for React, 388 for Angular, and 156 for Vue.
So we have a similar distribution with React as the clear leader.
Last year, the big new feature in React was hooks.
Today, we have another big experimental feature in React, concurrent mode.
It allows the framework to handle multiple state updates at the same time, and it opens the door for a new built in React component called Suspense.
Suspense will wait for asynchronous activity to finish in its children, such as an API call to a cloud database, or better yet, using the new dynamic imports feature to lazy load a React component at runtime.
That means you can handle loading states declaratively, and you don't need to manually toggle some kind of boolean value in your code.
Now moving on to the Angular world, the big new update is Ivy.
It's enabled by default in Angular 9, and it's an entirely new compiler for Angular.
But what's more exciting to me is that someone finally decided to build a static site generator for Angular.
By coincidence, they're expected to release an alpha version of it today, so we can see how it compares to Gatsby, VuePress, and so on.
Moving on to the view world, a big new feature is the composition API.
It's a set of tools aimed at providing better code reusability in complex Vue applications.
It does that by taking some of Vue's core capabilities like reactive state and exposing them as functions.
These smaller pieces can then be used to compose more complex components, and they're much easier to strongly type with TypeScript.
So frameworks are cool and all, but the web platform itself has some new features that fundamentally extend the types of applications that you can build on the web.
A huge one is the Web Authentication API or WebAuthn.
It gives the browser access to authenticate via hardware based authenticators, and that means your web app can do things like iometric auth.
And another one to keep an eye on is the Native File System API, which can give your web application access to the user's local files, something that web developers have wanted since the beginning of time.
It's currently available in Chrome with a flag, but other than that, it's not supported.
Another small but awesome feature is the new loading attribute for images and iframes.
There's a 1000000 different lazy loading JavaScript libraries out there, but now it's built into the browser natively with a simple HTML attribute.
Now speaking of browsers, there's a disruptive new browser out there called Brave.
I started using it a few weeks ago, and now I use it for almost 90% of my browsing both on mobile and desktop.
The CEO of the company is none other than Brendan Eich, the creator of JavaScript.
The browser feels almost just like Chrome, and you can install all the Chrome extensions that you know and love, but it feels faster because it's blocking ads and trackers by default.
JavaScript, of course, is not just for the browser.
We also have Node.
Js.
The most exciting new feature in Node has to be worker threads.
One of the biggest limitations of JavaScript that people like to point out is that it's single threaded.
That means you can't have 2 single processes running at the same time.
In 2020, that's no longer an issue because we now have the Worker Threads module, and it opens the door to use threads to execute JavaScript in parallel.
Another awesome feature that shipped to Node is support for ES modules.
In Node 13, you can use import and export statements instead of require.
One of the fastest growing back end tools for Node is nestjs.
It takes advantage of TypeScript to build server side applications that scale and that are very developer friendly.
Nestjs can also help you integrate another disruptive technology, GraphQL.
This This is a trend that has been ongoing for a couple years now, but GraphQL is just continuing to grow and grow.
When it comes to deploying your back end, you have a lot of different which you can see in my cloud computing 2020 video.
But as it turns out, many web applications in today's world don't need to build their own back end at all.
It can be far more productive to use something like AWS Amplify or Firebase, both of which are continuing to grow as well.
These tools provide everything you need to grow and scale a mobile application, allowing your team to focus almost entirely on building an awesome front end user experience.
But JavaScript isn't just for browsers and servers.
It's also for mobile applications.
The big one, of course, is React Native, and we also have Ionic and NativeScript.
They've all remained pretty much flat over the last year in terms of NPM downloads.
React Native has added some nice new improvements like fast refresh, and Ionic now supports React where they previously only supported Angular.
But all in all, not too much exciting to speak of in this space.
And that gives us a perfect segue into the JavaScript anti heroes.
The emerging technologies where you might place your bets other than JavaScript.
In June of 2019, Apple released Swift UI.
It provides a way to build declarative UIs similar to how you would with React, but with the Swift programming language.
So, it promises to greatly improve the iOS developer experience, but, again, it's only for iOS.
When it comes to building cross platform apps For iOS and Android, a big disruptive force is Flutter.
It uses the Dart programming language, which is very similar syntactically to JavaScript.
And in 2019, Dart was the fastest growing programming language and Flutter is one of the hottest open source projects on GitHub.
And it also now supports the web as a target in beta.
But in the long term, an even bigger disruption to the JavaScript ecosystem is WebAssembly.
Just a few days ago, WebAssembly became an Official 4th language on the web alongside JavaScript, HTML, and CSS.
Now, I don't want to come off as if WebAssembly is going to replace JavaScript.
In fact, that's not the case at all.
It's a compliment to JavaScript, allowing us to build an even greater variety of applications.
And more importantly, better Quality applications as good as any desktop app.
My favorite case study is Figma.
If we look closely at their product, we'll see they have a shell built with React.
Inside that shell, we have a high performance design tool powered by WebAssembly.
In fact, I used Figma to design the cover for this video.
Currently, languages like C, C plus plus and Rust can compile to WASM, and it's starting to emerge on even more languages like C.
Microsoft recently released a new framework called Blazor and, partially, through the magic of web assembly, it allows you to build web applications using C Sharp, HTML, and CSS.
And, in the future, I'd expect to see even more languages that can elegantly interop with JavaScript.
We've covered a lot in the last 10 minutes, but that's just a small sample of everything that's going on in the massive JavaScript world.
We have tools like Cypress that are changing the way we test our applications, tools like Gatsby that change the way we build our JavaScript apps, And we have tools like XState giving us new ways to think about state management.
I'm gonna go ahead and wrap things up there.
Thanks for watching and remember to always bet on JavaScript.

Speaker 0: Prediction is very difficult, especially if it's about the future, and even more so if it's about the future of JavaScript. As app developers, we'll be spending the rest of our lives in the future of JavaScript. So in today's video, we'll look at new features coming to the language, the current state of front end frameworks and new features they're releasing, as well as disruptive trends that could change everything in 2020. And if you're here because you hate JavaScript, make sure to stay tuned until the end, because we'll look at a few tools that you can use to build web apps without JavaScript. The future of JavaScript isn't what it used to be.

Make sure to like and subscribe, and let me know what you think about JavaScript in the comments below. One lucky comment will win this one of a kind t shirt. Let's start things off by taking a look at some of the newest features coming to a JavaScript near you in 2020. And if you don't already know how new features make their way into the language, make sure to check out my history of JavaScript video. It explains the purpose of Technical Committee 39 and how proposals make their way into the language as actual Scrchers.

You can see all the proposals on GitHub. There are currently 8 finished proposals slated to be published in 2020, but many of them have already been shipped to the browser, Node. Js, and TypeScript, so you can start using them today. Let's take a look at a few of the big ones and see why they're awesome, and when you would want to use Dynamic imports, a function that allows you to lazily import a module at runtime. In other words, your imports no longer have to be static at the top of the file.

You can load modules asynchronously from anywhere in your code. This means you can delay the loading of non essential dependencies in your application to improve performance. Notice in this code snippet how we're awaiting the loading of a module as a promise when the user clicks a button. Next, we have optional chaining, which is the most popular new feature according to my extremely limited Twitter poll. We call it the Elvis operator for obvious reasons.

If you've ever used Angular, it should look very familiar to you. It makes it possible to call a deeply nested object property without throwing an error if its parent property is undefined. If you've ever used the lodash Git function, this is a good replacement for it. It's extremely useful if you're working with an API or database that returns a bunch of deeply nested objects, and you don't want your app to break at runtime if intermediate properties on those objects are undefined. Next, we have a similar looking new feature called the nullish coalescing operator.

In many cases, you might want to set a default value for a property when it's undefined. You can already do that in JavaScript using a logical or operator, but but it can be problematic if the defined value is a 0 or an empty string because JavaScript will coerce those values to falsy. It's super annoying because then you have to do runtime type checking in your code. In 2020, no more. The double question mark is falsie only if it's null or undefined.

So the end result is more predictable code when setting default values. JavaScript is also getting a new primitive data type, bigint. It can represent numbers beyond JavaScript's max safe integer value, which is limited to 64 bits. You can create a big int by adding an n to a regular integer, or you can use the big n constructor to make numbers that are completely massive. But to be honest, it probably won't be needed by most developers, unless you're doing extremely precise time stamps or geometric calculations.

But it is a JavaScript primitive, so you should definitely know about it. So that gives you a preview of things coming to JavaScript, but make sure to check out all the finished proposals on GitHub. Let's switch gears to one of the biggest disruptions in the JavaScript world, TypeScript. It first appeared on the 2016 Stack Overflow survey, being used by less than half of 1% of developers. Fast forward 3 years, it's now a top ten language used by more than 20% of developers.

It's one of those rare technologies in the JS world that seems to be well loved by both front end and back end developers and across frameworks. Now, you might have watched my prediction video last year. My first prediction was that 2019 would be the year of Web Components. At this point, I'd have to say that mostly has not been the case. They did see more adoption in 2019, but not in any big spectacular way.

More importantly, they saw a lot of criticism and a lot of pushback. But there are some really good tools out there dedicated to building web components, like Stencil and LitElement, which is another Google sponsored project that has been gaining a lot of steam lately. Now let's talk about some front end frameworks, starting with the big underdog of 2019, Svelte. It's been around for a few years, but in April 2019, version 3 was released. It generated a ton of excitement because it's put together into a very elegant, easy to learn package, and it's highly performant with no runtime dependencies.

Its npm downloads have roughly tripled over the last year, and it's a great place to take refuge from the status quo. Speaking of which, let's take a look at React, Angular, and Vue. In In terms of adoption, React is by far the dominant force with more than twice as many downloads as Angular and Vue combined. But downloads are just one piece of data in a bigger picture. Let's also take a look at jobs on Stack Overflow.

We've got 850 openings for React, 388 for Angular, and 156 for Vue. So we have a similar distribution with React as the clear leader. Last year, the big new feature in React was hooks. Today, we have another big experimental feature in React, concurrent mode. It allows the framework to handle multiple state updates at the same time, and it opens the door for a new built in React component called Suspense.

Suspense will wait for asynchronous activity to finish in its children, such as an API call to a cloud database, or better yet, using the new dynamic imports feature to lazy load a React component at runtime. That means you can handle loading states declaratively, and you don't need to manually toggle some kind of boolean value in your code. Now moving on to the Angular world, the big new update is Ivy. It's enabled by default in Angular 9, and it's an entirely new compiler for Angular. But what's more exciting to me is that someone finally decided to build a static site generator for Angular.

By coincidence, they're expected to release an alpha version of it today, so we can see how it compares to Gatsby, VuePress, and so on. Moving on to the view world, a big new feature is the composition API. It's a set of tools aimed at providing better code reusability in complex Vue applications. It does that by taking some of Vue's core capabilities like reactive state and exposing them as functions. These smaller pieces can then be used to compose more complex components, and they're much easier to strongly type with TypeScript.

So frameworks are cool and all, but the web platform itself has some new features that fundamentally extend the types of applications that you can build on the web. A huge one is the Web Authentication API or WebAuthn. It gives the browser access to authenticate via hardware based authenticators, and that means your web app can do things like iometric auth. And another one to keep an eye on is the Native File System API, which can give your web application access to the user's local files, something that web developers have wanted since the beginning of time. It's currently available in Chrome with a flag, but other than that, it's not supported.

Another small but awesome feature is the new loading attribute for images and iframes. There's a 1000000 different lazy loading JavaScript libraries out there, but now it's built into the browser natively with a simple HTML attribute. Now speaking of browsers, there's a disruptive new browser out there called Brave. I started using it a few weeks ago, and now I use it for almost 90% of my browsing both on mobile and desktop. The CEO of the company is none other than Brendan Eich, the creator of JavaScript.

The browser feels almost just like Chrome, and you can install all the Chrome extensions that you know and love, but it feels faster because it's blocking ads and trackers by default. JavaScript, of course, is not just for the browser. We also have Node. Js. The most exciting new feature in Node has to be worker threads.

One of the biggest limitations of JavaScript that people like to point out is that it's single threaded. That means you can't have 2 single processes running at the same time. In 2020, that's no longer an issue because we now have the Worker Threads module, and it opens the door to use threads to execute JavaScript in parallel. Another awesome feature that shipped to Node is support for ES modules. In Node 13, you can use import and export statements instead of require.

One of the fastest growing back end tools for Node is nestjs. It takes advantage of TypeScript to build server side applications that scale and that are very developer friendly. Nestjs can also help you integrate another disruptive technology, GraphQL. This This is a trend that has been ongoing for a couple years now, but GraphQL is just continuing to grow and grow. When it comes to deploying your back end, you have a lot of different which you can see in my cloud computing 2020 video.

But as it turns out, many web applications in today's world don't need to build their own back end at all. It can be far more productive to use something like AWS Amplify or Firebase, both of which are continuing to grow as well. These tools provide everything you need to grow and scale a mobile application, allowing your team to focus almost entirely on building an awesome front end user experience. But JavaScript isn't just for browsers and servers. It's also for mobile applications.

The big one, of course, is React Native, and we also have Ionic and NativeScript. They've all remained pretty much flat over the last year in terms of NPM downloads. React Native has added some nice new improvements like fast refresh, and Ionic now supports React where they previously only supported Angular. But all in all, not too much exciting to speak of in this space. And that gives us a perfect segue into the JavaScript anti heroes.

The emerging technologies where you might place your bets other than JavaScript. In June of 2019, Apple released Swift UI. It provides a way to build declarative UIs similar to how you would with React, but with the Swift programming language. So, it promises to greatly improve the iOS developer experience, but, again, it's only for iOS. When it comes to building cross platform apps For iOS and Android, a big disruptive force is Flutter.

It uses the Dart programming language, which is very similar syntactically to JavaScript. And in 2019, Dart was the fastest growing programming language and Flutter is one of the hottest open source projects on GitHub. And it also now supports the web as a target in beta. But in the long term, an even bigger disruption to the JavaScript ecosystem is WebAssembly. Just a few days ago, WebAssembly became an Official 4th language on the web alongside JavaScript, HTML, and CSS.

Now, I don't want to come off as if WebAssembly is going to replace JavaScript. In fact, that's not the case at all. It's a compliment to JavaScript, allowing us to build an even greater variety of applications. And more importantly, better Quality applications as good as any desktop app. My favorite case study is Figma.

If we look closely at their product, we'll see they have a shell built with React. Inside that shell, we have a high performance design tool powered by WebAssembly. In fact, I used Figma to design the cover for this video. Currently, languages like C, C plus plus and Rust can compile to WASM, and it's starting to emerge on even more languages like C. Microsoft recently released a new framework called Blazor and, partially, through the magic of web assembly, it allows you to build web applications using C Sharp, HTML, and CSS.

And, in the future, I'd expect to see even more languages that can elegantly interop with JavaScript. We've covered a lot in the last 10 minutes, but that's just a small sample of everything that's going on in the massive JavaScript world. We have tools like Cypress that are changing the way we test our applications, tools like Gatsby that change the way we build our JavaScript apps, And we have tools like XState giving us new ways to think about state management. I'm gonna go ahead and wrap things up there. Thanks for watching and remember to always bet on JavaScript.
Prediction is very difficult, especially if it's about the future, and even more so if it's about the future of JavaScript. As app developers, we'll be spending the rest of our lives in the future of JavaScript. So in today's video, we'll look at new features coming to the language, the current state of front end frameworks and new features they're releasing, as well as disruptive trends that could change everything in 2020. And if you're here because you hate JavaScript, make sure to stay tuned until the end, because we'll look at a few tools that you can use to build web apps without JavaScript. The future of JavaScript isn't what it used to be. Make sure to like and subscribe, and let me know what you think about JavaScript in the comments below. One lucky comment will win this one of a kind t shirt. Let's start things off by taking a look at some of the newest features coming to a JavaScript near you in 2020. And if you don't already know how new features make their way into the language, make sure to check out my history of JavaScript video. It explains the purpose of Technical Committee 39 and how proposals make their way into the language as actual Scrchers. You can see all the proposals on GitHub.
There are currently 8 finished proposals slated to be published in 2020, but many of them have already been shipped to the browser, Node. Js, and TypeScript, so you can start using them today. Let's take a look at a few of the big ones and see why they're awesome, and when you would want to use Dynamic imports, a function that allows you to lazily import a module at runtime. In other words, your imports no longer have to be static at the top of the file.
shipping
software development
You can load modules asynchronously from anywhere in your code. This means you can delay the loading of non essential dependencies in your application to improve performance. Notice in this code snippet how we're awaiting the loading of a module as a promise when the user clicks a button. Next, we have optional chaining, which is the most popular new feature according to my extremely limited Twitter poll. We call it the Elvis operator for obvious reasons. If you've ever used Angular, it should look very familiar to you. It makes it possible to call a deeply nested object property without throwing an error if its parent property is undefined. If you've ever used the lodash Git function, this is a good replacement for it. It's extremely useful if you're working with an API or database that returns a bunch of deeply nested objects, and you don't want your app to break at runtime if intermediate properties on those objects are undefined. Next, we have a similar looking new feature called the nullish coalescing operator. In many cases, you might want to set a default value for a property when it's undefined. You can already do that in JavaScript using a logical or operator, but but it can be problematic if the defined value is a 0 or an empty string because JavaScript will coerce those values to falsy. It's super annoying because then you have to do runtime type checking in your code. In 2020, no more. The double question mark is falsie only if it's null or undefined. So the end result is more predictable code when setting default values. JavaScript is also getting a new primitive data type, bigint. It can represent numbers beyond JavaScript's max safe integer value, which is limited to 64 bits. You can create a big int by adding an n to a regular integer, or you can use the big n constructor to make numbers that are completely massive. But to be honest, it probably won't be needed by most developers, unless you're doing extremely precise time stamps or geometric calculations. But it is a JavaScript primitive, so you should definitely know about it. So that gives you a preview of things coming to JavaScript, but make sure to check out all the finished proposals on GitHub. Let's switch gears to one of the biggest disruptions in the JavaScript world, TypeScript. It first appeared on the 2016 Stack Overflow survey, being used by less than half of 1% of developers. Fast forward 3 years, it's now a top ten language used by more than 20% of developers. It's one of those rare technologies in the JS world that seems to be well loved by both front end and back end developers and across frameworks. Now, you might have watched my prediction video last year. My first prediction was that 2019 would be the year of Web Components. At this point, I'd have to say that mostly has not been the case.
They did see more adoption in 2019, but not in any big spectacular way. More importantly, they saw a lot of criticism and a lot of pushback. But there are some really good tools out there dedicated to building web components, like Stencil and LitElement, which is another Google sponsored project that has been gaining a lot of steam lately. Now let's talk about some front end frameworks, starting with the big underdog of 2019, Svelte. It's been around for a few years, but in April 2019, version 3 was released. It generated a ton of excitement because it's put together into a very elegant, easy to learn package, and it's highly performant with no runtime dependencies. Its npm downloads have roughly tripled over the last year, and it's a great place to take refuge from the status quo. Speaking of which, let's take a look at React, Angular, and Vue.
software
google
software development
covid-19
intellectual property
technology
graphic design
In In terms of adoption, React is by far the dominant force with more than twice as many downloads as Angular and Vue combined. But downloads are just one piece of data in a bigger picture. Let's also take a look at jobs on Stack Overflow. We've got 850 openings for React, 388 for Angular, and 156 for Vue. So we have a similar distribution with React as the clear leader. Last year, the big new feature in React was hooks. Today, we have another big experimental feature in React, concurrent mode. It allows the framework to handle multiple state updates at the same time, and it opens the door for a new built in React component called Suspense. Suspense will wait for asynchronous activity to finish in its children, such as an API call to a cloud database, or better yet, using the new dynamic imports feature to lazy load a React component at runtime. That means you can handle loading states declaratively, and you don't need to manually toggle some kind of boolean value in your code. Now moving on to the Angular world, the big new update is Ivy. It's enabled by default in Angular 9, and it's an entirely new compiler for Angular. But what's more exciting to me is that someone finally decided to build a static site generator for Angular.
By coincidence, they're expected to release an alpha version of it today, so we can see how it compares to Gatsby, VuePress, and so on. Moving on to the view world, a big new feature is the composition API. It's a set of tools aimed at providing better code reusability in complex Vue applications. It does that by taking some of Vue's core capabilities like reactive state and exposing them as functions. These smaller pieces can then be used to compose more complex components, and they're much easier to strongly type with TypeScript. So frameworks are cool and all, but the web platform itself has some new features that fundamentally extend the types of applications that you can build on the web. A huge one is the Web Authentication API or WebAuthn. It gives the browser access to authenticate via hardware based authenticators, and that means your web app can do things like iometric auth. And another one to keep an eye on is the Native File System API, which can give your web application access to the user's local files, something that web developers have wanted since the beginning of time. It's currently available in Chrome with a flag, but other than that, it's not supported.
internet
visualization
networking
software development
security
software
Another small but awesome feature is the new loading attribute for images and iframes. There's a 1000000 different lazy loading JavaScript libraries out there, but now it's built into the browser natively with a simple HTML attribute. Now speaking of browsers, there's a disruptive new browser out there called Brave. I started using it a few weeks ago, and now I use it for almost 90% of my browsing both on mobile and desktop. The CEO of the company is none other than Brendan Eich, the creator of JavaScript. The browser feels almost just like Chrome, and you can install all the Chrome extensions that you know and love, but it feels faster because it's blocking ads and trackers by default. JavaScript, of course, is not just for the browser. We also have Node. Js. The most exciting new feature in Node has to be worker threads. One of the biggest limitations of JavaScript that people like to point out is that it's single threaded. That means you can't have 2 single processes running at the same time. In 2020, that's no longer an issue because we now have the Worker Threads module, and it opens the door to use threads to execute JavaScript in parallel. Another awesome feature that shipped to Node is support for ES modules. In Node 13, you can use import and export statements instead of require. One of the fastest growing back end tools for Node is nestjs. It takes advantage of TypeScript to build server side applications that scale and that are very developer friendly. Nestjs can also help you integrate another disruptive technology, GraphQL. This This is a trend that has been ongoing for a couple years now, but GraphQL is just continuing to grow and grow. When it comes to deploying your back end, you have a lot of different which you can see in my cloud computing 2020 video. But as it turns out, many web applications in today's world don't need to build their own back end at all.
It can be far more productive to use something like AWS Amplify or Firebase, both of which are continuing to grow as well. These tools provide everything you need to grow and scale a mobile application, allowing your team to focus almost entirely on building an awesome front end user experience.
technology
software development
software
But JavaScript isn't just for browsers and servers. It's also for mobile applications. The big one, of course, is React Native, and we also have Ionic and NativeScript. They've all remained pretty much flat over the last year in terms of NPM downloads. React Native has added some nice new improvements like fast refresh, and Ionic now supports React where they previously only supported Angular.
But all in all, not too much exciting to speak of in this space. And that gives us a perfect segue into the JavaScript anti heroes. The emerging technologies where you might place your bets other than JavaScript. In June of 2019, Apple released Swift UI. It provides a way to build declarative UIs similar to how you would with React, but with the Swift programming language. So, it promises to greatly improve the iOS developer experience, but, again, it's only for iOS. When it comes to building cross platform apps For iOS and Android, a big disruptive force is Flutter. It uses the Dart programming language, which is very similar syntactically to JavaScript. And in 2019, Dart was the fastest growing programming language and Flutter is one of the hottest open source projects on GitHub.
apple
animation
And it also now supports the web as a target in beta. But in the long term, an even bigger disruption to the JavaScript ecosystem is WebAssembly. Just a few days ago, WebAssembly became an Official 4th language on the web alongside JavaScript, HTML, and CSS. Now, I don't want to come off as if WebAssembly is going to replace JavaScript.
internet
In fact, that's not the case at all. It's a compliment to JavaScript, allowing us to build an even greater variety of applications. And more importantly, better Quality applications as good as any desktop app. My favorite case study is Figma. If we look closely at their product, we'll see they have a shell built with React. Inside that shell, we have a high performance design tool powered by WebAssembly. In fact, I used Figma to design the cover for this video. Currently, languages like C, C plus plus and Rust can compile to WASM, and it's starting to emerge on even more languages like C. Microsoft recently released a new framework called Blazor and, partially, through the magic of web assembly, it allows you to build web applications using C Sharp, HTML, and CSS.
software
software development
visualization
computer science
programming
graphic design
And, in the future, I'd expect to see even more languages that can elegantly interop with JavaScript. We've covered a lot in the last 10 minutes, but that's just a small sample of everything that's going on in the massive JavaScript world.
We have tools like Cypress that are changing the way we test our applications, tools like Gatsby that change the way we build our JavaScript apps, And we have tools like XState giving us new ways to think about state management. I'm gonna go ahead and wrap things up there.
software
software development
Thanks for watching and remember to always bet on JavaScript.
Prediction is very difficult, especially if it's about the future, and even more so if it's about the future of JavaScript. As app developers, we'll be spending the rest of our lives in the future of JavaScript. So in today's video, we'll look at new features coming to the language, the current state of front end frameworks and new features they're releasing, as well as disruptive trends that could change everything in 2020. And if you're here because you hate JavaScript, make sure to stay tuned until the end, because we'll look at a few tools that you can use to build web apps without JavaScript. The future of JavaScript isn't what it used to be. Make sure to like and subscribe, and let me know what you think about JavaScript in the comments below. One lucky comment will win this one of a kind t shirt. Let's start things off by taking a look at some of the newest features coming to a JavaScript near you in 2020. And if you don't already know how new features make their way into the language, make sure to check out my history of JavaScript video. It explains the purpose of Technical Committee 39 and how proposals make their way into the language as actual Scrchers. You can see all the proposals on GitHub. There are currently 8 finished proposals slated to be published in 2020, but many of them have already been shipped to the browser, Node. Js, and TypeScript, so you can start using them today. Let's take a look at a few of the big ones and see why they're awesome, and when you would want to use Dynamic imports, a function that allows you to lazily import a module at runtime. In other words, your imports no longer have to be static at the top of the file. You can load modules asynchronously from anywhere in your code. This means you can delay the loading of non essential dependencies in your application to improve performance. Notice in this code snippet how we're awaiting the loading of a module as a promise when the user clicks a button. Next, we have optional chaining, which is the most popular new feature according to my extremely limited Twitter poll. We call it the Elvis operator for obvious reasons. If you've ever used Angular, it should look very familiar to you. It makes it possible to call a deeply nested object property without throwing an error if its parent property is undefined. If you've ever used the lodash Git function, this is a good replacement for it. It's extremely useful if you're working with an API or database that returns a bunch of deeply nested objects, and you don't want your app to break at runtime if intermediate properties on those objects are undefined. Next, we have a similar looking new feature called the nullish coalescing operator. In many cases, you might want to set a default value for a property when it's undefined. You can already do that in JavaScript using a logical or operator, but but it can be problematic if the defined value is a 0 or an empty string because JavaScript will coerce those values to falsy. It's super annoying because then you have to do runtime type checking in your code. In 2020, no more. The double question mark is falsie only if it's null or undefined. So the end result is more predictable code when setting default values. JavaScript is also getting a new primitive data type, bigint. It can represent numbers beyond JavaScript's max safe integer value, which is limited to 64 bits. You can create a big int by adding an n to a regular integer, or you can use the big n constructor to make numbers that are completely massive. But to be honest, it probably won't be needed by most developers, unless you're doing extremely precise time stamps or geometric calculations. But it is a JavaScript primitive, so you should definitely know about it. So that gives you a preview of things coming to JavaScript, but make sure to check out all the finished proposals on GitHub. Let's switch gears to one of the biggest disruptions in the JavaScript world, TypeScript. It first appeared on the 2016 Stack Overflow survey, being used by less than half of 1% of developers. Fast forward 3 years, it's now a top ten language used by more than 20% of developers. It's one of those rare technologies in the JS world that seems to be well loved by both front end and back end developers and across frameworks. Now, you might have watched my prediction video last year. My first prediction was that 2019 would be the year of Web Components. At this point, I'd have to say that mostly has not been the case. They did see more adoption in 2019, but not in any big spectacular way. More importantly, they saw a lot of criticism and a lot of pushback. But there are some really good tools out there dedicated to building web components, like Stencil and LitElement, which is another Google sponsored project that has been gaining a lot of steam lately. Now let's talk about some front end frameworks, starting with the big underdog of 2019, Svelte. It's been around for a few years, but in April 2019, version 3 was released. It generated a ton of excitement because it's put together into a very elegant, easy to learn package, and it's highly performant with no runtime dependencies. Its npm downloads have roughly tripled over the last year, and it's a great place to take refuge from the status quo. Speaking of which, let's take a look at React, Angular, and Vue. In In terms of adoption, React is by far the dominant force with more than twice as many downloads as Angular and Vue combined. But downloads are just one piece of data in a bigger picture. Let's also take a look at jobs on Stack Overflow. We've got 850 openings for React, 388 for Angular, and 156 for Vue. So we have a similar distribution with React as the clear leader. Last year, the big new feature in React was hooks. Today, we have another big experimental feature in React, concurrent mode. It allows the framework to handle multiple state updates at the same time, and it opens the door for a new built in React component called Suspense. Suspense will wait for asynchronous activity to finish in its children, such as an API call to a cloud database, or better yet, using the new dynamic imports feature to lazy load a React component at runtime. That means you can handle loading states declaratively, and you don't need to manually toggle some kind of boolean value in your code. Now moving on to the Angular world, the big new update is Ivy. It's enabled by default in Angular 9, and it's an entirely new compiler for Angular. But what's more exciting to me is that someone finally decided to build a static site generator for Angular. By coincidence, they're expected to release an alpha version of it today, so we can see how it compares to Gatsby, VuePress, and so on. Moving on to the view world, a big new feature is the composition API. It's a set of tools aimed at providing better code reusability in complex Vue applications. It does that by taking some of Vue's core capabilities like reactive state and exposing them as functions. These smaller pieces can then be used to compose more complex components, and they're much easier to strongly type with TypeScript. So frameworks are cool and all, but the web platform itself has some new features that fundamentally extend the types of applications that you can build on the web. A huge one is the Web Authentication API or WebAuthn. It gives the browser access to authenticate via hardware based authenticators, and that means your web app can do things like iometric auth. And another one to keep an eye on is the Native File System API, which can give your web application access to the user's local files, something that web developers have wanted since the beginning of time. It's currently available in Chrome with a flag, but other than that, it's not supported. Another small but awesome feature is the new loading attribute for images and iframes. There's a 1000000 different lazy loading JavaScript libraries out there, but now it's built into the browser natively with a simple HTML attribute. Now speaking of browsers, there's a disruptive new browser out there called Brave. I started using it a few weeks ago, and now I use it for almost 90% of my browsing both on mobile and desktop. The CEO of the company is none other than Brendan Eich, the creator of JavaScript. The browser feels almost just like Chrome, and you can install all the Chrome extensions that you know and love, but it feels faster because it's blocking ads and trackers by default. JavaScript, of course, is not just for the browser. We also have Node. Js. The most exciting new feature in Node has to be worker threads. One of the biggest limitations of JavaScript that people like to point out is that it's single threaded. That means you can't have 2 single processes running at the same time. In 2020, that's no longer an issue because we now have the Worker Threads module, and it opens the door to use threads to execute JavaScript in parallel. Another awesome feature that shipped to Node is support for ES modules. In Node 13, you can use import and export statements instead of require. One of the fastest growing back end tools for Node is nestjs. It takes advantage of TypeScript to build server side applications that scale and that are very developer friendly. Nestjs can also help you integrate another disruptive technology, GraphQL. This This is a trend that has been ongoing for a couple years now, but GraphQL is just continuing to grow and grow. When it comes to deploying your back end, you have a lot of different which you can see in my cloud computing 2020 video. But as it turns out, many web applications in today's world don't need to build their own back end at all. It can be far more productive to use something like AWS Amplify or Firebase, both of which are continuing to grow as well. These tools provide everything you need to grow and scale a mobile application, allowing your team to focus almost entirely on building an awesome front end user experience. But JavaScript isn't just for browsers and servers. It's also for mobile applications. The big one, of course, is React Native, and we also have Ionic and NativeScript. They've all remained pretty much flat over the last year in terms of NPM downloads. React Native has added some nice new improvements like fast refresh, and Ionic now supports React where they previously only supported Angular. But all in all, not too much exciting to speak of in this space. And that gives us a perfect segue into the JavaScript anti heroes. The emerging technologies where you might place your bets other than JavaScript. In June of 2019, Apple released Swift UI. It provides a way to build declarative UIs similar to how you would with React, but with the Swift programming language. So, it promises to greatly improve the iOS developer experience, but, again, it's only for iOS. When it comes to building cross platform apps For iOS and Android, a big disruptive force is Flutter. It uses the Dart programming language, which is very similar syntactically to JavaScript. And in 2019, Dart was the fastest growing programming language and Flutter is one of the hottest open source projects on GitHub. And it also now supports the web as a target in beta. But in the long term, an even bigger disruption to the JavaScript ecosystem is WebAssembly. Just a few days ago, WebAssembly became an Official 4th language on the web alongside JavaScript, HTML, and CSS. Now, I don't want to come off as if WebAssembly is going to replace JavaScript. In fact, that's not the case at all. It's a compliment to JavaScript, allowing us to build an even greater variety of applications. And more importantly, better Quality applications as good as any desktop app. My favorite case study is Figma. If we look closely at their product, we'll see they have a shell built with React. Inside that shell, we have a high performance design tool powered by WebAssembly. In fact, I used Figma to design the cover for this video. Currently, languages like C, C plus plus and Rust can compile to WASM, and it's starting to emerge on even more languages like C. Microsoft recently released a new framework called Blazor and, partially, through the magic of web assembly, it allows you to build web applications using C Sharp, HTML, and CSS. And, in the future, I'd expect to see even more languages that can elegantly interop with JavaScript. We've covered a lot in the last 10 minutes, but that's just a small sample of everything that's going on in the massive JavaScript world. We have tools like Cypress that are changing the way we test our applications, tools like Gatsby that change the way we build our JavaScript apps, And we have tools like XState giving us new ways to think about state management. I'm gonna go ahead and wrap things up there. Thanks for watching and remember to always bet on JavaScript.
Prediction
prediction
is
is
very
very
difficult,
difficult
especially
especially
if
if
it's
it's
about
about
the
the
future,
future
and
and
even
even
more
more
so
so
if
if
it's
it's
about
about
the
the
future
future
of
of
JavaScript.
javascript
As
as
app
app
developers,
developers
we'll
we'll
be
be
spending
spending
the
the
rest
rest
of
of
our
our
lives
lives
in
in
the
the
future
future
of
of
JavaScript.
javascript
So
so
in
in
today's
today's
video,
video
we'll
we'll
look
look
at
at
new
new
features
features
coming
coming
to
to
the
the
language,
language
the
the
current
current
state
state
of
of
front
front
end
end
frameworks
frameworks
and
and
new
new
features
features
they're
they're
releasing,
releasing
as
as
well
well
as
as
disruptive
disruptive
trends
trends
that
that
could
could
change
change
everything
everything
in
in
2020.
2020
And
and
if
if
you're
you're
here
here
because
because
you
you
hate
hate
JavaScript,
javascript
make
make
sure
sure
to
to
stay
stay
tuned
tuned
until
until
the
the
end,
end
because
because
we'll
we'll
look
look
at
at
a
a
few
few
tools
tools
that
that
you
you
can
can
use
use
to
to
build
build
web
web
apps
apps
without
without
JavaScript.
javascript
The
the
future
future
of
of
JavaScript
javascript
isn't
isn't
what
what
it
it
used
used
to
to
be.
be
Make
make
sure
sure
to
to
like
like
and
and
subscribe,
subscribe
and
and
let
let
me
me
know
know
what
what
you
you
think
think
about
about
JavaScript
javascript
in
in
the
the
comments
comments
below.
below
One
one
lucky
lucky
comment
comment
will
will
win
win
this
this
one
one
of
of
a
a
kind
kind
t
t
shirt.
shirt
Let's
let's
start
start
things
things
off
off
by
by
taking
taking
a
a
look
look
at
at
some
some
of
of
the
the
newest
newest
features
features
coming
coming
to
to
a
a
JavaScript
javascript
near
near
you
you
in
in
2020.
2020
And
and
if
if
you
you
don't
don't
already
already
know
know
how
how
new
new
features
features
make
make
their
their
way
way
into
into
the
the
language,
language
make
make
sure
sure
to
to
check
check
out
out
my
my
history
history
of
of
JavaScript
javascript
video.
video
It
it
explains
explains
the
the
purpose
purpose
of
of
Technical
technical
Committee
committee
39
39
and
and
how
how
proposals
proposals
make
make
their
their
way
way
into
into
the
the
language
language
as
as
actual
actual
Scrchers.
scrchers
You
you
can
can
see
see
all
all
the
the
proposals
proposals
on
on
GitHub.
github
There
there
are
are
currently
currently
8
8
finished
finished
proposals
proposals
slated
slated
to
to
be
be
published
published
in
in
2020,
2020
but
but
many
many
of
of
them
them
have
have
already
already
been
been
shipped
shipped
to
to
the
the
browser,
browser
Node.
node
Js,
js
and
and
TypeScript,
typescript
so
so
you
you
can
can
start
start
using
using
them
them
today.
today
Let's
let's
take
take
a
a
look
look
at
at
a
a
few
few
of
of
the
the
big
big
ones
ones
and
and
see
see
why
why
they're
they're
awesome,
awesome
and
and
when
when
you
you
would
would
want
want
to
to
use
use
Dynamic
dynamic
imports,
imports
a
a
function
function
that
that
allows
allows
you
you
to
to
lazily
lazily
import
import
a
a
module
module
at
at
runtime.
runtime
In
in
other
other
words,
words
your
your
imports
imports
no
no
longer
longer
have
have
to
to
be
be
static
static
at
at
the
the
top
top
of
of
the
the
file.
file
You
you
can
can
load
load
modules
modules
asynchronously
asynchronously
from
from
anywhere
anywhere
in
in
your
your
code.
code
This
this
means
means
you
you
can
can
delay
delay
the
the
loading
loading
of
of
non
non
essential
essential
dependencies
dependencies
in
in
your
your
application
application
to
to
improve
improve
performance.
performance
Notice
notice
in
in
this
this
code
code
snippet
snippet
how
how
we're
we're
awaiting
awaiting
the
the
loading
loading
of
of
a
a
module
module
as
as
a
a
promise
promise
when
when
the
the
user
user
clicks
clicks
a
a
button.
button
Next,
next
we
we
have
have
optional
optional
chaining,
chaining
which
which
is
is
the
the
most
most
popular
popular
new
new
feature
feature
according
according
to
to
my
my
extremely
extremely
limited
limited
Twitter
twitter
poll.
poll
We
we
call
call
it
it
the
the
Elvis
elvis
operator
operator
for
for
obvious
obvious
reasons.
reasons
If
if
you've
you've
ever
ever
used
used
Angular,
angular
it
it
should
should
look
look
very
very
familiar
familiar
to
to
you.
you
It
it
makes
makes
it
it
possible
possible
to
to
call
call
a
a
deeply
deeply
nested
nested
object
object
property
property
without
without
throwing
throwing
an
an
error
error
if
if
its
its
parent
parent
property
property
is
is
undefined.
undefined
If
if
you've
you've
ever
ever
used
used
the
the
lodash
lodash
Git
git
function,
function
this
this
is
is
a
a
good
good
replacement
replacement
for
for
it.
it
It's
it's
extremely
extremely
useful
useful
if
if
you're
you're
working
working
with
with
an
an
API
api
or
or
database
database
that
that
returns
returns
a
a
bunch
bunch
of
of
deeply
deeply
nested
nested
objects,
objects
and
and
you
you
don't
don't
want
want
your
your
app
app
to
to
break
break
at
at
runtime
runtime
if
if
intermediate
intermediate
properties
properties
on
on
those
those
objects
objects
are
are
undefined.
undefined
Next,
next
we
we
have
have
a
a
similar
similar
looking
looking
new
new
feature
feature
called
called
the
the
nullish
nullish
coalescing
coalescing
operator.
operator
In
in
many
many
cases,
cases
you
you
might
might
want
want
to
to
set
set
a
a
default
default
value
value
for
for
a
a
property
property
when
when
it's
it's
undefined.
undefined
You
you
can
can
already
already
do
do
that
that
in
in
JavaScript
javascript
using
using
a
a
logical
logical
or
or
operator,
operator
but
but
but
but
it
it
can
can
be
be
problematic
problematic
if
if
the
the
defined
defined
value
value
is
is
a
a
0
0
or
or
an
an
empty
empty
string
string
because
because
JavaScript
javascript
will
will
coerce
coerce
those
those
values
values
to
to
falsy.
falsy
It's
it's
super
super
annoying
annoying
because
because
then
then
you
you
have
have
to
to
do
do
runtime
runtime
type
type
checking
checking
in
in
your
your
code.
code
In
in
2020,
2020
no
no
more.
more
The
the
double
double
question
question
mark
mark
is
is
falsie
falsie
only
only
if
if
it's
it's
null
null
or
or
undefined.
undefined
So
so
the
the
end
end
result
result
is
is
more
more
predictable
predictable
code
code
when
when
setting
setting
default
default
values.
values
JavaScript
javascript
is
is
also
also
getting
getting
a
a
new
new
primitive
primitive
data
data
type,
type
bigint.
bigint
It
it
can
can
represent
represent
numbers
numbers
beyond
beyond
JavaScript's
javascript's
max
max
safe
safe
integer
integer
value,
value
which
which
is
is
limited
limited
to
to
64
64
bits.
bits
You
you
can
can
create
create
a
a
big
big
int
int
by
by
adding
adding
an
an
n
n
to
to
a
a
regular
regular
integer,
integer
or
or
you
you
can
can
use
use
the
the
big
big
n
n
constructor
constructor
to
to
make
make
numbers
numbers
that
that
are
are
completely
completely
massive.
massive
But
but
to
to
be
be
honest,
honest
it
it
probably
probably
won't
won't
be
be
needed
needed
by
by
most
most
developers,
developers
unless
unless
you're
you're
doing
doing
extremely
extremely
precise
precise
time
time
stamps
stamps
or
or
geometric
geometric
calculations.
calculations
But
but
it
it
is
is
a
a
JavaScript
javascript
primitive,
primitive
so
so
you
you
should
should
definitely
definitely
know
know
about
about
it.
it
So
so
that
that
gives
gives
you
you
a
a
preview
preview
of
of
things
things
coming
coming
to
to
JavaScript,
javascript
but
but
make
make
sure
sure
to
to
check
check
out
out
all
all
the
the
finished
finished
proposals
proposals
on
on
GitHub.
github
Let's
let's
switch
switch
gears
gears
to
to
one
one
of
of
the
the
biggest
biggest
disruptions
disruptions
in
in
the
the
JavaScript
javascript
world,
world
TypeScript.
typescript
It
it
first
first
appeared
appeared
on
on
the
the
2016
2016
Stack
stack
Overflow
overflow
survey,
survey
being
being
used
used
by
by
less
less
than
than
half
half
of
of
1%
1%
of
of
developers.
developers
Fast
fast
forward
forward
3
3
years,
years
it's
it's
now
now
a
a
top
top
ten
ten
language
language
used
used
by
by
more
more
than
than
20%
20%
of
of
developers.
developers
It's
it's
one
one
of
of
those
those
rare
rare
technologies
technologies
in
in
the
the
JS
js
world
world
that
that
seems
seems
to
to
be
be
well
well
loved
loved
by
by
both
both
front
front
end
end
and
and
back
back
end
end
developers
developers
and
and
across
across
frameworks.
frameworks
Now,
now
you
you
might
might
have
have
watched
watched
my
my
prediction
prediction
video
video
last
last
year.
year
My
my
first
first
prediction
prediction
was
was
that
that
2019
2019
would
would
be
be
the
the
year
year
of
of
Web
web
Components.
components
At
at
this
this
point,
point
I'd
i'd
have
have
to
to
say
say
that
that
mostly
mostly
has
has
not
not
been
been
the
the
case.
case
They
they
did
did
see
see
more
more
adoption
adoption
in
in
2019,
2019
but
but
not
not
in
in
any
any
big
big
spectacular
spectacular
way.
way
More
more
importantly,
importantly
they
they
saw
saw
a
a
lot
lot
of
of
criticism
criticism
and
and
a
a
lot
lot
of
of
pushback.
pushback
But
but
there
there
are
are
some
some
really
really
good
good
tools
tools
out
out
there
there
dedicated
dedicated
to
to
building
building
web
web
components,
components
like
like
Stencil
stencil
and
and
LitElement,
litelement
which
which
is
is
another
another
Google
google
sponsored
sponsored
project
project
that
that
has
has
been
been
gaining
gaining
a
a
lot
lot
of
of
steam
steam
lately.
lately
Now
now
let's
let's
talk
talk
about
about
some
some
front
front
end
end
frameworks,
frameworks
starting
starting
with
with
the
the
big
big
underdog
underdog
of
of
2019,
2019
Svelte.
svelte
It's
it's
been
been
around
around
for
for
a
a
few
few
years,
years
but
but
in
in
April
april
2019,
2019
version
version
3
3
was
was
released.
released
It
it
generated
generated
a
a
ton
ton
of
of
excitement
excitement
because
because
it's
it's
put
put
together
together
into
into
a
a
very
very
elegant,
elegant
easy
easy
to
to
learn
learn
package,
package
and
and
it's
it's
highly
highly
performant
performant
with
with
no
no
runtime
runtime
dependencies.
dependencies
Its
its
npm
npm
downloads
downloads
have
have
roughly
roughly
tripled
tripled
over
over
the
the
last
last
year,
year
and
and
it's
it's
a
a
great
great
place
place
to
to
take
take
refuge
refuge
from
from
the
the
status
status
quo.
quo
Speaking
speaking
of
of
which,
which
let's
let's
take
take
a
a
look
look
at
at
React,
react
Angular,
angular
and
and
Vue.
vue
In
in
In
in
terms
terms
of
of
adoption,
adoption
React
react
is
is
by
by
far
far
the
the
dominant
dominant
force
force
with
with
more
more
than
than
twice
twice
as
as
many
many
downloads
downloads
as
as
Angular
angular
and
and
Vue
vue
combined.
combined
But
but
downloads
downloads
are
are
just
just
one
one
piece
piece
of
of
data
data
in
in
a
a
bigger
bigger
picture.
picture
Let's
let's
also
also
take
take
a
a
look
look
at
at
jobs
jobs
on
on
Stack
stack
Overflow.
overflow
We've
we've
got
got
850
850
openings
openings
for
for
React,
react
388
388
for
for
Angular,
angular
and
and
156
156
for
for
Vue.
vue
So
so
we
we
have
have
a
a
similar
similar
distribution
distribution
with
with
React
react
as
as
the
the
clear
clear
leader.
leader
Last
last
year,
year
the
the
big
big
new
new
feature
feature
in
in
React
react
was
was
hooks.
hooks
Today,
today
we
we
have
have
another
another
big
big
experimental
experimental
feature
feature
in
in
React,
react
concurrent
concurrent
mode.
mode
It
it
allows
allows
the
the
framework
framework
to
to
handle
handle
multiple
multiple
state
state
updates
updates
at
at
the
the
same
same
time,
time
and
and
it
it
opens
opens
the
the
door
door
for
for
a
a
new
new
built
built
in
in
React
react
component
component
called
called
Suspense.
suspense
Suspense
suspense
will
will
wait
wait
for
for
asynchronous
asynchronous
activity
activity
to
to
finish
finish
in
in
its
its
children,
children
such
such
as
as
an
an
API
api
call
call
to
to
a
a
cloud
cloud
database,
database
or
or
better
better
yet,
yet
using
using
the
the
new
new
dynamic
dynamic
imports
imports
feature
feature
to
to
lazy
lazy
load
load
a
a
React
react
component
component
at
at
runtime.
runtime
That
that
means
means
you
you
can
can
handle
handle
loading
loading
states
states
declaratively,
declaratively
and
and
you
you
don't
don't
need
need
to
to
manually
manually
toggle
toggle
some
some
kind
kind
of
of
boolean
boolean
value
value
in
in
your
your
code.
code
Now
now
moving
moving
on
on
to
to
the
the
Angular
angular
world,
world
the
the
big
big
new
new
update
update
is
is
Ivy.
ivy
It's
it's
enabled
enabled
by
by
default
default
in
in
Angular
angular
9,
9
and
and
it's
it's
an
an
entirely
entirely
new
new
compiler
compiler
for
for
Angular.
angular
But
but
what's
what's
more
more
exciting
exciting
to
to
me
me
is
is
that
that
someone
someone
finally
finally
decided
decided
to
to
build
build
a
a
static
static
site
site
generator
generator
for
for
Angular.
angular
By
by
coincidence,
coincidence
they're
they're
expected
expected
to
to
release
release
an
an
alpha
alpha
version
version
of
of
it
it
today,
today
so
so
we
we
can
can
see
see
how
how
it
it
compares
compares
to
to
Gatsby,
gatsby
VuePress,
vuepress
and
and
so
so
on.
on
Moving
moving
on
on
to
to
the
the
view
view
world,
world
a
a
big
big
new
new
feature
feature
is
is
the
the
composition
composition
API.
api
It's
it's
a
a
set
set
of
of
tools
tools
aimed
aimed
at
at
providing
providing
better
better
code
code
reusability
reusability
in
in
complex
complex
Vue
vue
applications.
applications
It
it
does
does
that
that
by
by
taking
taking
some
some
of
of
Vue's
vue's
core
core
capabilities
capabilities
like
like
reactive
reactive
state
state
and
and
exposing
exposing
them
them
as
as
functions.
functions
These
these
smaller
smaller
pieces
pieces
can
can
then
then
be
be
used
used
to
to
compose
compose
more
more
complex
complex
components,
components
and
and
they're
they're
much
much
easier
easier
to
to
strongly
strongly
type
type
with
with
TypeScript.
typescript
So
so
frameworks
frameworks
are
are
cool
cool
and
and
all,
all
but
but
the
the
web
web
platform
platform
itself
itself
has
has
some
some
new
new
features
features
that
that
fundamentally
fundamentally
extend
extend
the
the
types
types
of
of
applications
applications
that
that
you
you
can
can
build
build
on
on
the
the
web.
web
A
a
huge
huge
one
one
is
is
the
the
Web
web
Authentication
authentication
API
api
or
or
WebAuthn.
webauthn
It
it
gives
gives
the
the
browser
browser
access
access
to
to
authenticate
authenticate
via
via
hardware
hardware
based
based
authenticators,
authenticators
and
and
that
that
means
means
your
your
web
web
app
app
can
can
do
do
things
things
like
like
iometric
iometric
auth.
auth
And
and
another
another
one
one
to
to
keep
keep
an
an
eye
eye
on
on
is
is
the
the
Native
native
File
file
System
system
API,
api
which
which
can
can
give
give
your
your
web
web
application
application
access
access
to
to
the
the
user's
user's
local
local
files,
files
something
something
that
that
web
web
developers
developers
have
have
wanted
wanted
since
since
the
the
beginning
beginning
of
of
time.
time
It's
it's
currently
currently
available
available
in
in
Chrome
chrome
with
with
a
a
flag,
flag
but
but
other
other
than
than
that,
that
it's
it's
not
not
supported.
supported
Another
another
small
small
but
but
awesome
awesome
feature
feature
is
is
the
the
new
new
loading
loading
attribute
attribute
for
for
images
images
and
and
iframes.
iframes
There's
there's
a
a
1000000
1000000
different
different
lazy
lazy
loading
loading
JavaScript
javascript
libraries
libraries
out
out
there,
there
but
but
now
now
it's
it's
built
built
into
into
the
the
browser
browser
natively
natively
with
with
a
a
simple
simple
HTML
html
attribute.
attribute
Now
now
speaking
speaking
of
of
browsers,
browsers
there's
there's
a
a
disruptive
disruptive
new
new
browser
browser
out
out
there
there
called
called
Brave.
brave
I
i
started
started
using
using
it
it
a
a
few
few
weeks
weeks
ago,
ago
and
and
now
now
I
i
use
use
it
it
for
for
almost
almost
90%
90%
of
of
my
my
browsing
browsing
both
both
on
on
mobile
mobile
and
and
desktop.
desktop
The
the
CEO
ceo
of
of
the
the
company
company
is
is
none
none
other
other
than
than
Brendan
brendan
Eich,
eich
the
the
creator
creator
of
of
JavaScript.
javascript
The
the
browser
browser
feels
feels
almost
almost
just
just
like
like
Chrome,
chrome
and
and
you
you
can
can
install
install
all
all
the
the
Chrome
chrome
extensions
extensions
that
that
you
you
know
know
and
and
love,
love
but
but
it
it
feels
feels
faster
faster
because
because
it's
it's
blocking
blocking
ads
ads
and
and
trackers
trackers
by
by
default.
default
JavaScript,
javascript
of
of
course,
course
is
is
not
not
just
just
for
for
the
the
browser.
browser
We
we
also
also
have
have
Node.
node
Js.
js
The
the
most
most
exciting
exciting
new
new
feature
feature
in
in
Node
node
has
has
to
to
be
be
worker
worker
threads.
threads
One
one
of
of
the
the
biggest
biggest
limitations
limitations
of
of
JavaScript
javascript
that
that
people
people
like
like
to
to
point
point
out
out
is
is
that
that
it's
it's
single
single
threaded.
threaded
That
that
means
means
you
you
can't
can't
have
have
2
2
single
single
processes
processes
running
running
at
at
the
the
same
same
time.
time
In
in
2020,
2020
that's
that's
no
no
longer
longer
an
an
issue
issue
because
because
we
we
now
now
have
have
the
the
Worker
worker
Threads
threads
module,
module
and
and
it
it
opens
opens
the
the
door
door
to
to
use
use
threads
threads
to
to
execute
execute
JavaScript
javascript
in
in
parallel.
parallel
Another
another
awesome
awesome
feature
feature
that
that
shipped
shipped
to
to
Node
node
is
is
support
support
for
for
ES
es
modules.
modules
In
in
Node
node
13,
13
you
you
can
can
use
use
import
import
and
and
export
export
statements
statements
instead
instead
of
of
require.
require
One
one
of
of
the
the
fastest
fastest
growing
growing
back
back
end
end
tools
tools
for
for
Node
node
is
is
nestjs.
nestjs
It
it
takes
takes
advantage
advantage
of
of
TypeScript
typescript
to
to
build
build
server
server
side
side
applications
applications
that
that
scale
scale
and
and
that
that
are
are
very
very
developer
developer
friendly.
friendly
Nestjs
nestjs
can
can
also
also
help
help
you
you
integrate
integrate
another
another
disruptive
disruptive
technology,
technology
GraphQL.
graphql
This
this
This
this
is
is
a
a
trend
trend
that
that
has
has
been
been
ongoing
ongoing
for
for
a
a
couple
couple
years
years
now,
now
but
but
GraphQL
graphql
is
is
just
just
continuing
continuing
to
to
grow
grow
and
and
grow.
grow
When
when
it
it
comes
comes
to
to
deploying
deploying
your
your
back
back
end,
end
you
you
have
have
a
a
lot
lot
of
of
different
different
which
which
you
you
can
can
see
see
in
in
my
my
cloud
cloud
computing
computing
2020
2020
video.
video
But
but
as
as
it
it
turns
turns
out,
out
many
many
web
web
applications
applications
in
in
today's
today's
world
world
don't
don't
need
need
to
to
build
build
their
their
own
own
back
back
end
end
at
at
all.
all
It
it
can
can
be
be
far
far
more
more
productive
productive
to
to
use
use
something
something
like
like
AWS
aws
Amplify
amplify
or
or
Firebase,
firebase
both
both
of
of
which
which
are
are
continuing
continuing
to
to
grow
grow
as
as
well.
well
These
these
tools
tools
provide
provide
everything
everything
you
you
need
need
to
to
grow
grow
and
and
scale
scale
a
a
mobile
mobile
application,
application
allowing
allowing
your
your
team
team
to
to
focus
focus
almost
almost
entirely
entirely
on
on
building
building
an
an
awesome
awesome
front
front
end
end
user
user
experience.
experience
But
but
JavaScript
javascript
isn't
isn't
just
just
for
for
browsers
browsers
and
and
servers.
servers
It's
it's
also
also
for
for
mobile
mobile
applications.
applications
The
the
big
big
one,
one
of
of
course,
course
is
is
React
react
Native,
native
and
and
we
we
also
also
have
have
Ionic
ionic
and
and
NativeScript.
nativescript
They've
they've
all
all
remained
remained
pretty
pretty
much
much
flat
flat
over
over
the
the
last
last
year
year
in
in
terms
terms
of
of
NPM
npm
downloads.
downloads
React
react
Native
native
has
has
added
added
some
some
nice
nice
new
new
improvements
improvements
like
like
fast
fast
refresh,
refresh
and
and
Ionic
ionic
now
now
supports
supports
React
react
where
where
they
they
previously
previously
only
only
supported
supported
Angular.
angular
But
but
all
all
in
in
all,
all
not
not
too
too
much
much
exciting
exciting
to
to
speak
speak
of
of
in
in
this
this
space.
space
And
and
that
that
gives
gives
us
us
a
a
perfect
perfect
segue
segue
into
into
the
the
JavaScript
javascript
anti
anti
heroes.
heroes
The
the
emerging
emerging
technologies
technologies
where
where
you
you
might
might
place
place
your
your
bets
bets
other
other
than
than
JavaScript.
javascript
In
in
June
june
of
of
2019,
2019
Apple
apple
released
released
Swift
swift
UI.
ui
It
it
provides
provides
a
a
way
way
to
to
build
build
declarative
declarative
UIs
uis
similar
similar
to
to
how
how
you
you
would
would
with
with
React,
react
but
but
with
with
the
the
Swift
swift
programming
programming
language.
language
So,
so
it
it
promises
promises
to
to
greatly
greatly
improve
improve
the
the
iOS
ios
developer
developer
experience,
experience
but,
but
again,
again
it's
it's
only
only
for
for
iOS.
ios
When
when
it
it
comes
comes
to
to
building
building
cross
cross
platform
platform
apps
apps
For
for
iOS
ios
and
and
Android,
android
a
a
big
big
disruptive
disruptive
force
force
is
is
Flutter.
flutter
It
it
uses
uses
the
the
Dart
dart
programming
programming
language,
language
which
which
is
is
very
very
similar
similar
syntactically
syntactically
to
to
JavaScript.
javascript
And
and
in
in
2019,
2019
Dart
dart
was
was
the
the
fastest
fastest
growing
growing
programming
programming
language
language
and
and
Flutter
flutter
is
is
one
one
of
of
the
the
hottest
hottest
open
open
source
source
projects
projects
on
on
GitHub.
github
And
and
it
it
also
also
now
now
supports
supports
the
the
web
web
as
as
a
a
target
target
in
in
beta.
beta
But
but
in
in
the
the
long
long
term,
term
an
an
even
even
bigger
bigger
disruption
disruption
to
to
the
the
JavaScript
javascript
ecosystem
ecosystem
is
is
WebAssembly.
webassembly
Just
just
a
a
few
few
days
days
ago,
ago
WebAssembly
webassembly
became
became
an
an
Official
official
4th
4th
language
language
on
on
the
the
web
web
alongside
alongside
JavaScript,
javascript
HTML,
html
and
and
CSS.
css
Now,
now
I
i
don't
don't
want
want
to
to
come
come
off
off
as
as
if
if
WebAssembly
webassembly
is
is
going
going
to
to
replace
replace
JavaScript.
javascript
In
in
fact,
fact
that's
that's
not
not
the
the
case
case
at
at
all.
all
It's
it's
a
a
compliment
compliment
to
to
JavaScript,
javascript
allowing
allowing
us
us
to
to
build
build
an
an
even
even
greater
greater
variety
variety
of
of
applications.
applications
And
and
more
more
importantly,
importantly
better
better
Quality
quality
applications
applications
as
as
good
good
as
as
any
any
desktop
desktop
app.
app
My
my
favorite
favorite
case
case
study
study
is
is
Figma.
figma
If
if
we
we
look
look
closely
closely
at
at
their
their
product,
product
we'll
we'll
see
see
they
they
have
have
a
a
shell
shell
built
built
with
with
React.
react
Inside
inside
that
that
shell,
shell
we
we
have
have
a
a
high
high
performance
performance
design
design
tool
tool
powered
powered
by
by
WebAssembly.
webassembly
In
in
fact,
fact
I
i
used
used
Figma
figma
to
to
design
design
the
the
cover
cover
for
for
this
this
video.
video
Currently,
currently
languages
languages
like
like
C,
c
C
c
plus
plus
plus
plus
and
and
Rust
rust
can
can
compile
compile
to
to
WASM,
wasm
and
and
it's
it's
starting
starting
to
to
emerge
emerge
on
on
even
even
more
more
languages
languages
like
like
C.
c
Microsoft
microsoft
recently
recently
released
released
a
a
new
new
framework
framework
called
called
Blazor
blazor
and,
and
partially,
partially
through
through
the
the
magic
magic
of
of
web
web
assembly,
assembly
it
it
allows
allows
you
you
to
to
build
build
web
web
applications
applications
using
using
C
c
Sharp,
sharp
HTML,
html
and
and
CSS.
css
And,
and
in
in
the
the
future,
future
I'd
i'd
expect
expect
to
to
see
see
even
even
more
more
languages
languages
that
that
can
can
elegantly
elegantly
interop
interop
with
with
JavaScript.
javascript
We've
we've
covered
covered
a
a
lot
lot
in
in
the
the
last
last
10
10
minutes,
minutes
but
but
that's
that's
just
just
a
a
small
small
sample
sample
of
of
everything
everything
that's
that's
going
going
on
on
in
in
the
the
massive
massive
JavaScript
javascript
world.
world
We
we
have
have
tools
tools
like
like
Cypress
cypress
that
that
are
are
changing
changing
the
the
way
way
we
we
test
test
our
our
applications,
applications
tools
tools
like
like
Gatsby
gatsby
that
that
change
change
the
the
way
way
we
we
build
build
our
our
JavaScript
javascript
apps,
apps
And
and
we
we
have
have
tools
tools
like
like
XState
xstate
giving
giving
us
us
new
new
ways
ways
to
to
think
think
about
about
state
state
management.
management
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
Thanks
thanks
for
for
watching
watching
and
and
remember
remember
to
to
always
always
bet
bet
on
on
JavaScript.
javascript
success
The future of JavaScript is difficult due to the current state of front end frameworks and new features being released in 2020. New features, such as scratching APIs and the adoption of the big underdog of 2019, are common in the language. The speaker concludes by reminding viewers to bet on JavaScript and reminding them to always bet on the framework.
The Future of JavaScript -  New Features and Disruptive Trends in 2020
Prediction is very difficult, especially if it's about the future, and even more so if it's about the future of JavaScript. As app developers, we'll be spending the rest of our lives in the future of JavaScript. So in today's video, we'll look at new features coming to the language, the current state of front end frameworks and new features they're releasing, as well as disruptive trends that could change everything in 2020. And if you're here because you hate JavaScript, make sure to stay tuned until the end, because we'll look at a few tools that you can use to build web apps without JavaScript. The future of JavaScript isn't what it used to be. Make sure to like and subscribe, and let me know what you think about JavaScript in the comments below. One lucky comment will win this one of a kind t shirt. Let's start things off by taking a look at some of the newest features coming to a JavaScript near you in 2020. And if you don't already know how new features make their way into the language, make sure to check out my history of JavaScript video. It explains the purpose of Technical Committee 39 and how proposals make their way into the language as actual Scrchers. You can see all the proposals on GitHub. There are currently 8 finished proposals slated to be published in 2020, but many of them have already been shipped to the browser, Node. Js, and TypeScript, so you can start using them today. Let's take a look at a few of the big ones and see why they're awesome, and when you would want to use Dynamic imports, a function that allows you to lazily import a module at runtime. In other words, your imports no longer have to be static at the top of the file. You can load modules asynchronously from anywhere in your code. This means you can delay the loading of non essential dependencies in your application to improve performance. Notice in this code snippet how we're awaiting the loading of a module as a promise when the user clicks a button. Next, we have optional chaining, which is the most popular new feature according to my extremely limited Twitter poll. We call it the Elvis operator for obvious reasons. If you've ever used Angular, it should look very familiar to you. It makes it possible to call a deeply nested object property without throwing an error if its parent property is undefined. If you've ever used the lodash Git function, this is a good replacement for it. It's extremely useful if you're working with an API or database that returns a bunch of deeply nested objects, and you don't want your app to break at runtime if intermediate properties on those objects are undefined. Next, we have a similar looking new feature called the nullish coalescing operator. In many cases, you might want to set a default value for a property when it's undefined. You can already do that in JavaScript using a logical or operator, but but it can be problematic if the defined value is a 0 or an empty string because JavaScript will coerce those values to falsy. It's super annoying because then you have to do runtime type checking in your code. In 2020, no more. The double question mark is falsie only if it's null or undefined. So the end result is more predictable code when setting default values. JavaScript is also getting a new primitive data type, bigint. It can represent numbers beyond JavaScript's max safe integer value, which is limited to 64 bits. You can create a big int by adding an n to a regular integer, or you can use the big n constructor to make numbers that are completely massive. But to be honest, it probably won't be needed by most developers, unless you're doing extremely precise time stamps or geometric calculations. But it is a JavaScript primitive, so you should definitely know about it. So that gives you a preview of things coming to JavaScript, but make sure to check out all the finished proposals on GitHub. Let's switch gears to one of the biggest disruptions in the JavaScript world, TypeScript. It first appeared on the 2016 Stack Overflow survey, being used by less than half of 1% of developers. Fast forward 3 years, it's now a top ten language used by more than 20% of developers. It's one of those rare technologies in the JS world that seems to be well loved by both front end and back end developers and across frameworks. Now, you might have watched my prediction video last year. My first prediction was that 2019 would be the year of Web Components. At this point, I'd have to say that mostly has not been the case. They did see more adoption in 2019, but not in any big spectacular way. More importantly, they saw a lot of criticism and a lot of pushback. But there are some really good tools out there dedicated to building web components, like Stencil and LitElement, which is another Google sponsored project that has been gaining a lot of steam lately. Now let's talk about some front end frameworks, starting with the big underdog of 2019, Svelte. It's been around for a few years, but in April 2019, version 3 was released. It generated a ton of excitement because it's put together into a very elegant, easy to learn package, and it's highly performant with no runtime dependencies. Its npm downloads have roughly tripled over the last year, and it's a great place to take refuge from the status quo. Speaking of which, let's take a look at React, Angular, and Vue. In In terms of adoption, React is by far the dominant force with more than twice as many downloads as Angular and Vue combined. But downloads are just one piece of data in a bigger picture. Let's also take a look at jobs on Stack Overflow. We've got 850 openings for React, 388 for Angular, and 156 for Vue. So we have a similar distribution with React as the clear leader. Last year, the big new feature in React was hooks. Today, we have another big experimental feature in React, concurrent mode. It allows the framework to handle multiple state updates at the same time, and it opens the door for a new built in React component called Suspense. Suspense will wait for asynchronous activity to finish in its children, such as an API call to a cloud database, or better yet, using the new dynamic imports feature to lazy load a React component at runtime. That means you can handle loading states declaratively, and you don't need to manually toggle some kind of boolean value in your code. Now moving on to the Angular world, the big new update is Ivy. It's enabled by default in Angular 9, and it's an entirely new compiler for Angular. But what's more exciting to me is that someone finally decided to build a static site generator for Angular. By coincidence, they're expected to release an alpha version of it today, so we can see how it compares to Gatsby, VuePress, and so on. Moving on to the view world, a big new feature is the composition API. It's a set of tools aimed at providing better code reusability in complex Vue applications. It does that by taking some of Vue's core capabilities like reactive state and exposing them as functions. These smaller pieces can then be used to compose more complex components, and they're much easier to strongly type with TypeScript. So frameworks are cool and all, but the web platform itself has some new features that fundamentally extend the types of applications that you can build on the web. A huge one is the Web Authentication API or WebAuthn. It gives the browser access to authenticate via hardware based authenticators, and that means your web app can do things like iometric auth. And another one to keep an eye on is the Native File System API, which can give your web application access to the user's local files, something that web developers have wanted since the beginning of time. It's currently available in Chrome with a flag, but other than that, it's not supported. Another small but awesome feature is the new loading attribute for images and iframes. There's a 1000000 different lazy loading JavaScript libraries out there, but now it's built into the browser natively with a simple HTML attribute. Now speaking of browsers, there's a disruptive new browser out there called Brave. I started using it a few weeks ago, and now I use it for almost 90% of my browsing both on mobile and desktop. The CEO of the company is none other than Brendan Eich, the creator of JavaScript. The browser feels almost just like Chrome, and you can install all the Chrome extensions that you know and love, but it feels faster because it's blocking ads and trackers by default. JavaScript, of course, is not just for the browser. We also have Node. Js. The most exciting new feature in Node has to be worker threads. One of the biggest limitations of JavaScript that people like to point out is that it's single threaded. That means you can't have 2 single processes running at the same time. In 2020, that's no longer an issue because we now have the Worker Threads module, and it opens the door to use threads to execute JavaScript in parallel. Another awesome feature that shipped to Node is support for ES modules. In Node 13, you can use import and export statements instead of require. One of the fastest growing back end tools for Node is nestjs. It takes advantage of TypeScript to build server side applications that scale and that are very developer friendly. Nestjs can also help you integrate another disruptive technology, GraphQL. This This is a trend that has been ongoing for a couple years now, but GraphQL is just continuing to grow and grow. When it comes to deploying your back end, you have a lot of different which you can see in my cloud computing 2020 video. But as it turns out, many web applications in today's world don't need to build their own back end at all. It can be far more productive to use something like AWS Amplify or Firebase, both of which are continuing to grow as well. These tools provide everything you need to grow and scale a mobile application, allowing your team to focus almost entirely on building an awesome front end user experience. But JavaScript isn't just for browsers and servers. It's also for mobile applications. The big one, of course, is React Native, and we also have Ionic and NativeScript. They've all remained pretty much flat over the last year in terms of NPM downloads. React Native has added some nice new improvements like fast refresh, and Ionic now supports React where they previously only supported Angular. But all in all, not too much exciting to speak of in this space. And that gives us a perfect segue into the JavaScript anti heroes. The emerging technologies where you might place your bets other than JavaScript. In June of 2019, Apple released Swift UI. It provides a way to build declarative UIs similar to how you would with React, but with the Swift programming language. So, it promises to greatly improve the iOS developer experience, but, again, it's only for iOS. When it comes to building cross platform apps For iOS and Android, a big disruptive force is Flutter. It uses the Dart programming language, which is very similar syntactically to JavaScript. And in 2019, Dart was the fastest growing programming language and Flutter is one of the hottest open source projects on GitHub. And it also now supports the web as a target in beta. But in the long term, an even bigger disruption to the JavaScript ecosystem is WebAssembly. Just a few days ago, WebAssembly became an Official 4th language on the web alongside JavaScript, HTML, and CSS. Now, I don't want to come off as if WebAssembly is going to replace JavaScript. In fact, that's not the case at all. It's a compliment to JavaScript, allowing us to build an even greater variety of applications. And more importantly, better Quality applications as good as any desktop app. My favorite case study is Figma. If we look closely at their product, we'll see they have a shell built with React. Inside that shell, we have a high performance design tool powered by WebAssembly. In fact, I used Figma to design the cover for this video. Currently, languages like C, C plus plus and Rust can compile to WASM, and it's starting to emerge on even more languages like C. Microsoft recently released a new framework called Blazor and, partially, through the magic of web assembly, it allows you to build web applications using C Sharp, HTML, and CSS. And, in the future, I'd expect to see even more languages that can elegantly interop with JavaScript. We've covered a lot in the last 10 minutes, but that's just a small sample of everything that's going on in the massive JavaScript world. We have tools like Cypress that are changing the way we test our applications, tools like Gatsby that change the way we build our JavaScript apps, And we have tools like XState giving us new ways to think about state management. I'm gonna go ahead and wrap things up there. Thanks for watching and remember to always bet on JavaScript.
The future of JavaScript is difficult due to the current state of front end frameworks and new features being released in 2020. New features, such as scratching APIs and the adoption of the big underdog of 2019, are common in the language. The speaker concludes by reminding viewers to bet on JavaScript and reminding them to always bet on the framework.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : The Future of JavaScript -  New Features and Disruptive Trends in 2020 
        and a small summary : The future of JavaScript is difficult due to the current state of front end frameworks and new features being released in 2020. New features, such as scratching APIs and the adoption of the big underdog of 2019, are common in the language. The speaker concludes by reminding viewers to bet on JavaScript and reminding them to always bet on the framework.
        [/INST]
        
        Generate the video : Prediction is very difficult, especially if it's about the future, and even more so if it's about the future of JavaScript. As app developers, we'll be spending the rest of our lives in the future of JavaScript. So in today's video, we'll look at new features coming to the language, the current state of front end frameworks and new features they're releasing, as well as disruptive trends that could change everything in 2020. And if you're here because you hate JavaScript, make sure to stay tuned until the end, because we'll look at a few tools that you can use to build web apps without JavaScript. The future of JavaScript isn't what it used to be. Make sure to like and subscribe, and let me know what you think about JavaScript in the comments below. One lucky comment will win this one of a kind t shirt. Let's start things off by taking a look at some of the newest features coming to a JavaScript near you in 2020. And if you don't already know how new features make their way into the language, make sure to check out my history of JavaScript video. It explains the purpose of Technical Committee 39 and how proposals make their way into the language as actual Scrchers. You can see all the proposals on GitHub. There are currently 8 finished proposals slated to be published in 2020, but many of them have already been shipped to the browser, Node. Js, and TypeScript, so you can start using them today. Let's take a look at a few of the big ones and see why they're awesome, and when you would want to use Dynamic imports, a function that allows you to lazily import a module at runtime. In other words, your imports no longer have to be static at the top of the file. You can load modules asynchronously from anywhere in your code. This means you can delay the loading of non essential dependencies in your application to improve performance. Notice in this code snippet how we're awaiting the loading of a module as a promise when the user clicks a button. Next, we have optional chaining, which is the most popular new feature according to my extremely limited Twitter poll. We call it the Elvis operator for obvious reasons. If you've ever used Angular, it should look very familiar to you. It makes it possible to call a deeply nested object property without throwing an error if its parent property is undefined. If you've ever used the lodash Git function, this is a good replacement for it. It's extremely useful if you're working with an API or database that returns a bunch of deeply nested objects, and you don't want your app to break at runtime if intermediate properties on those objects are undefined. Next, we have a similar looking new feature called the nullish coalescing operator. In many cases, you might want to set a default value for a property when it's undefined. You can already do that in JavaScript using a logical or operator, but but it can be problematic if the defined value is a 0 or an empty string because JavaScript will coerce those values to falsy. It's super annoying because then you have to do runtime type checking in your code. In 2020, no more. The double question mark is falsie only if it's null or undefined. So the end result is more predictable code when setting default values. JavaScript is also getting a new primitive data type, bigint. It can represent numbers beyond JavaScript's max safe integer value, which is limited to 64 bits. You can create a big int by adding an n to a regular integer, or you can use the big n constructor to make numbers that are completely massive. But to be honest, it probably won't be needed by most developers, unless you're doing extremely precise time stamps or geometric calculations. But it is a JavaScript primitive, so you should definitely know about it. So that gives you a preview of things coming to JavaScript, but make sure to check out all the finished proposals on GitHub. Let's switch gears to one of the biggest disruptions in the JavaScript world, TypeScript. It first appeared on the 2016 Stack Overflow survey, being used by less than half of 1% of developers. Fast forward 3 years, it's now a top ten language used by more than 20% of developers. It's one of those rare technologies in the JS world that seems to be well loved by both front end and back end developers and across frameworks. Now, you might have watched my prediction video last year. My first prediction was that 2019 would be the year of Web Components. At this point, I'd have to say that mostly has not been the case. They did see more adoption in 2019, but not in any big spectacular way. More importantly, they saw a lot of criticism and a lot of pushback. But there are some really good tools out there dedicated to building web components, like Stencil and LitElement, which is another Google sponsored project that has been gaining a lot of steam lately. Now let's talk about some front end frameworks, starting with the big underdog of 2019, Svelte. It's been around for a few years, but in April 2019, version 3 was released. It generated a ton of excitement because it's put together into a very elegant, easy to learn package, and it's highly performant with no runtime dependencies. Its npm downloads have roughly tripled over the last year, and it's a great place to take refuge from the status quo. Speaking of which, let's take a look at React, Angular, and Vue. In In terms of adoption, React is by far the dominant force with more than twice as many downloads as Angular and Vue combined. But downloads are just one piece of data in a bigger picture. Let's also take a look at jobs on Stack Overflow. We've got 850 openings for React, 388 for Angular, and 156 for Vue. So we have a similar distribution with React as the clear leader. Last year, the big new feature in React was hooks. Today, we have another big experimental feature in React, concurrent mode. It allows the framework to handle multiple state updates at the same time, and it opens the door for a new built in React component called Suspense. Suspense will wait for asynchronous activity to finish in its children, such as an API call to a cloud database, or better yet, using the new dynamic imports feature to lazy load a React component at runtime. That means you can handle loading states declaratively, and you don't need to manually toggle some kind of boolean value in your code. Now moving on to the Angular world, the big new update is Ivy. It's enabled by default in Angular 9, and it's an entirely new compiler for Angular. But what's more exciting to me is that someone finally decided to build a static site generator for Angular. By coincidence, they're expected to release an alpha version of it today, so we can see how it compares to Gatsby, VuePress, and so on. Moving on to the view world, a big new feature is the composition API. It's a set of tools aimed at providing better code reusability in complex Vue applications. It does that by taking some of Vue's core capabilities like reactive state and exposing them as functions. These smaller pieces can then be used to compose more complex components, and they're much easier to strongly type with TypeScript. So frameworks are cool and all, but the web platform itself has some new features that fundamentally extend the types of applications that you can build on the web. A huge one is the Web Authentication API or WebAuthn. It gives the browser access to authenticate via hardware based authenticators, and that means your web app can do things like iometric auth. And another one to keep an eye on is the Native File System API, which can give your web application access to the user's local files, something that web developers have wanted since the beginning of time. It's currently available in Chrome with a flag, but other than that, it's not supported. Another small but awesome feature is the new loading attribute for images and iframes. There's a 1000000 different lazy loading JavaScript libraries out there, but now it's built into the browser natively with a simple HTML attribute. Now speaking of browsers, there's a disruptive new browser out there called Brave. I started using it a few weeks ago, and now I use it for almost 90% of my browsing both on mobile and desktop. The CEO of the company is none other than Brendan Eich, the creator of JavaScript. The browser feels almost just like Chrome, and you can install all the Chrome extensions that you know and love, but it feels faster because it's blocking ads and trackers by default. JavaScript, of course, is not just for the browser. We also have Node. Js. The most exciting new feature in Node has to be worker threads. One of the biggest limitations of JavaScript that people like to point out is that it's single threaded. That means you can't have 2 single processes running at the same time. In 2020, that's no longer an issue because we now have the Worker Threads module, and it opens the door to use threads to execute JavaScript in parallel. Another awesome feature that shipped to Node is support for ES modules. In Node 13, you can use import and export statements instead of require. One of the fastest growing back end tools for Node is nestjs. It takes advantage of TypeScript to build server side applications that scale and that are very developer friendly. Nestjs can also help you integrate another disruptive technology, GraphQL. This This is a trend that has been ongoing for a couple years now, but GraphQL is just continuing to grow and grow. When it comes to deploying your back end, you have a lot of different which you can see in my cloud computing 2020 video. But as it turns out, many web applications in today's world don't need to build their own back end at all. It can be far more productive to use something like AWS Amplify or Firebase, both of which are continuing to grow as well. These tools provide everything you need to grow and scale a mobile application, allowing your team to focus almost entirely on building an awesome front end user experience. But JavaScript isn't just for browsers and servers. It's also for mobile applications. The big one, of course, is React Native, and we also have Ionic and NativeScript. They've all remained pretty much flat over the last year in terms of NPM downloads. React Native has added some nice new improvements like fast refresh, and Ionic now supports React where they previously only supported Angular. But all in all, not too much exciting to speak of in this space. And that gives us a perfect segue into the JavaScript anti heroes. The emerging technologies where you might place your bets other than JavaScript. In June of 2019, Apple released Swift UI. It provides a way to build declarative UIs similar to how you would with React, but with the Swift programming language. So, it promises to greatly improve the iOS developer experience, but, again, it's only for iOS. When it comes to building cross platform apps For iOS and Android, a big disruptive force is Flutter. It uses the Dart programming language, which is very similar syntactically to JavaScript. And in 2019, Dart was the fastest growing programming language and Flutter is one of the hottest open source projects on GitHub. And it also now supports the web as a target in beta. But in the long term, an even bigger disruption to the JavaScript ecosystem is WebAssembly. Just a few days ago, WebAssembly became an Official 4th language on the web alongside JavaScript, HTML, and CSS. Now, I don't want to come off as if WebAssembly is going to replace JavaScript. In fact, that's not the case at all. It's a compliment to JavaScript, allowing us to build an even greater variety of applications. And more importantly, better Quality applications as good as any desktop app. My favorite case study is Figma. If we look closely at their product, we'll see they have a shell built with React. Inside that shell, we have a high performance design tool powered by WebAssembly. In fact, I used Figma to design the cover for this video. Currently, languages like C, C plus plus and Rust can compile to WASM, and it's starting to emerge on even more languages like C. Microsoft recently released a new framework called Blazor and, partially, through the magic of web assembly, it allows you to build web applications using C Sharp, HTML, and CSS. And, in the future, I'd expect to see even more languages that can elegantly interop with JavaScript. We've covered a lot in the last 10 minutes, but that's just a small sample of everything that's going on in the massive JavaScript world. We have tools like Cypress that are changing the way we test our applications, tools like Gatsby that change the way we build our JavaScript apps, And we have tools like XState giving us new ways to think about state management. I'm gonna go ahead and wrap things up there. Thanks for watching and remember to always bet on JavaScript.
        