一年一度的DiscovertheStateofJS2020结果日前发布。每次看这份报告，都能快速了解这一年的JavaScript世界。发生了什么事，也给了我一次查漏补缺的机会，让我受益匪浅。今年，我打算将这份报告中“语法”和“框架”两部分发布的信息，以文字的形式快速分享给大家，希望对大家有所帮助和启发。今年的调查涵盖了137个国家/地区的23,765人，其中大多数受访者来自美国或西欧。举报地址：https://2020.stateofjs.com/en...。1.Features这部分，我会总结归纳ES6以来新的语法特性的使用，偶尔也会发表一些自己的看法。如果您对某项内容有自己的看法，欢迎您在文章评论区下方留言。请注意，每个语法功能背后的百分比代表使用过该功能的受访开发人员的百分比。1.1语法特征在语法特征方面，Destructuring（89.1%）、SpreadOperator（92.8%）、ArrowFunctions（97.9%）等廉价、易用、大碗的语法特征已经被开发者使用。然而，NullishCoalescing(45.3%)和OptionalChaining(66.7%)等同样有用的语法特征似乎并没有得到普及和广泛使用。不想代码里有难看的a&&a.b&&a.b.c判断器，直接从a?.b?.c开始，真的很别致很酷。不出所料，PrivateFields（10.9%）的语法特性不仅用的人不多，而且有43.9%的受访开发者表示从未听说过。特地查了一下，发现这个语法特性是在ES2020草案中提出的，目前Firefox、IE、Safari都不支持。但是这个语法特性意味着JavaScript最终将在语法层面拥有私有类字段。很高兴看到JavaScript这种基于原型链的语言在OOP范式上又向前迈进了一小步。不知道Java开发者不知道他们会不会很不开心？1.2语言特性Async/Await（95.2%）、Promises（96.2%）等老式的异步解决方案似乎为开发者所熟悉和广泛使用。但是像Decorators（47.4%），DynamicImport（42.8%）语法用的人不多，至于Proxies（22.3%）Promise.allSettled()（14.7%）这两种语法不仅用的人多，甚至很多人都没听说过。如果在写业务的时候很难使用Proxy这样的对象代理方案，那么很少人用也是可以理解的。像DynamicImport这样动态加载资源的解决方案是配合webpack打包的异步加载chunk一起使用的。绝对是进一步优化页面性能的大杀器。如果你还不知道，你可以深入研究它。Promise.allSettled方法终于完成了Promise系列的全家桶。原始的Promise.all方法仅在异步执行的函数集相互依赖时才有效。当你想知道各个异步函数的解析状态时，还是需要用到Promise。allsettled方法效果更好。1.3数据结构数据结构方面，Maps（73.4%）、Sets（66.9%）等数据结构已被开发者广泛使用，而TypedArrays（34.9%）、Array.prototype.flat()（39.6%）这样的数据结构和新语法在工作中很少用到，BigInt（13.9%）的使用率最低，但在一般的开发需求中确实用不到。有一说一，Array.prototype.flat()方法其实非常好用。虽然我们可以通过SpreadOperator将一个2层的嵌套数组快速“展平”为一维数组，但是当我们需要“展平”一个2层以上的数组时，传参显然更方便平（）方法。1.4BrowserAPILocalStorage（90.6%）、Fetch（87.1%）今年看起来不再新鲜的API无疑被大家所用，对于存储和HTTP请求确实没有更好的原生方案。WebSocket62.6%的使用率，ServiceWorkers42%的使用率，Intl31.3%的使用率也都在情理之中，毕竟受限于使用场景。ShadowDOM（42.1%）和自定义元素（33.4%）无疑是今年最疯狂的浏览器API。想想不使用React和Vue，只使用浏览器提供的功能，实现高效的复用，组件化，生命周期功能等等都可以。看来好不容易学会的React明天就过时了，JavaScript原教旨主义者终于一统天下。不过也别高兴得太早，现实还是很骨感的，何况还没有像Fusion、Antd这样成熟的UI组件库可以开箱即用。如何通过这些API稳定构建SPA应用，整个社区还没有讨论过像React、Vue、AngularJS这样成熟的解决方案，等等，先熟悉一下API总是好的。至于WebAudio（20%）、WebGL（17.5%）、WebAnimations（16.3%）、WebRTC（14%）、WebSpeechAPI（8.2%）、WebVR（3.3%），这些只是用于特定的开发需求API很少有人使用是正常的，但不要因此而忽视这些API。WebAudio、WebSpeech和WebRTC对于音频、视频和视频流的传输和交互非常重要。WebGL、WebAnimations和WebVR将Web世界的表现力提升到了几个层次。我觉得大家真的应该好好想想，如何结合自己的业务场景，通过浏览器的这些能力寻求更新的突破。也许下一个趋势或交互模??式的创新将在您的团队中诞生。到时候别忘了给我发个红包（笑）。1.5.其他最后，让我们看一下WebAssembly(WASM)的调查。实际使用过的开发者比例为10.5%，73.9%的开发者听说过但从未使用过，15.6%的开发者从未听说过。我想大部分前端开发者应该都在没用过的象限。目前，社区对WebAssembly的了解并不多。使用C++和Rust编写Web应用程序对Web开发人员来说确实没有太大吸引力。对于未来的发展，我还是持观望态度。2.技术框架在技术框架部分，我会重点关注两个方面：使用的技术框架数量和对框架的满意程度，代表当前流行的技术选择和未来可能的技术方向。我会附上每项技术的:link:链接，您可以点击了解更多技术细节。2.1语言风格2020年，当谈到如何写好JavaScript这个问题时，TypeScript毫无争议地做出了最终决定。93%的调查参与者表示，他们对通过Typescript约束自己的Javascript代码非常满意。Typescript似乎今年还没有被拥抱。开发商肯定出局了。目前语言风格是否令人满意的调查显示，在满分5分的限制下，无论2019年还是2020年，开发者都只有3.6分，表示JavaScript更优雅。写作上还有很大的探索空间。2.2前端框架在前端框架方面，React、Angular和Vue.js无疑仍然是世界三大框架。但你可能不相信，“最满意的前端框架”不是React，而是RichHarris在2019年推出的Svelte。66%的受访者表示对这个框架感兴趣，89%的受访者表示他们对使用这个框架非常满意。一句话，用过的都好。顾名思义，Svelte强调的是可以在构建时直接产生最小的完整代码，这样构建的组件就可以直接使用而无需添加框架本身，所以不仅打包后的应用代码更小，因为没有性能diff操作的性能也得到了极大的改善。遗憾的是Svelte目前还不支持Typescript，也没听说有什么大型项目使用它。否则，很多前端开发人员会学到一些东西。2.3数据层数据层框架在国外一塌糊涂，但在国内并不流行的GraphQL依然是数据层框架排名的第二名。使用最多的状态管理框架还是大家熟悉的Redux。凭借GraphQL和React的光芒，ApolloClient在过去三年也稳居榜单第三位。更有意思的是，2020年异军突起的两大框架Vuex和XState，分别迅速超越老牌状态管理框架Redux和MobX，拿下榜单第三和第四名。最满意的开发商。我没有怎么用过Vuex，但是XState做了很多研究和研究。确实是性价比不错的框架，尤其是最近流行的逻辑布局，状态布局，各种布局，再加上自带流程图。不仅立马感觉高大上了很多，实际上解决了程序状态复杂后难以梳理的老问题。2.4后端框架在过去的一年里，我并没有写太多的服务器端应用程序。通过研究报告，我发现我用的最熟练的Koa的热度逐年下降，在使用率排名中位居中等。现在Next.js和Express是开发服务端应用的首选，用过的人也觉得不错。仔细看看Hulu、Docker和Netflix都在使用Next.js。像我这样掉队的同学真的应该把功课补上。2.5测试框架说到测试框架，Jest自从2019年从Mocha手中抢过领先棒后，就一直稳坐测试框架的头把交椅。在使用量上，Mocha和Storybook紧随其后，但似乎无法撼动Jest的地位。值得注意的是，由KentC.Dodds开发的TestingLibrary测试框架一经发布便引起了众多前端开发者的关注。TestingLibrary专注于DOM测试，全面支持三大主流框架，并提供了一堆易用且廉价的API，符合用户使用习惯。遗憾的是国内大部分开发者都不太重视单元测试，更不用说DOM元素级测试了。我大胆预测TestingLibrary在国内会像GraphQL一样不温不火。可惜，也没办法。2.6构建工具说到构建工具，还真是有话要说。尽管webpack仍然以89%的使用率占据主导地位，你会惊讶地看到2020年许多开发者感兴趣或满意度很高的构建工具。我发现gulp.js一度如火如荼，Browserify逐渐暴露了中年危机的势头，而webpack也在今年跌下神坛，在用户最满意的构建工具榜单中仅排名第四。说第三名被TypeScript抢走了也无可厚非。前两个是esbuild和Snowpack。相信国内很多开发者听到肯定是一头雾水，但其实去官网看看这两个构建工具就可以清楚的了解了。主要是提高构建速度，尤其是esbuild，根据官网给出的数据，比webpack构建速度快113倍。老实说，随着项目越来越大，monorepo方案在国内逐渐流行起来，构建时间有时会直接影响开发体验。一个项目build需要十几秒，这看起来不是前端开发应该出现的场景，不管是esbuild还是snowpack，有机会还是鼓励大家多尝试，总结经验，并造福社会。2.7Application/Desktop毫无疑问，如果要用JS写桌面应用，最好的框架肯定是Electron。但是如果你要开发移动端应用，2020年就不仅仅只有ReactNative，2020年新推出的Capacitor也很抢眼。虽然只有10%的受访者实际使用它，但其中84%是开发人员。据说用起来很满意。但是，从用户体验的角度来看，移动/桌面框架的整体满意度并不高。近年来基本维持在3分左右的状态。需要更多突破性的技术创新。3.小结以上是对2020年JavaScript整体状态的一个快速概览，总的来说，无论是语言特性还是各种框架和库，2020年都不会出现突破性的变化和爆发式增长。但如果你仔细观察，你会发现，其实在各个细分领域，一些创新和实践正在悄然发生，比如构建性能的提升、前端测试的提升、Web表达式的丰富等等。前端领域最棘手的一些问题，如何实现更高性能的组件化，如何真正实现JavaScript的“一次性开发，随处运行”，目前还没有定论。也就是说，他们还在等待更聪明的开发者来解决。如果非要问2020年最流行的技术是什么，我想今年的奖杯无疑要颁给TypeScript。随着新版TypeScript的更新，写前端代码越来越得心应手了。.
