JavaScript的未来

动态导入 (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 are awaiting the loading of a module as a promise when the user clicks a button.

该函数允许您在运行时懒惰地导入模块，换句话说，导入不再必须在文件顶部是静态的。 您可以从代码中的任何位置异步加载模块。 这意味着您可以延迟应用程序中非必要依赖项的加载以提高性能。 请注意此代码段中的内容，即当用户单击按钮时，我们如何等待模块的加载。

可选链接 (Optional Chaining)

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 it run time if intermediate properties on those objects are undefined.

如果未定义其父属性，则可以调用深度嵌套的对象属性而不会引发错误。 如果您曾经使用过Lodash git函数，则可以很好地替代它。 如果您使用的API或数据库返回了一堆深层嵌套的对象，并且如果这些对象的中间属性未定义，那么您不希望您的应用中断它的运行时间，那么这将非常有用。

空位合并 (Nullish Coalescing)

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 it can be problematic if the defined value is a zero or an empty string because JavaScript will coerce those values to false. It’s super annoying because then you have to do runtime type checking in your code.

接下来，我们有一个外观相似的新功能，称为Nullish Coalescing运算符。 在许多情况下，您可能想在属性未定义时为其设置默认值。 您已经可以使用逻辑或运算符在JavaScript中完成此操作，但是如果定义的值是零或空字符串，则可能会出现问题，因为JavaScript会将这些值强制为false。 这太烦人了，因为然后您必须在代码中进行运行时类型检查。

In 2020 no more. The double question mark is false only if it’s null or undefined so the end result is a more predictable code when setting default values.

2020年不再。 双问号只有在为null或未定义时才为false，因此在设置默认值时最终结果是更可预测的代码。

大整数 (BIG INT)

Javascript is also getting a new primitive data type a big int. It can represent numbers beyond JavaScript’s max safe integer value which is limited to 64 bits.

Javascript也正在获得一个新的原始数据类型。 它可以表示超出JavaScript的最大安全整数值(限制为64位)的数字。

You can create a BIG INT by adding an n to a regular integer or you can use the BIG INT 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.

您可以通过在正整数上添加n来创建BIG INT，也可以使用BIG INT构造函数生成完全为整数的数字。 但是，老实说，除非您要进行非常精确的时间戳或几何计算，否则大多数开发人员可能不需要它，但是它是JavaScript原语，因此您一定应该了解它。

打字稿 (TypeScript)

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 three years it’s now a top ten language used by more than 20% of developers. It’s one of those rare technologies in the Jas world that seems to be well-loved by both front-end and back-end developers and across frameworks.

让我们切换到JavaScript世界中最大的破坏之一TypeType首次出现在2016年Stack Overflow调查中，不到1％的开发人员使用了一半，快进了三年，现在已成为20％以上使用的十大语言开发人员。 这是Jas世界中罕见的技术之一，它似乎受到前端和后端开发人员以及跨框架的喜爱。

前端框架 (Front-End Frameworks)

Card.svelte (Svelte)

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.

现在让我们来谈谈一些前端框架，这些框架从2019 Svelte的弱者开始。 它已经存在了几年，但在2019年4月发布了版本3。 它被集成到一个非常优雅的易于学习的程序包中，并且具有高性能，并且没有运行时相关性，因此引起了极大的兴奋。 在过去的一年中，其npm下载量增长了大约两倍，这是远离现状的好地方。

Speaking of which let’s take a look at React, Angular, and Vue. In terms of adoption react is by far the dominant force with more than twice as many downloads as angular and view 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.

说到这，让我们看一下React，Angular和Vue。 就采用率而言，到目前为止，React是主导力量，其下载量是Angular和View总和的两倍以上。 但是下载只是更大范围内的一项数据。 让我们看一下Stack Overflow上的作业，我们有850个React开口，388个Angular开口和156个Vue开口，因此我们有类似的分布作为React的领导者。

React (React)

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 the asynchronous activity to finish and its children such as an API call to a cloud database or better yet using the new dynamic import 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.

去年，React中最大的新功能是Hooks。 今天，我们在React并发模式中有了另一个重要的实验功能。 它允许框架同时处理多个状态更新，并为新的内置React组件suspense打开了大门。 挂起将等待异步活动完成，并且其子级(例如对云数据库的API调用)或更好的方法是使用新的动态导入功能在运行时延迟加载React组件。 这意味着您可以声明性地处理加载状态，而无需在代码中手动切换某种布尔值。

角度的 (Angular)

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.

现在进入角世界，新的重大更新是常春藤 。 默认情况下，它在angular 9中启用，它是angular的全新编译器。 但是令我感到更兴奋的是，最终有人决定构建一个静态的角度生成器。

Vue (Vue)

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.

进入视图世界的一个重要新功能是Composition API 。 这是一组工具，旨在在复杂的Vue应用程序中提供更好的代码可重用性。 通过采用Vue的某些核心功能(例如React式状态)并将其作为功能公开，可以做到这一点。 然后，这些较小的片段可用于组成更复杂的组件，并且使用打字稿进行强力键入要容易得多。

网络认证 (Web AuthN)

So frameworks are cool on all but the web platform itself has some new features that fundamentally extend at the types of applications that you can build on the web. A huge one is the web authentication API or Web AuthN. It gives the browser the ability to authenticate via hardware-based authenticators and that means your web app can do things like biometric auth.

因此，框架在所有平台上都很酷，但是Web平台本身具有一些新功能，这些新功能从根本上扩展了可以在Web上构建的应用程序类型。 Web身份验证API或Web AuthN是一个巨大的功能。 它使浏览器能够通过基于硬件的身份验证器进行身份验证，这意味着您的Web应用程序可以执行生物识别身份验证之类的操作。

本机文件系统 (Native File System)

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.

另一个值得关注的是本机文件系统API，该API可以使您的Web应用程序访问用户的本地文件，这是Web开发人员自开始以来所希望的。 Chrome目前在带有标志的Chrome中可用，但不支持它。

惰性HTML属性 (Lazy HTML Attribute)

Another small but awesome feature is the new loading attribute for images and iframes. There are a million different lazy loading JavaScript libraries out there but now it’s built into the browser natively with a simple HTML attribute.

另一个小巧但很棒的功能是图像和iframe的新加载属性。 那里有一百万种不同的延迟加载JavaScript库，但现在它已通过简单HTML属性内置在浏览器中。

Node.js (Node.js)

JavaScript of course is not just for the browser we also have Node.js. The most exciting new feature of 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 which means you can’t have two 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 a node is support for es modules. In node 13 you can use import and export statements instead of require.

当然，JavaScript不仅适用于浏览器，我们还具有Node.js。 Node最令人兴奋的新功能必须是工作线程 。 人们要指出JavaScript的最大局限之一是它是单线程的，这意味着您不能同时运行两个单个进程。 在2020年，这不再是问题，因为我们现在有了工作线程模块，它为使用线程并行执行JavaScript打开了大门。 节点附带的另一个很棒的功能是对es模块的支持 。 在节点13中，可以使用import和export语句代替require。

One of the fastest-growing back-end tools for Node.js 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 graph QL. This is a trend that has been ongoing for a couple of years now but graph QL is just continuing to grow and grow.

NestJS是发展最快的Node.js后端工具之一。 它利用打字稿来构建可扩展且对开发人员非常友好的服务器端应用程序。 NestJS还可以帮助您集成另一个破坏性技术图QL。 这种趋势已经持续了两年，但是图QL仍在继续增长。

无后端 (Backend-less)

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 amplifier 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 focused almost entirely on building an awesome front-end user experience.

当今世界上的许多Web应用程序根本不需要构建自己的后端。 使用诸如AWS放大器或Firebase之类的东西，而且两者都在持续增长，可能会更有生产力。 这些工具提供了增长和扩展移动应用程序所需的一切，从而使您的团队几乎可以完全专注于构建出色的前端用户体验。

移动应用 (Mobile Applications)

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 Native Script. 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.

但是JavaScript不仅适用于浏览器和服务器，而且还适用于移动应用程序，其中最大的当然是React Native，我们还有Ionic和Native Script。 就NPM下载量而言，它们在过去一年中几乎保持不变。 React native添加了一些不错的新改进，例如快速刷新，而Ionic现在支持react，以前它们仅支持angular，但在这个领域中，总的来说并没有太多令人兴奋的事情。

JS反英雄 (JS Anti-Heroes)

除了JavaScript之外，您还可以下注的新兴技术。 (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 UI 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.

苹果在2019年6月发布了Swift UI。 它提供了一种构建声明式UI的方式，类似于使用React而是使用Swift编程语言来构建声明式UI，因此它有望大大改善iOS开发人员的体验，但同样仅适用于iOS。

When it comes to building cross-platform apps for iOS and Android a big disruptive forces 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 of one of the hottest open-source projects on GitHub and it also now supports the web as a target in beta.

在构建适用于iOS和Android的跨平台应用程序时，Flutter产生了巨大的破坏力。 它使用了与JavaScript在语法上非常相似的Dart编程语言，并且在2019年Dart是GitHub上最热门的开源项目之一增长最快的编程语言和Flutter，并且现在还支持将Web作为beta版本的目标。

网络组装 (Web Assembly)

But in the long term, an even bigger disruption to the JavaScript ecosystem is Web Assembly. Just a few days ago web assembly became an official fourth language on the web alongside javascript HTML and CSS. Now I don’t want to come off as if web assembly 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.

但是从长远来看，Web Assembly对JavaScript生态系统的破坏更大。 几天前，Web程序集与JavaScript HTML和CSS一起成为Web上的第四种官方语言。 现在，我不想冒充Web程序集来替换javascript，实际上，事实并非如此，这完全是对JavaScript的补充，它使我们能够构建更多种类的应用程序，更重要的是，质量更好的应用程序与任何桌面应用程序一样好。

Currently, languages like C, C++, and rust can compile to blossom and it’s starting to emerge on even more languages like C sharp. Microsoft recently released a new framework called Blazer 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 inter-op with JavaScript.

当前，诸如C，C ++和rust之类的语言可以编译成花，并且在诸如C Sharp之类的更多语言上也开始出现。 微软最近发布了一个名为Blazer的新框架，部分地通过Web组装的魔力，它使您可以使用C尖锐HTML和CSS来构建Web应用程序，并且在将来，我希望看到更多可以与之完美互操作的语言。 JavaScript。

普通英语JavaScript (JavaScript In Plain English)

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！

翻译自: https://medium.com/@techbro01/future-of-javascript-f921f8f8be89