整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 无处不在

JavaScript 无处不在

知道那个梗吗?就是有人试图在任何带有屏幕和某种输入界面的电子设备上运行 Doom 游戏那个?


结果今天我们开始在 JavaScript 这边也看到这种现象了。由于这种语言的通用性以及它背后社区的规模和活跃程度,JavaScript 的使用场景变得越来越多,远远超出了它一开始只用于浏览器的设计目标。


那么我们就来看看我们最喜欢的编程语言到底能做多少事情,以至于我们可以开始展望一个完全由 JavaScript 塑造的未来了。

开发人员在哪里都能见到它


很难向非开发人员解释为什么某件事情是用 JavaScript 来做的,因为他们很难理解背后的必然性。但我们开发人员是可以看到幕后的原因的,我们很了解自己最喜欢的产品背后使用的技术究竟有着怎样的优势。


正如我们即将看到的那样,JavaScript 可以成为我们技术生活和个人生活的一部分。因为如前所述,我们在几年前就超越了浏览器的限制。这主要归功于 Node.js,它让我们都意识到自己可以在任何后端中运行 JS 了,而这一切都是从那时开始的。

硬件上的 JavaScript


这可能是让 JS 融入我们日常生活的最大用例。


像Johnny-Five这样的库允许你将 JS 代码嵌入到几乎任何类型的开源硬件中运行。虽然这里当然会有很多限制,你也不能随便拿起什么芯片就用 JS 对其编程,但只要你愿意改一下你的电子设备并在你的产品中放一个 Arduino(举个例子),你就可以创建任何运行在 JavaScript 上的硬件。


不信我的话?甚至还有一个名为Espruino的项目,它提供了所有的硬件、手册,甚至是开发环境,供你学习和使用 JS 来做各种事情。


我觉得这只是一个开始,考虑到这种语言是如此简单和灵活,它将推动可编程硬件的崛起,这种趋势会一年比一年火热。甚至有一个开源的 SmartWatch 可以用 JavaScript 来编程,名为Bangle.js。


开放硬件,再加上开源软件和快速发展的 3D 打印机等创建工具,为新一代黑客提供了绝佳的成长环境。他们能直接在家中构建自己的电子产品和电器,并使用以 JS 编写的高级 API 对其进行编程。

用于人工智能的 JavaScript


虽然 Python 在进行一些严肃的 AI 编程工作(我指的是开发新的 ML 模型或进行一些繁重的数据处理)时仍然是更受欢迎的选择,但 JS 也不甘落后。


事实上,借助以下库,你已经可以使用 JavaScript 编写软件,利用经过训练的 ML 模型了:


  • TensorFlow.js允许你直接从浏览器或指定的运行时运行经过训练的机器学习模型。
  • Brain.js,一个使用 GPU 执行神经网络优化的库,可以在浏览器和 Node.js 上运行。
  • ML5.js构建在 Tensorflow 之上,可进一步简化直接从 JavaScript 访问机器学习模型的过程。
  • Syntaptic.js,另一个用于直接在浏览器或其他兼容运行时(例如 Node.js)上创建神经网络的库。


其他社区为 AI 领域提供的生态系统与 JavaScript 所提供的生态系统之间仍然存在一定差距,而且考虑到 JavaScript 每年都在被移植到更多平台上,这种差距只会继续扩大。借助 JS,AI 社区迟早会发现他们能将 AI 带到世界的每一个角落。

游戏开发中的 JavaScript


虽然你还没听说过完全用 JavaScript 编写的 3A 游戏,但这种语言正在慢慢走近这个行业。


例如,虽然 Unity 确实放弃了对类 JS 语言的支持,但 JavaScript 本身就拥有制作游戏所需的一切特性,至少可以用来制作运行在浏览器上的游戏。


不要误会我的意思,这本身并不是一件坏事。浏览器图形渲染能力比起早期已经有了很大发展,你可以直接在浏览器上获得一些有趣的结果,并且也能充分利用计算机的 GPU 性能。


诚然,距离 3A 游戏行业接受 JS 作为他们的标准之一还有很长的路要走,但这项技术已经有了自己的位置。浏览器 API 可以给你提供从处理输入到硬件加速所需的一切支持,因此我们迟早会看到第一个独立游戏工作室为节省成本而用 JS 打造的 3A 级游戏。


其实我的目光放的更远一些,如果在 2012 年的时候这个家伙就可以在当年的 XBOX 上运行完整的 JS 运行时,那么我们迟早会看到所有主要平台上都会有 JS 运行时。一旦一家公司开发出来并获得批准,许多公司就会效仿。


如果你只对 Web 游戏开发感兴趣,你可能需要查看用 JS 开发游戏时用到的 top 9 库列表:2020年9个顶级JS游戏引擎和库。

Web3 时代和 JavaScript 在这个新世界中的影响力


所有人都在谈论这个话题,或者为它写文章,抑或浏览这个话题的相关内容。我说的就是新一代 Web,基于分布式和区块链技术:Web3。


他们说这是 Web 的未来。它也完全依赖 JS,至少目前是这样。


虽然你不会很快使用 JavaScript 编写智能以太坊合约,但你将使用Web3.js等库与区块链交互来创建自己的 dApp(你的分布式应用程序)。


如果需要,你甚至可以使用 JavaScript 创建自己的区块链。这仍然是一个全新的领域,很难准确预测它将如何演变,但我可以肯定的是,JS 将在这一演变中发挥重要作用。

用于移动开发的 JavaScript


考虑到我们多年来一直有能力使用 JS 为移动设备编写混合应用程序,这个主题大家都应该很熟悉了。


但是感谢 React Native 之类的项目,你还可以创建使用手机的原生 API 来渲染 UI 的应用程序。这种路径在性能上绝对优于混合方法,并且由于它依旧兼容主流移动操作系统,你仍然可以获得在所有平台上使用单一语言的好处。


Skype、Facebook、Uber、Discord 等应用程序已经在利用这种原生技术了,这很明显地告诉了我们移动行业的未来会是什么样子:由 JavaScript 打造。


有人可能会说,在接下来的几年内我们将不断看到 JavaScript 的新用例出现在各种各样的地方。这种观点可能是正确的,因为这种语言自身的演变趋势表明,它正在适应其不知疲倦的社区不断创造出来的新需求,这个社区希望让 JS 无处不在。


我们接下来还会在哪里看到 JavaScript 呢?我的猜测是,一旦我们意识到它是多么强大的工具,以及将它嵌入到可穿戴等设备上是多么容易,我们就会在更多设备中看到它。一旦游戏工作室开始意识到这种语言的力量及其游戏制作能力,我们也将在游戏主机上见到它的身影。


你呢?你认为 JavaScript 在不久的将来会出现在哪里?


原文链接:https://blog.bitsrc.io/a-future-made-of-javascript-5ab417f34355

. this 适合你吗?

我看到许多文章在介绍 JavaScript 的 this 时都会假设你学过某种面向对象的编程语言,比如 Java、C++ 或 Python 等。但这篇文章面向的读者是那些不知道 this 是什么的人。我尽量不用任何术语来解释 this 是什么,以及 this 的用法。

也许你一直不敢解开 this 的秘密,因为它看起来挺奇怪也挺吓人的。或许你只在 StackOverflow 说你需要用它的时候(比如在 React 里实现某个功能)才会使用。

在深入介绍 this 之前,我们首先需要理解函数式编程和面向对象编程之间的区别。

2. 函数式编程 vs 面向对象编程

你可能不知道,JavaScript 同时拥有面向对象和函数式的结构,所以你可以自己选择用哪种风格,或者两者都用。

我在很早以前使用 JavaScript 时就喜欢函数式编程,而且会像躲避瘟疫一样避开面向对象编程,因为我不理解面向对象中的关键字,比如 this。我不知道为什么要用 this。似乎没有它我也可以做好所有的工作。

而且我是对的。

在某种意义上 。也许你可以只专注于一种结构并且完全忽略另一种,但这样你只能是一个 JavaScript 开发者。为了解释函数式和面向对象之间的区别,下面我们通过一个数组来举例说明,数组的内容是 Facebook 的好友列表。

假设你要做一个 Web 应用,当用户使用 Facebook 登录你的 Web 应用时,需要显示他们的 Facebook 的好友信息。你需要访问 Facebook 并获得用户的好友数据。这些数据可能是 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts 等信息。

const data=[
 {
 firstName: 'Bob',
 lastName: 'Ross',
 username: 'bob.ross', 
 numFriends: 125,
 birthday: '2/23/1985',
 lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
 },
 ...
]

假设上述数据是你通过 Facebook API 获得的。现在需要将其转换成方便你的项目使用的格式。我们假设你想显示的好友信息如下:

  • 姓名,格式为`${firstName} ${lastName}`
  • 三篇随机文章
  • 距离生日的天数


3. 函数式方式

函数式的方式就是将整个数组或者数组中的某个元素传递给某个函数,然后返回你需要的信息:

const fullNames=getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

首先我们有 Facebook API 返回的原始数据。为了将其转换成需要的格式,首先要将数据传递给一个函数,函数的输出是(或者包含)经过修改的数据,这些数据可以在应用中向用户展示。

我们可以用类似的方法获得随机三篇文章,并且计算距离好友生日的天数。

函数式的方式是:将原始数据传递给一个函数或者多个函数,获得对你的项目有用的数据格式。

4. 面向对象的方式

对于编程初学者和 JavaScript 初学者,面向对象的概念可能有点难以理解。其思想是,我们要将每个好友变成一个对象,这个对象能够生成你一切开发者需要的东西。

你可以创建一个对象,这个对象对应于某个好友,它有 fullName 属性,还有两个函数 getThreeRandomPosts 和 getDaysUntilBirthday。

function initializeFriend(data) {
 return {
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from data.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use data.birthday to get the num days until birthday
 }
 };
}
const objectFriends=data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

面向对象的方式就是为数据创建对象,每个对象都有自己的状态,并且包含必要的信息,能够生成需要的数据。

5. 这跟 this 有什么关系?

你也许从来没想过要写上面的 initializeFriend 代码,而且你也许认为,这种代码可能会很有用。但你也注意到,这并不是真正的面向对象。

其原因就是,上面例子中的 getThreeRandomPosts 或 getdaysUntilBirtyday 能够正常工作的原因其实是闭包。因为使用了闭包,它们在 initializeFriend 返回之后依然能访问 data。关于闭包的更多信息可以看看这篇文章:作用域和闭包(https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md)。

还有一个方法该怎么处理?我们假设这个方法叫做 greeting。注意方法(与 JavaScript 的对象有关的方法)其实只是一个属性,只不过属性值是函数而已。我们想在 greeting 中实现以下功能:

function initializeFriend(data) {
 return {
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from data.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use data.birthday to get the num days until birthday
 },
 greeting: function() {
 return `Hello, this is ${fullName}'s data!`
 }
 };
}

这样能正常工作吗?

不能!

我们新建的对象能够访问 initializeFriend 中的一切变量,但不能访问这个对象本身的属性或方法。当然你会问,

难道不能在 greeting 中直接用 data.firstName 和 data.lastName 吗?

当然可以。但要是想在 greeting 中加入距离好友生日的天数怎么办?我们最好还是有办法在 greeting 中调用 getDaysUntilBirthday。

这时轮到 this 出场了!



6. 终于——this 是什么

this 在不同的环境中可以指代不同的东西。默认的全局环境中 this 指代的是全局对象(在浏览器中 this 是 window 对象),这没什么太大的用途。而在 this 的规则中具有实用性的是这一条:

如果在对象的方法中使用 this,而该方法在该对象的上下文中调用,那么 this 指代该对象本身。

你会说“在该对象的上下文中调用”……是啥意思?

别着急,我们一会儿就说。

所以,如果我们想从 greeting 中调用 getDaysUntilBirtyday 我们只需要写 this.getDaysUntilBirthday,因为此时的 this 就是对象本身。

附注:不要在全局作用域的普通函数或另一个函数的作用域中使用 this!this 是个面向对象的东西,它只在对象的上下文(或类的上下文)中有意义。

我们利用 this 来重写 initializeFriend:

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const numDays=this.getDaysUntilBirthday() 
 return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
 }
 };
}

现在,在 initializeFriend 执行结束后,该对象需要的一切都位于对象本身的作用域之内了。我们的方法不需要再依赖于闭包,它们只会用到对象本身包含的信息。

好吧,这是 this 的用法之一,但你说过 this 在不同的上下文中有不同的含义。那是什么意思?为什么不一定会指向对象自己?

有时候,你需要将 this 指向某个特定的东西。一种情况就是事件处理函数。比如我们希望在用户点击好友时打开好友的 Facebook 首页。我们会给对象添加下面的 onClick 方法:

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const numDays=this.getDaysUntilBirthday() 
 return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

注意我们在对象中添加了 username 属性,这样 onFriendClick 就能访问它,从而在新窗口中打开该好友的 Facebook 首页。现在只需要编写 HTML:

<button id="Bob_Ross">
 <!-- A bunch of info associated with Bob Ross -->
</button> 

还有 JavaScript:

const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

在上述代码中,我们给 Bob Ross 创建了一个对象。然后我们拿到了 Bob Ross 对应的 DOM 元素。然后执行 onFriendClick 方法来打开 Bob 的 Facebook 主页。似乎没问题,对吧?

有问题!

哪里出错了?

注意我们调用 onclick 处理程序的代码是 bobRossObj.onFriendClick。看到问题了吗?要是写成这样的话能看出来吗?

bobRossDOMEl.addEventListener("onclick", function() {
 window.open(`https://facebook.com/${this.username}`)
})

现在看到问题了吗?如果把事件处理程序写成 bobRossObj.onFriendClick,实际上是把 bobRossObj.onFriendClick 上保存的函数拿出来,然后作为参数传递。它不再“依附”在 bobRossObj 上,也就是说,this 不再指向 bobRossObj。它实际指向全局对象,也就是说 this.username 不存在。似乎我们没什么办法了。

轮到绑定上场了!



7. 明确绑定 this

我们需要明确地将 this 绑定到 bobRossObj 上。我们可以通过 bind 实现:

const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossObj.onFriendClick=bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

之前,this 是按照默认的规则设置的。但使用 bind 之后,我们明确地将 bobRossObj.onFriendClick 中的 this 的值设置为 bobRossObj 对象本身。

到此为止,我们看到了为什么要使用 this,以及为什么要明确地绑定 this。最后我们来介绍一下,this 实际上是箭头函数。

8. 箭头函数

你也许注意到了箭头函数最近很流行。人们喜欢箭头函数,因为很简洁、很优雅。而且你还知道箭头函数和普通函数有点区别,尽管不太清楚具体区别是什么。

简而言之,两者的区别在于:

在定义箭头函数时,不管 this 指向谁,箭头函数内部的 this 永远指向同一个东西。

嗯……这貌似没什么用……似乎跟普通函数的行为一样啊?

我们通过 initializeFriend 举例说明。假设我们想添加一个名为 greeting 的函数:

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 function getLastPost() {
 return this.lastTenPosts[0]
 }
 const lastPost=getLastPost() 
 return `Hello, this is ${this.fullName}'s data!
 ${this.fullName}'s last post was ${lastPost}.`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

这样能运行吗?如果不能,怎样修改才能运行?

答案是不能。因为 getLastPost 没有在对象的上下文中调用,因此getLastPost 中的 this 按照默认规则指向了全局对象。

你说没有“在对象的上下文中调用”……难道它不是从 initializeFriend 返回的内部调用的吗?如果这还不叫“在对象的上下文中调用”,那我就不知道什么才算了。

我知道“在对象的上下文中调用”这个术语很模糊。也许,判断函数是否“在对象的上下文中调用”的好方法就是检查一遍函数的调用过程,看看是否有个对象“依附”到了函数上。

我们来检查下执行 bobRossObj.onFriendClick() 时的情况。“给我对象 bobRossObj,找到其中的 onFriendClick 然后调用该属性对应的函数”。

我们同样检查下执行 getLastPost() 时的情况。“给我名为 getLastPost 的函数然后执行。”看到了吗?我们根本没有提到对象。

好了,这里有个难题来测试你的理解程度。假设有个函数名为 functionCaller,它的功能就是调用一个函数:

functionCaller(fn) {
 fn()
}

如果调用 functionCaller(bobRossObj.onFriendClick) 会怎样?你会认为 onFriendClick 是“在对象的上下文中调用”的吗?this.username有定义吗?

我们来检查一遍:“给我 bobRosObj 对象然后查找其属性 onFriendClick。取出其中的值(这个值碰巧是个函数),然后将它传递给 functionCaller,取名为 fn。然后,执行名为 fn 的函数。”注意该函数在调用之前已经从 bobRossObj 对象上“脱离”了,因此并不是“在对象的上下文中调用”的,所以 this.username 没有定义。

这时可以用箭头函数解决这个问题:

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const getLastPost=()=> {
 return this.lastTenPosts[0]
 }
 const lastPost=getLastPost() 
 return `Hello, this is ${this.fullName}'s data!
 ${this.fullName}'s last post was ${lastPost}.`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

上述代码的规则是:

在定义箭头函数时,不管 this 指向谁,箭头函数内部的 this 永远指向同一个东西。

箭头函数是在 greeting 中定义的。我们知道,在 greeting 内部的 this 指向对象本身。因此,箭头函数内部的 this 也指向对象本身,这正是我们需要的结果。

9. 结论

this 有时很不好理解,但它对于开发 JavaScript 应用非常有用。本文当然没能介绍 this 的所有方面。一些没有涉及到的话题包括:

  • call 和 apply;
  • 使用 new 时 this 会怎样;
  • 在 ES6 的 class 中 this 会怎样。

我建议你首先问问自己在这些情况下的 this,然后在浏览器中执行代码来检验你的结果。

原文地址:https://mp.weixin.qq.com/s/L9eac6rzkSE_JqxXyg3FQw

020 年的技术热潮之下,我们该如何迎刃而上,需要具备哪些技术栈?如果你是一名前端开发者,不妨通过本文了解顶级的 JavaScript 框架以及未来趋势预探,来升级自己的技能吧!

作者 | Eric Elliott

译者 | 苏本如,责编 | 屠敏

头图 | CSDN 下载自视觉中国

出品 | CSDN(ID:CSDNnews)

以下为译文:

如果你想找到一份很棒的JavaScript工作,或者赶上2020年的重要技术,以及今后十年的重要技术,那么这篇文章就是为你准备的。本文的重点不是告诉你哪些技术堆栈和框架是“最佳”,最受大家喜爱或者最受欢迎的技术,而是告诉你哪些技术堆栈和框架能够为你提供在2020年及以后获得一份出色工作的最佳机会。

我们将研究以下不同来源的数据:

  • 谷歌搜索的趋势:https://trends.google.com/trends/

  • State of JS调查报告:https://2019.stateofjs.com/

  • Stack Overflow调查报告:https://insights.stackoverflow.com/survey/2019

  • Npm下载量:https://npm-stat.com/charts.html?package=react&package=vue&package=%40angular%2Fcore&package=svelte&package=jquery&from=2015-12-30&to=2019-12-30

  • Indeed.com上发布的空缺职位总数:https://www.indeed.com/

这些指标都不是完美的,但就本文的目的而言,npm下载次数和Indeed.com职位发布数量应该给予最大的权重,当我们综合考虑这些指标时,它们可以清晰、一致地描绘JavaScript技术的前景和趋势。根据这些指标选择一个学习框架是一个好主意吗?那首先要取决于你的目标是什么。

因为我们有一个明确的目标:求职者学习的投资回报率。这就使得这项任务比告诉你什么对每个人都是最好的要容易得多。虽然没有一种方法是万能的,但客观地定义什么可以最大程度地实现特定的具体目标是很容易的。让我们来看看一些数据。

首先,学习JavaScript

在你过多地担心技术堆栈之前,请先学习JavaScript以及如何使用它来编写软件。如果你无法解释什么是函数组合、对象组合和模块,请从这里开始。所有的软件开发都是某种组合:我们把一个大的、复杂的问题分解成一些小的问题,然后使用软件构建块(如函数、对象、模块等等)来解决它们。我们将这些解决方案组合起来形成我们的应用程序。从2020年开始,请充分理解JavaScript和软件组合。

React在2019年占据主导地位,2020年可能继续

我喜欢npm下载量这个指标,因为它很好地表明了框架的活跃使用情况(*)。行业常用框架统计给于npm下载量的权重非常之高,原因是因为用户需要在其本地机器上运行npm install。

此处jQuery被排除在外,原因是许多jQuery项目都是不使用npm的旧项目,因此无论如何它都会被严重低估。Svelte被包括进来,是为了提供一些有关其在市场上的相对地位的见解,并解释其在其他图表中的缺失。目前还没有足够的数据让Svelte在图表中显示有意义的内容。例如,在Google搜索趋势中,它还不是一个可用的主题。

空缺职位总数

下面这张图表显示了各特定框架的当前空缺职位总数统计(*):

2019年12月各UI框架空缺职位统计(数据来源:indeed.com)

与去年相比,React扩大了领先优势,而Angular和jQuery都输给了Vue。下面是一个饼图,显示了每个框架的相对就业市场份额:

顶级框架的就业市场份额

JavaScript开发人员的平均工资在2019年再次增长,从每年的11.1万美元增加到每年的11.4万美元(这里是数据来源)。

(*)统计方法:职位搜索是在indeed.com网站进行的。为了排除误报,我将搜索与关键字“software”配对,以增强其相关性,然后乘以~1.5(大致相当于使用“software”和不使用“software”的编程职位列表之间的差异)。所有搜索结果页(SERPs)都按日期排序并抽查其相关性。得到的数字并非100%准确,但对于本文中使用的相对近似值来说,它们已经足够好了。

谷歌搜索趋势

数据来源:https://trends.google.com/trends/explore?date=2017-01-01%202019-12-01&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp

正如你所料,搜索兴趣(*)反映了就业市场份额,但存在一些有趣的差异。我们可以清楚地看到,从2017年到现在,人们对jQuery的兴趣在减弱,并且Vue.js搜索兴趣正在强劲增长。以下是各框架在谷歌搜索统计中所占的份额:

上图与职位空缺的统计结果一致:React拥有强大的领先优势,吸引了36%的前端框架搜索量,其次是Angular(约占27%)和jQuery(约占25%)。对Vue.js的搜索兴趣远远大于它在就业市场的份额,但该数据与排名中的就业市场数据基本一致。看来我们已经成功地证实了这一点。

(*)统计方法:对于所有搜索,数据都是按主题收集的,而不是按搜索词收集,以便从无关的关键字匹配中剔除误报。

未来值得关注的框架

现在更多的职位需要具有React框架技能,而不是其他受欢迎但使用不那么广泛的框架,如Svelte或Vue,这两个框架都有很高的满意度,但行业采用率相对要小得多。

学习Svelte或Vue框架可能会很酷。但是如果你的目标是找到一份工作,那么如果先学习React,你会有更好的机会。

话虽如此,在《2019年JavaScript状态调查报告》中,Svelte和Vue的用户满意度得分都非常高。在过去,React框架的高用户满意度得分预示了它相对于Angular框架的快速增长。Angular框架在当时也占据了主导地位,但其用户满意度得分却相对较低。

在2019年,React框架的用户满意度排名最高,达到89%。紧跟其后的包括Svelte(88%)和Vue.js(87%,低于上一年的91%)。Svelte或Vue不太可能会抢走足够的React用户,但是许多仍在使用Angular和jQuery的用户,他们可能会转而使用Svelte或Vue,从而在2020年推动这两个框架的进一步强劲增长。

可以肯定的是,掌握React框架将会增加你的机会,帮助你在2020年找到并守住一份很棒的工作。

TypeScript vs JavaScript

毫无疑问,在过去几年中,TypeScript的发展非常迅速,根据JavaScript现状调查报告(State of JS Survey),89%的TypeScript用户会再次使用它,66%的调查对象要么使用TypeScript,要么对使用TypeScript感兴趣(比最低年份的71%略有下降)。

但是,尽管人们的兴趣确实很强,并且使用率似乎正在迅速增长,但在就业市场上,拥有TypeScript方面的经验还不是很抢手。只有大约7%的JavaScript空缺职位的职位描述中提到TypeScript(数据来源)。这个数字对TypeScript的职位需求可能有些低估,因为招聘经理们希望JavaScript开发人员能够轻松地使用TypeScript,因此他们有可能不会在工作岗位描述中提及TypeScript。

我坚持认为TypeScript语言的投资回报率可能较低甚至为负。它可能会损害而不是提高你的生产率,并且,如果你已经在使用诸如TDD,代码审查和设计审查等优秀的缺陷预防工具,那么使用TypeScript编写代码不太可能带来明显的降低缺陷的好处。

话虽如此,TypeScript有很多值得热爱的地方,你当然不应该害怕它,或者拒绝一份工作,仅仅因为它们使用的是TypeScript而不是JavaScript。另外TypeScript是JavaScript的超集,因此从JavaScript转到TypeScript并不像学习完全不同的语言那样具有挑战性。

你可能不需要学习TypeScript语言就可以在2020年的就业市场竞争中脱颖而出,但是TypeScript引擎非常有用,即使对于标准JavaScript也是如此。

我每天都使用TypeScript引擎为使用VS Code编写的标准JavaScript提供智能感知(Intellisense)。甚至可以使用JSDoc(TypeScript引擎能够理解和解释JSDoc,就像解释类型注释一样)或外部d.ts文件来增强这种智能感知,并且VS Code将自动获取你使用的模块的TypeScript定义。

多年来我一直使用并享受TernJS和Atom的组合带来的类似的好处,但是这种组合缺少TypeScript引擎 + VS Code的维护和社区支持。

如果您尚未尝试使用Visual Studio(VS) Code,你可能要从那里开始。顺便说一句,根据JS现状调查的受访者的反馈,VS Code占据了JavaScript IDE市场的主导地位,市场份额为57%,其次是WebStorm,市场份额为14%。

数据管理

Redux在状态管理器的竞赛中仍然处于领先地位,但是GraphQL和Apollo在满意度和兴趣上都有所提高。预计GraphQL在2020年将持续增长。

也就是说,即使你在使用GraphQL,我仍然认为有充分的理由来学习Redux状态管理,而且我认为每个人都会从学习Redux中受益,即使他们不使用这个框架。

GraphQL是近年来流行的一种查询语言。它具有简单的语法,但是因为它是跨整个堆栈使用的,并且学习它需要学习如何将它连接到数据存储层,因此集成起来可能令人生畏,但值得付出努力。

GraphQL不会在短期内完全取代JSON REST API,但是它在2019年的增长很快,我预计其强劲增长将持续到2020年。

后台框架

Express是占主导地位的Node框架,它的满意度非常高,到2020年也不会有强劲的挑战者,但是随着无服务器(serverless)的兴起,我希望随着新的十年的到来,Express的统治地位将逐渐下降。

Next.js是一个全栈React框架,最初是在Express之上构建的,但此后从Express切换到无服务器和静态优化,它像发疯似地快速增长起来。

当我们将EricElliottJS.com从Express切换到无服务器的Next.js时,我们的主机托管费用减少了90%,并且页面加载速度变得更快。所以我无论多么强烈推荐它都不过分。现在,对于所有的应用程序,我们都使用了Next.js和Zeit托管。

测试

Jest和Cypress分别在单元测试和功能测试中最受欢迎,但是我非常喜欢RITEWay和TestCafe。RITEWay是一个测试框架,它始终回答每个单元测试必须回答的5个问题。

TestCafe和Cypress一样,是一个功能测试工具。有了它,你就不再需要和Selenium抗争,它具有更好的跨浏览器支持和出色的测试记录器/集成开发环境(IDE)。我强烈建议QA团队尝试TestCafe。

功能性工具

Lodash,Ramda,Immer,Redux和RxJS是我经常使用的功能性工具。

Ramda在2019年取得了长足发展,并提供了Lodash所不具备的一些特性,包括lense和transducer。RxJS通过其管道化运算符提供了transducer样式功能。

Immer使得在JavaScript对象上操作因无需对其进行转换而变得更加容易。Redux是一个状态管理工具。

2020年的科技预览

在未来十年,有几项新兴技术将对人类生活产生巨大影响。以下是这些技术的最新概况:

人工智能

人工智能可能是有史以来最具变革性的技术。许多学者和自以为是的亿万富翁们都将人工智能描述成一个神奇的乌托邦,或者说是人类的末日。

正如我们所知,它当然可能是人类的终结,但也可能是人类和机器之间完美合作的开始。我们才刚刚开始对人工智能可能会变成什么样有了粗浅的一瞥。其中有些很吓人(比如deep fakes换脸术),有些则非常有用(比如Adobe Premiere为视频编辑新推出的自动重构(auto-reframe)功能)。到目前为止,事实是人工智能既令人难以置信的可怕,又非常有用。人工智能将继续产生一些令人恐惧的东西,但是通过人工智能改善人类生活的潜力也是巨大的。潘多拉的盒子已经打开,再也无法关闭了,所以我希望你能好好利用它来解决重要问题,改善我们的生活。

2019年人工智能领域有许多重要突破。近年来,研究团队一直在各种视频游戏中争夺超人的表现,但某些类别的游戏仍然对人工智能构成挑战,包括《星际争霸II》之类的长期战略游戏。DeepMind的AlphaStar程序(一种人工智能)已经在官方的Battle.net服务器上使用与人类玩家相同的资源,达到了顶级玩家的水平。《星际争霸》是一款复杂的游戏,涉及长期的战略思维,一度被认为超出了人工智能的能力。战略思维是走向通用人工智能的重要里程碑。

如果这些游戏看起来像是愚蠢地使用了资源,那么不妨考虑一下,像DeepMind这样的项目在文本到语音方面也取得了令人难以置信的进步,这可以让人工智能代理和私人助理发出更自然的声音,而且更重要的是,可以把声音还给失去它们的人类。

人工智能还被用于诊断癌症、预测蛋白质折叠(可用于了解疾病和发现新药)、恢复残疾人的肢体控制、生成逼真的照片等(资料来源:https://www.stateof.ai/)。

无人驾驶汽车在变革性的人工智能技术中应该有自己的一席之地。这个生态系统中的主要参与者包括Cruise、优步、Waymo、Nuro、Aurora、福特等。现在它还处于初期,过分乐观已经给这个行业带来了真正的问题,但毫无疑问,我们将在21世纪20年代看到超越人类的自动驾驶能力。在2015年的时候,我对无人驾驶做出了如下预测:

“到2045年,一个人驾驶的小车看起来就像一匹马拉着的轻便马车。”

5年后,我想我可能低估了无人驾驶汽车的上市速度。2018年,Waymo汽车的行驶里程超过100万英里,美国24个城市的公共道路上都有无人驾驶汽车在行驶。今天,我预计到2025年,来自多家制造商的多种车型将实现5级完全自动驾驶。请关注特斯拉、通用、福特和宝马。

在过去的十年中,人工智能研究论文的发表量增长了10倍,现在人工智能正把实用、有帮助的工具交到主流用户手中,预计这一趋势将持续到新的十年。

我们已经开始看到人工智能做了很多几年前大多数人都不敢相信的事情。期待人工智能在下一个十年创造出更加惊人的奇迹。

区块链和加密货币

2019年是区块链和加密货币领域具有里程碑意义的一年。区块链技术开始进入主流。我预计2020年会有更多的增长和主流采用。

DeFi(去中心化金融)爆炸式增长,实现了用户友好,无许可,无银行借贷。目前DeFi合同的总金额已经有6.5亿美元(包括4.5亿美元的无银行贷款),而2019年只是这项技术可用的第一年。随着越来越多的人投资于加密货币,我预测未来会有更多的加密货币支持的DeFi贷款。

人们可以在不牺牲其加密投资机会成本的情况下获得流动性,或使用DeFi贷款以杠杆效应投资加密货币(增加其投资的风险/回报)。

加密货币和区块链技术正在突破主流。比特币和以太坊的每日活跃地址在2018年1月达到峰值,随后一年由于市场低迷而兴趣减弱(每上涨10倍,加密货币的价格就会大幅回落,然后在下一个周期比之前的峰值再高出10倍)。

比特币和以太坊区块链上的每日活动地址统计(数据来源:https://coinmetrics.io/charts/#assets=btc,eth_log=false_roll=90_left=AdrActCnt_zoom=1279411200000,1577836800000)

  • Square的Cash App拥有超过1000万次的安卓版下载量。用户可以在一个拥有出色用户体验的简单应用程序中购买、出售、发送和接收比特币。

  • Coinbase的安卓版下载量超过1000万次。

  • Brave推出了内置以太坊钱包,每月活跃用户(MAU)的数量从10月的870万增加到11月底的1040万。

  • 借助Sliver.tv和DLive,2000万视频游戏迷正在使用Theta网络进行分散流媒体播放。

2019年我最喜欢的变化是Fortmatic的引入。无论你是否正在构建加密应用程序,你都可以使用Fortmatic来替代你的用户身份验证并提高安全性、你还可以摆脱供应商锁定,并添加诸如端到端加密、签名事务等功能。

如果你打算在2020年构建一个新的应用程序,考虑使用Fortmatic,而不是重复使用你自己的用户名/密码认证(2020年应该没有人再这么做),或者将身份认证授权给谷歌、Facebook等。

我写过一篇文章,讨论如何利用加密技术来改善应用程序的身份验证和安全性。我很期待看到主流应用在2020年采用像Fortmatic这样的技术。

以太坊在2019年轻松赢得了智能合约平台竞赛。我预计它将在2020年继续占据主导地位。

扩展现实(XR)

从2015年开始,我每年都会写一篇关于对AR(增强现实)的期许的文章,从小我就一直梦想着它的实现。未来,扩展现实(XR)将取代手机。这只是时间问题。但是还需要多久是个悬而未决的问题。但现在看来这种转变可能在未来十年内出现。甚至可能在未来5年内开始。

由于虚拟现实(VR)和增强现实(AR)之间的界限已经模糊,因此业界现在将整个领域称为扩展现实(XR)。自推出以来,ARKit和ARCore(苹果和谷歌的增强现实SDK)增长量惊人。从2017年到2019年5月,每月活跃用户从4,700万增长到了1.5亿。

WebAR在2019年站稳了脚跟,并且有可能在2020年继续增长。如果你好奇的话,可以查看AR.js、React 360或Viro React。

硬件方面也有了长足进步。HoloLens 1在2016年首次发布开发者版本时,售价约为5,000美元。在那以后发生了什么?

HoloLens 2仍然只售3,500美元,而且还没有为消费者做好准备。剪辑、防抖动和漂移、视场等方面仍然存在问题,你不会想整天穿着这些东西。不过,由于99美元/月的定价,获得一个开发者版本变成了一个可能性,即使你不得不在等待名单等上一段时间。

无人机

大约200万架无人机已经在美国售出,它们已经改变了建筑、地理调查、测绘、电影、航空摄影、农业、环境科学和娱乐业。很有可能,商用无人机的交付最终将于2020年在美国实现。。

FPV无人机比赛是我最喜欢的观赏性体育运动,无人机比赛联盟的直播流比赛也是。如果你想了解它是什么样的,他们也有一个精心设计的模拟器。

所有这些新的无人机活动都需要很多软件,包括图像处理、无人机地图软件、交付飞行计划、遥测记录和处理、分析、工业应用集成等。

无人机和人工智能也有很多重叠之处。自动飞行的无人机需要图像处理、避免碰撞等。

结论

21世纪10年代给我们带来了许多变革性的技术,它们当中的许多我们已经视为理所当然,但是产生了巨大影响:

  • Instagram

  • Spotify

  • 优步

  • 虚拟助理

  • 无线耳塞

  • 主流虚拟现实

  • 增强现实(如在突破命中游戏“神奇宝贝”中所用)

  • 价格合理的特斯拉

  • 共享经济(汽车、踏板车、自行车)

  • 主流平板电脑

  • 主流生物识别技术(触摸识别、面部识别)

  • 众筹

我迫不及待想看到你在新的十年里的发展。

让我们变魔术吧!

原文:https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2020-and-the-new-decade-ced6e9d812f9

本文为 CSDN 翻译,转载请注明来源出处。