前端每周清单第22期：ES8正式发布、React与GraphQL开发指南和性能优化，Vue.js 2.4.0发布以及使用TypeScript开发Vue.js应用

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• ECMAScript 2017(ES8)正式发布：ECMAScript 2017或ES8于2017年六月底由TC39正式发布，可以在这里浏览完整的版本；ES8中代表性的特征包括了String padding、Object.values、Object.entries、Object.getOwnPropertyDescriptors、函数参数列表与调用中的尾部逗号、异步函数、共享内存与原子操作等。

• Vue.js 2.4.0发布：Vue.js 2.4.0版本提供了内置的服务端渲染与异步组件支持，从而保证了在服务端渲染中也能使用异步组件，而不再是局限于路由中使用。此外该版本还简化了包装组件的写法、提供了v-on等一系列新的指令或者API特性，并且修复了老版本中存在的错误；更多详细内容可参考原文，或者阅读 Vue.js 2.4.0中的4个重大变化一文。

• npm 5.2.0内置npx包执行器：近日发布的npm 5.2.0版本中内置了伴生命令：npx，类似于npm简化了项目开发中的依赖安装与管理，该工具致力于提升开发者使用包提供的命令行的体验。npx允许我们使用本地安装的命令行工具而不需要再定义npm run-script，并且允许我们仅执行一次脚本而不需要再将其实际安装到本地；同时npx还允许我们以不同的node版本来运行指定命令、允许我们交互式地开发node命令行工具以及便捷地安装来自于gist的脚本。

• Babylon.js 3.0发布：Babylon.js是基于HTML5与WebGL的创建3D交互应用的开源框架，它提供了易用的API与开箱即用的性能优化。近日发布的3.0版本是Babylon重要的里程碑之一，该版本包含了大量的新特性与错误修复，支持WebGL 2、WebVR 1.1、gITF 2.0、PBR等多个特性。

• Node.js发布重大安全更新：近日Node.js发布重大安全更新，主要针对固定哈希表种子值(Constant HashTable Seeds)等多个Bug。目前流行中几个版本的Node.js(8.x，7.x，V6 LTS，V4 LTS)中都使用了固定的哈希表种子值，这有可能会导致Node.js应用受到基于哈希洪水的DoS攻击；暂时的修复方式是默认关闭V8的快照功能，导致依赖于 vm.runInNewContext 的代码会有所性能损耗，不过未来会选择合适的方案重新实现该部分代码。

开发教程

步步为营，掌握基础技能

• Progressive Web Apps入门教程：或许你已经对PWA有所耳闻，或者已经真实使用过某个PWA应用；本文并不着眼于详细介绍PWA的内部原理与工作机制，而是希望以简明扼要的语义引导读者构建PWA应用。本文依次介绍了如何测试自身应用的PWA评分、构建图标与说明、添加Service Worker、发布到Github Pages等；更多PWA相关资料参考 https://parg.co/bVh。

• GraphQL全栈教程：HowToGraphQL是介绍GraphQL的全栈教程，由Graphcool以及很多其他优秀的贡献者协作而成。该教程首先是对于GraphQL设计理念、基础概念以及先进特性的介绍，然后介绍了在React、Vue、Expo等前端项目中如何使用GraphQL，以及如何使用Graphcool、JavaScript、Java等语言快速搭建GraphQL服务端；更多GraphQL相关资料参考 https://parg.co/b1e 。

• Vue.js项目中使用TypeScript：Vue.js是优秀的渐进式前端框架，而TypeScript则可以为项目添加静态类型检测的特性，本文即是介绍如何在Vue.js项目中使用TypeScript。本文以Vue.js中的单文件组件为例，首先讨论了tsconfig.json的基本配置以及如何引入Webpack并配置合适的loader；然后介绍了TypeScript的基础用法，更多Vue.js相关资料参考 https://parg.co/byL 。

• NgRx的设计模式与技巧分享：状态管理一直是构建前端应用过程中的难点之一，Angular也为我们提供了多种不同的设计模式来进行状态管理；而本文即是介绍如何使用NgRx这个库进行状态管理。NgRx是非常简单易用，没有太多限制条件的状态管理库；本文首先概述了NgRx的核心概念与设计原则，然后以实际的项目为例介绍了如何使用NgRx处理Action以及副作用。

• 从零到一学习如何用Babylon.js创建跨平台的WebVR体验：WebVR允许我们跨平台地在多设备上发布应用与内容，而本文即介绍如何利用Babylon.js创建跨平台地WebVR应用。本文首先介绍了可供开发者使用的VR设备与扩展，然后介绍如何搭建基础的开发环境、如何开发WebVR的基本帧动画、如何响应用户交互并且添加第三方控制器等内容。

工程实践

立足实践，提示实际水平

• 用强类型语言GraphQL增强React：GraphQL、React这两项技术都来自Facebook，它们共同成长。在本文中，Shane Stillwell展示了GraphQL作为一种强类型的基于JavaScript的语言，如何帮助开发者与他们的数据建立联系并改善跨服务边界的封送处理。GraphQL是可扩展的，并可与REST共存，可以在任意后端软件中实现；更多GraphQL相关资料参考 https://parg.co/b1e 。

• 高性能React开发：3个常用的辅助工具：我们可以使用React开发高性能的应用，不过有时候一些小的错误却会导致严重的性能错误。缓慢的组件挂载、过深的组件树以及不必要的渲染都有可能会削弱应用用户体验。幸而现在有很多优秀的工具能够帮助我们应对这些性能问题，而作者在本文中即是详细地介绍了三个辅助工具及相关技术以提升应用性能；更多React相关资料参考 https://parg.co/bM1 。

• 你可能并不知道的16个SCSS特性：作者自2009年以来一直使用SCSS/SASS来进行大部分的样式工作，而本文即是对于某些有用但是并不一定为人所知的SCSS特性进行介绍。本文介绍的特性包括了父选择器的灵活用法、控制流指令、默认函数参数、扩展操作符等等；更多CSS/SCSS相关资料参考 https://parg.co/baH。

• 大幅度减少CSS包体大小：本文作者介绍了自己在构建某个在线售票的网站过程中，如何利用样式类名分割与作用域隔离来大幅度减少CSS打包文件体积的实践技巧。作者主要使用CSS Modules，然后自定义了其样式类名生成规则来保证生成较短的样式类名并且使用作用域隔离来保证样式隔离。

• 扩展Node.js应用：Node.js设计的初衷之一即是保证其可扩展性，本文则详细介绍了开发者应该了解的可用于扩展Node.js应用的内建工具。本文首先介绍了复制、分解、分割等常用的设计思想，然后讨论了如何利用Node.js内置的Cluster模块来保证应用的可扩展性与如何提供零停机重启的特性。

深度阅读

深度思考，升华开发智慧

• 常见Web框架的内部技术纵览：该系列文章从用户界面开发、用户体验设计以及内部技术纵览等多个角度讨论了现代Web框架的设计理念与思路；而本文着重于讨论不同的Web框架，对于某些共通的基本需求的不同实现方式，包括了它们支持的运行环境、如何与现有的规范保持一致、如何提供函数式支持、如何保证前向兼容性、如何进行国际化等多个方面。

• Node.js实战第二版：该仓库是Azat Mardan的著作Practical Node.js第二版参考的开源发布地址，包含了十二个章节与相关的示范代码，非常值得一读。该书依次介绍了Node.js环境搭建与Express.js初探、基于Mocha的单元测试、模板引擎、数据持久化与性能优化、项目调试、部署与发布等章节；更多Node.js相关资料参考 https://parg.co/be0 。

• 解构React Fiber，了解其工作流程：调和算法是React的核心机制之一，而在即将发布的16.0.0版本中React会引入Fiber替代现有的Stack Reconciler。本文则是深入浅出地介绍Fiber工作流程与代码逻辑，首先从客户端渲染的入口函数 render 开始，然后介绍在状态变化之后一系列地响应步骤；更多相关资料参考 https://parg.co/bM1。

• 代码风格约定与标准：本仓库提供了一系列的各个语言的常用代码风格约定与标准，与JavaScript相关的包含了来自Google、Airbnb等多个公司或者社区的样式规范，还有包括HTML、CSS、SCSS等一系列Web相关的规范。

• ES2015中集合迭代器的优化：ECMAScript 2015中引入了Map与Set等常用的集合；这些集合同样实现了迭代器的特性，因此也就允许我们使用 for-of 或者扩展操作符来迭代操作这些集合。不过在很多的评测中这些新引入的集合的迭代遍历性能并不是很好，本文则详细介绍了引擎中导致Set等集合迭代性能较差的原因，并且给出了解决方案与未来的实现规划。

开源项目

乐于分享，共推前端发展

• Pell：Pell是仅有1KB的所谓所见即所得的富文本编辑器，其不需要依赖于jQuery、BootStrap等第三方库。Pell主要以ES6语法开发，并且支持自定义的SCSS文件或者复写CSS样式来自定义风格，也是非常不错的值得借鉴的编辑器开发示例。

• doppio: doppio是基于TypeScript 0.5.0版本编写的Java虚拟机(JVM)，其支持Node.js 6.0以上版本，并且内置了Java 8 JDK环境；doppio是个有趣的尝试打破浏览器语言栅栏的尝试，浏览其源代码也可以学习如何编写Java虚拟机。

• Bundle Buddy：Bundle Buddy能够通过分析编译生成的SourceMap来寻找JavaScript代码块之间的源代码冗余情况。该工具能够帮助开发者寻找合适的代码分割点以降低最终发布应用的不稳定性，同时还能提升页面加载性能。

• gpu.js：在上周的前端每周清单中我们介绍过GPGPU(General Purpose Computing on GPUs)的概念与基于WebGL的实现方式，而gpu.js就是提供了浏览器中快速实现GPGPU的单文件JavaScript库。gpu.js能够自动地将某些特定的JavaScript函数编译为中间语言，然后利用WebGLS API使其运行在GPU中；而在某些无法使用GPU的环境下，仍然会将这些函数以正常的JavaScript执行流运行。

• TagUI: TagUI是通用的Web自动化交互，提供了开箱即用的声明式流程配置使用特性，支持Chrome、Firefox、PhantomJS、Headless Chrome等多个运行环境；同时TagUI还提供了Chrome插件以记录具体步骤以及对象存储和灵活的数据库存储支持。

巅峰人生

前端之巅

前端之巅是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注前端之巅公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。