2018年最值得关注的JavaScript趋势

Dear 丶 2022-05-31 00:29 216阅读 0赞

# 转载 2018年01月05 #

JavaScript 渗透的范围越来越广，它能做的事情已经远不止前端开发而已。不久前 stateofjs.com 刚刚发布了 2017 JavaScript 现状报告，现在 Ryan Chartrand 非常应景地推出了2018 年的 JavaScript 发展趋势，把这两份文章一起结合来看，相信作为 JS 开发者的你一定不再迷茫。

如果你 2017 年一整年都与世隔绝或者忙于项目而自顾不暇的话，这篇文章就是给你准备的。

2017 年发生的很多事情正在为 2018 年的许多行动和创新做好准备。你还可以把本文用作规划个人成长的指南，来推出更具创新性的项目。

**React vs. Vue.js**

![SouthEast][]

我们开门见山吧：认为 Vue 可能会成为 React 的一大竞争敌手的人不是很多，但是今年想要无视 Vue 是不可能的，在开发者的炒作方面甚至令 Angular 黯然失色。

展望 2018 年的时候，我们即将迎来 2 年的激烈竞争，而对 Vue 的炒作会非常多。

React 有着全球最富有公司之一的财政支持，更不用说他们还有极其有才的维护人员。

**但是 Vue 做了下面这些让开发者真心高兴的事：**

Vue 轻量，容易学习，有着令人难以置信的工具，有很棒的状态管理和路由内置（！）等等。

Vue 的社区当然还没有 React 那么大，但从核心团队是否有很好的使者并且是否倾听客户来看，这个社区正在壮大。

谈到取悦开发者，不要忘了 Facebook 今年在 BSD+Patents 的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。

我们现在其实已经发展到你一样可以通过 Vue 启动任何项目来让自己生活变得简单的程度，这是他们的核心团队取得的一项令人印象深刻的成就。

这里有一篇文章对 React、Vue 和 Angular 进行了很好的对比。

**最终可能会发展成什么样子？Facebook 会做它最擅长的东西：抄袭创新者然后世界继续使用 React。**

如果你是一位拒绝学习 React 的 Angular 开发者，随着 Angular 的机会日渐消亡，Vue 应该迅速成为你职业生涯更好的选项（而且 Vue 的部分语法跟 Angular 类似）。

每一位 JS 开发者都仍然应该考虑学习 Vue.js，因为它已经制造了足够大的水花，现在我们开始看到对 Vue.js 开发者的需求出现，这意味着至少在短期内你能够为自己创造一些价值。

**Next.js**

然后就是 Next.js，我们称之为“React 的保险”。

尽管 Facebook 从未在这场游戏中领先过，并且在创新的势头上无法与 Vue 匹敌，但在工具使用、代码切割、路由以及状态管理方面，**React 加上 Next.js 能让你在体验上跟 Vue 接近许多**，此外还能让你获得大规模的 React 生态体系和支持。

Next 对于用 React 开发的 server-side 为主的应用也特别有用，二者在应用已经日益成为趋势。

此外，再加上 Now.js（由同一支团队开发）你就能得到超级快速的部署 React 应用的方式。

随着 Vue 与 React 之争的延续，预计会看到越来越多 Next 与 React 的双剑合璧，这会让 React 阵营的每个人都感觉舒服一点。

**Angular**

尽管 Angular 越来越难以取悦开发者，它仍将是 2018 年广受采用的框架之一。

许多公司采用了 Angular 1.0，随着 2018-19 年间他们寻求移植到更好的框架，这些会关注 React 或者 Vue 会不会是 Angular 2 更好的替代。

Angular 剩下的拥护者已经表态说 Angular 会成为企业选择的 JS 框架，但这一断言尚有待证实，而且在 2018 年未必能得到证实。

这里有你需要了解的 2017 年有关 Angular 的一切。

**Reason**

Facebook 生产使用的一切永远都值得关注。

Facebook 现在用 Reason 来开发 web 版的 Facebook Messenger 以及其他项目（Whatsapp、Instagram、Ads 等）。

2017 年，他们还推出了 reason-react，将 reason 跟 Reacy 绑定在一起，这样你就可以写出可编译成惯用 ReactJS 的 Reason 代码。

所以你可想象一下，不需要安装 Babel（+许多插件）、Flow 等，只需要 OCaml + Reason（现在已经支持 React 绑定）即可的强大。这是一个有待开发的一大趋势。

在 JS 领域 Reason 今年获得的注意力要比大部分的编译成 js 型语言多很多，所以这绝对是 2018 年值得继续关注的趋势之一。

**GraphQL**

GraphQL 是 API 的查询语言（可以看成是 REST 的现代版）。

GraphQL 没有辜负 2017 年的炒作，像 Yelp、Spotify、Github、沃尔玛、《纽约时报》等主流公司都在采用 GraphQL，而且现在还有了基于 GraphQL 的 API。

其中一些 API 甚至是专门支持 GraphQL 的，甚至连 REST 选项都没有。简而言之：**创新公司正在押注到 GraphQL 身上**。RESTful API 当然还远没到灭亡的地步，但再次地，看看初创企业的使用趋势就知道 GraphQL 是个热门选项。

另一方面，像 Falcor 这样的替代者几乎连讨论的声音都没有了。

如果你想在创新公司找份工作的话，现在绝对是开始学习 GraphQL 的时候。

**Redux、Relay Modern 以及 Apollo**

Redux 是一直很火的 Dan Abramov/Andrew Clark 项目，后来有迅速成为 React 状态管理和数据抓取的首选解决方案。

但 GraphQL 改变了现状，主要是在数据抓取方面。

我们现在有了 Relay Modern （Facebook 开发）和 Apollo，让你可以比 Redux 更高效地抓取并传递 GraphQL 数据到 React 应用的 GraphQL 客户端框架。

但就像一位开发者指出那样，Relay/Apollo/Redux：

这些框架和它们的好处未必需要是互斥的。实际上，这几个一起使用可以提供很好的关注分离，这是 web 开发来说可太重要了。

这意味着你仍然可以跟 Relay 一起用 Redux，Redux 用于本地状态管理以及一些复杂的非服务器状态，然后由 Relay 来抓取。

但是社区对简化这个的东西（目前为止唯一的答案是 Vue.js 或者 Cashay）比较焦虑。

**Storybook**

哇哦，2017 年 Storybook 真的是火了。

Storybook 是一个定义、开发和测试 UI 组件的环境。

![SouthEast 1][]

它从年初的几乎一潭死水变成年中的大规模流行，这要感谢社区的巨大努力。这是一个极其激励人的故事，展现出了开源工作应该如何演进，它的故事真的值得一读。

Storybook 太有用了（而且用起来也很有趣），你可以单独地开放和测试 UI。它就像一本实时的 UI 设计指南，能够为开发者提供真正的价值。

你可能已经碰到过用 Storybook 来设计的开源项目了，但如果想自己看看它是怎么用的话，那就看看用 Storybook 设计的 Airbnb 的日期选择器。

作为开发者如果你想在 2018 年脱颖而出，那就在面试的时候用 Storybook 展示你的最新项目。

额外提示：建议你也看看 react-bluekit，这是 Storybook 的替代，Netflix 的工程团队用来设计他们的组件库。

**Prettier**

就像它的名字一样，Prettier 是一个代码格式化程序，可以让你的代码可读性更强，并且很好看。

foo (reallyLongArg ()， omgSoManyParameters ()， IShouldRefactorThis ()， isThereSeriouslyAnotherOne ());

变成：

foo (  
reallyLongArg (),  
omgSoManyParameters (),  
IShouldRefactorThis (),  
isThereSeriouslyAnotherOne ()  
);

这个东西在 GitHub 上面得到了 18000 颗星，开发者都很喜欢这个简单又有价值的项目。

它还被用到了许多其他你热爱的项目上，比如 Webpack、React、Next.js、Babel 等。

再次地，你可以成为一名 Go 开发者，这样就不用安装这个也能享受它的功能了。

**Jest 和 Enzyme**

说到 JavaScript 测试，Jest 无疑是领先的那个，而 Enzyme 则是很好的补充，尤其是在开发 React 应用的时候。

就像你在这里看到一样，在下载方面 Jest 现在统治着 Jasmine。

Jest 的 Snapshots 功能在 2017 年真的起来了，使得处理测试的痛苦少量很多。你可以看看 React Conf 2017 的这次演讲来了解它的一切。

由 Airbnb 工程团队开发的 Enzyme 是一个测试 React 组件的 JavaScript 库。自从 2016 年以来它已经在 GitHub 上面拿到了 12000 颗星。

Jest 和 Snapshots + Enzyme 超级简单的 React 组件测试 API 形成了一个很强的测试组合，会在 2018 年不断流行起来。

**Webpack**

Webpack 已经崛起为最流行的资产打包工具。Webpack 还经历了不可思议的一年。

去年的这个时候，Webpack 还几乎连文档都没有，大部分的开发者都不知道该怎么开始用它。

然后，到了今年年头的时候，我写了篇文章，说 Webpack 在 3 个月内就拿到了 15000 美元来支撑这个项目是如何的不可思议。而他们现在已经拿到了几十万美元的融资了。

Webpack 不仅为开源项目如何走向繁荣铺好未来，而且这个项目一整年都维持了很旺盛的发展势头。

谢天谢地，Sean Larkin 还在领导着 Webpack，所以 Webpack 能够取得下一个成就还没有结束的迹象。

因为这该项目得到的支持如此之好（以及他们对社区的关心程度如此之高），所以 2018 年最好预测的趋势就是它了。

**Parcel**

但每一个大规模的趋势发展的同时，也会有不满开发者队伍的日益壮大。

Parcel，一个有竞争力的打包工具，也相当迅速地获得了发展势头，目前它已经在 GitHub 上面攒到了 12000 颗星，开始直接威胁到 Webpack 的江湖地位。

Parcel 的卖点是别的打包工具都变得太庞大了，而 Parcel 的打包速度是 Webpack 的 2 倍（使用缓存的时候快 10 倍）。

它还针对 Webpack 多少有点令人困惑的配置设置，而 Parcel 却不需要配置。

只用把你应用的入口点指给它，它就会把事情做对了。

尽管简化配置和改善速度都是很好的改进，如果 2018 年上半年 Webpack 没有抄这些改进的话我不会感到奇怪。

类似于 Vue 与 React 之争，这个小家伙总是创新得更快，但要取决于大家伙会不会受到哪些创新的灵感启发而改进自己的项目。

**Gatsby**

Gatsby 是 Kyle Mathews 开发的用于 React 的静态网站生成器。

自从 Kyle 去年全职开发 Gatsby 以来，这个东西开始真正获得发展势头。

React 网站本身就是用 Gatsby 开发的，再也有没有比这更有力的证明了。

Gatsby 的全部关切都在于性能和给 React 提供尽可能快的 web 体验。

他们网站的这张图可以让你了解到它大概是怎么工作的：

![SouthEast 2][]

Gatsby 还利用先进的 web 技术替其他网页预抓取资源，使得浏览起来快如闪电。

尽管 Gatsby 无论如何也不会统治这个行业，但却是开发快速静态网站非常出色的解决方案，会不断流行下去。

要想更多了解 Gatsby，可参考这篇文章。

**Babel**

到现在 Babel 已经没有介绍的必要了，大体上它仍将成为趋势延续下去。

总而言之，2017 年对于 Babel 来说是个好年，它的精力主要都集中在 Babel 7 的开发上面（希望能在 2018 年初发布）。最重要的是，他们写了一首歌:)

Babel 目前唯一的担心是 Reason 日益成为主流。

但目前为止，Babel 还会在 2018 年延续强劲走势。

**Flow & Typescript**

Typescript 和 Flow 都是 JavaScript 开发者很好的静态类型选项，可以用来改进其代码质量。

我们未必会在 2018 年看到谁摧毁谁的情形，所以它们还会一起共存，各自服务于不同的用例。

Facebook 开发的 Flow 是 React 开发者的优先选择，因为它很容易跟 Babel 集成，在 React 项目中也使用得很普遍。

微软开发的 TypeScript 在 Angular 2+ 开发者当中很流行，因为它是主要语言。

2018 年这两个的发展可能会停滞，现在真正的问题是 Reason 今后会不会取代了这两个。

**Immutable.js**

有一位 reddit 网友是这样描述的，我很喜欢这种说法：

immutableJS 确保了大型团队的开发者不会做一些愚蠢的事情。

简而言之：Immutable.js，Facebook 的另一个项目，确保了状态不会因为使用不可变对象而发生突变。

正如我们的 redditor 网友指出那样，这对于大型团队的开发者会极其有用，因为这些人经常会无意识地搞乱了状态。

封装在 Immutable.JS 对象里面的数据是永远也不会变的。它总会返回一份新的拷贝。这跟 JavaScript 形成了羡慕对比，后者的一些操作不会改变你的数据（比方说一些数据方法，包括 map、filter、concat、forEach 等），但有的就会（Array 的 pop、push、splice 等）。

使用 Immutable.JS 有相当大的限制，但视你的需求不同，那些限制未必有关系。你可以通过这篇文章了解更多。

在 GitHub 上拿到了 20000 多颗星的 Immutable.js 已经在 2017 年崛起，预计还会延续到 2018 年，因为开发者正在花时间理解其中的概念和权衡。

**Popmotion**

Popmotion 是一个在 GitHub 上迅速赢得星星的 JavaScript 动画库。

可以把它想象为 Flash 预见了 jQuery。

现在，我意识到在一句话里面用这两个词对推销这个日益流行的库并没有帮助。

但你对这个库的研究越深，你就越会发现有一群人对 jQuery 和 Falsh 都有极深的抱怨，迫切需要让情况变好一点。

而 Popmotion 真的体验要好很多，在 web 动画方面有了很多的创新。这无疑是 2018 年值得关注的趋势之一。

你可以到这个网站一探究竟。

**React Native & Electron**

React Native 让你可以针对移动设备开发 React 应用，而 Electronlets 则可以让你针对桌面开发 JavaScript 应用。

这两个框架在 2017 年均站稳了脚跟，也都是从 JavaScript 到原生应用很好的解决方案。

一些用 Electron 开发的知名 app 包括：Slack、Atom、Github Desktop 以及 Discord。

用 React Native 开发的流行应用包括：Facebook、Instagram、Airbnb 以及 UberEATS。

你现在还可以开发 Windows 版的 React Native 应用。

无论如何现在都是 JavaScript 开发者的好时光，考虑现在你开发桌面和移动 app 已经比过去容易多了。

**额外提示：Web Assembly**

**2018 学习材料**

看完了前面介绍的所有这些趋势后，下面我们推荐一些 2018 年的学习资料，不断学习与时俱进才能保持作为远程开发者的竞争力并且发挥潜能：

勇敢去学 Vue.js 吧

每一位 React 开发者都应该学习 Next.js

开始学习 Reason（以及 Reason React）然后做个业余项目试试吧。

GraphQL 必须列入你的 2018 待办事宜清单。

跟着 Relay Modern 学，这是 React+GraphQL 应用的数据抓取选项之一。

Storybook！Storybook！Storybook！

在一个项目上安装 Prettier，让你的代码可读性更强。

在一个 React 项目上学习使用 Jest 截屏及 Enzyme。

学习 Flow（React 开发者）或者 TypeScript（其他人）。

考虑用 Gatsby 把 Markdown 文本转换成静态页面。

用 React Native 开发一个移动 app。

用 Electron 开发一个桌面 app。

玩一下 Popmotion 创作一个流畅的动画。

把这个资源清单导入为 Todoist 项目。

[SouthEast]: /images/20220531/80d4b321baee4ecdb25e16f26cb4e563.png
[SouthEast 1]: /images/20220531/981d3131f65443e09c2c6b69b8cbea3c.png
[SouthEast 2]: /images/20220531/fd8d50ec535344c384e0612f2598eaa2.png