前端每周清单第 43 期：2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏、Node.js 架构模式

前端每周清单专一前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID ： frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• Angular 5.1 发布: 本文介绍了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首个稳定版本的特性变化。Angular 5.1.0 中包含了多个小的特性变化与错误修复，这次系列更新主要包括了 Angular Material & CDK 稳定版发布、CLI 工具支持 Service Worker、对于 Universal 以及 AppShell 支持的提高、装饰器错误信息优化、支持 TypeScript 2.5 等等。

• Ant Design 3.0 发布: Ant Design 是面向企业级桌面应用的设计方案与实现，在 2.0 版本发布的 14 个月以后，3.0 版本正式发布，包含了来自 200 多位贡献者的超过 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系统，其受到天空的启发，包含了薄暮、日出、拂晓蓝等一系列优美的色彩搭配；该版本还引入了新的组件设计，包括了对于大量组件的复写，彻底支持 React 16 与 ES Module，而且优化了对于 TypeScript 的支持。

• Font Awesome 5 发布: 本周，Font Awesome 5.0.0 正式发布，为咱们带来了全新的主页，包含了九百多个免费图标与一千多的商业图标。5.0 中提供了多种整合方式，最为推荐的是利用 JavaScript 与 SVG 图标协同使用，以替代原有的字体图标，从而提高性能与易用性。

• TensorFlow Lite 支持 Core ML: TensorFlow Lite 是面向移动设备与嵌入式设备的轻量级 TensorFlow 版本，近日其宣布开始支持 Core ML，经过工具可以将 TensorFlow 模型转化为 .mlmode 这样的 Core ML 模型格式。Core ML 是 iOS 内置的机器学习框架，这意味着 iOS 开发者可以在 Core ML 上部署 TensorFlow 模块，也是 TensorFlow Lite 在跨平台支持上的重要一步；另外一方面，Apple 也开源了自定义机器学习模型框架 Turi Create，来帮助开发者快速开发机器学习模块而且集成到 iOS 应用中。

开发教程

步步为营，掌握基础技能

• 使用 Rust 开发基于 WebAssembly 的游戏: 数周前，Alex Crichton 的 PR 使得 Rust 可以直接被编译为 WebAssembly 格式，本文做者也尝试将基于 Rust 与 Piston 编写的桌面游戏 Rocket， 转化为可以在浏览器中运行的 WebAssembly 格式的应用。做者使用 JavaScript 来处理用户的输入输出，而且进行界面渲染，使用 Rust 来处理游戏逻辑；做者依次介绍了本身在迁移过程当中碰到的多个 Link 错误以及处理方案，而后讨论了 Rust 与 JavaScript 如何相互调用，以进行画面渲染与接收用户输入输出等内容。更多 WebAssembly 相关资料参考这里。

• 的变迁：非 GIF 的动图实现: 图片是现代网页应用中不可或缺的部分，GIFs 是动图实现的选择之一，但其质量与性能一直差强人意；若是直接使用 video 标签，又是没法发挥 preloaded 的做用，还必须分段请求。在 Safari Technology Preview 中，容许开发者使用 <img src="https://user-gold-cdn.xitu.io/2017/12/11/16044d045762c64d"> 的形式来实现简单的动图需求，相较于本来的 GIF 的解决方案能带来将近二十倍的性能提高，而且支持 CSS 方式背景播放，其体积也有大幅度的下降。更多的图片处理与性能优化资料参考这里。

• 使用 Electron 与 React 建立 Markdown 应用: 本文按部就班地介绍了如何使用 Electron 与 React 构建简单的 MarkDown 应用，做者将其命名为 Mook。本文依次介绍了技术栈的选择与考量，开发环境、构建流程与模板应用搭建，主功能开发等内容；更多 Electron 学习资料参考这里。

工程实践

立足实践，提示实际水平

• Airbnb 列表页的 React 性能问题浅析: Airbnb 已经使用 React Router 与 Hypernova 将核心订购流程转化为了服务端渲染的单页应用，本文则是介绍其如何将列表详情页进行单页应用话改造，而且综合提升其性能。本文首先讨论了如何进行性能评测，这篇文章也介绍了如何使用 Chrome DevTools 来调试 React 的性能问题；而后介绍了其在初始化渲染、滚动优化、点击反馈、输入输出方面的优化技巧。更多 React 相关教程参阅 React 与前端工程化实践。

• Node.js 的可扩展应用模式：CQRS, ES, Onion: 本文介绍如何使用 CQRS 与 Event Sourcing 模式来开发 Node.js 应用，使用 Onion 架构来组织这些模式，而且使用 TypeScript 来进行静态类型校验。本文首先讨论了何谓灵活架构：业务逻辑与实现分离、独立于数据库，框架，服务等等；而后介绍了 Event Sourcing 与 CQRS 的含义，以及它们是如何组织在洋葱圈模型中的，最后以典型的认证逻辑为例讨论了如何实现 CQRS 模式。更多 Node.js 的知识能够阅读深刻浅出 Node.js 全栈架构。

• 基于 Intersection Observer 与 SQIP 的渐进式图片加载: 当咱们浏览 Facebook、Pinterest 、 Medium 等内容类网站时，会发现图片是渐进式加载，即首先出现低质量的、模糊的图片，而后再出现真正的图片，本文便是介绍如何使用 Intersection Observer 与 SQIP 实现渐进式加载。以前的清单中咱们有介绍过 SQIP 这种图片替代（Image PlaceHolder ）的生成方式，其可以生成不足 1KB 的 SVG 格式的低质量图片；而 Intersection Observer 则可以判断某个图片元素是否在视口内，从而实现按需加载。更多的图片处理与性能优化资料参考这里。

深度阅读

深度思考，升华开发智慧

• Orinoco: V8 中的年轻代垃圾回收: V8 引擎中的 JavaScript 对象被分配在了堆上，而且由 V8 的垃圾回收器进行生命周期的管理；本文便是介绍 Parallel Scavenger，Orinoco 的最新特性之一，是如何针对年轻代进行垃圾回收的。本文首先介绍了分代垃圾回收模型，而后讨论了单线程的 Cheney’s Semispace Copy 算法，最后讨论了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的设计；更多 V8 相关资料索引参考这里。

• 2017 JavaScript 发展回顾: 在 2017 年 JS 状态调查结果出炉以前，Sacha Greif 先和几位专家聊了聊他们对于 2017 年 JavaScript 发展的见解与回顾，并整理成了这篇文章。本文从测试工具、构建工具、状态管理、全栈架构等几个不一样的方面进行了讨论，对 2017 年中使人印象深入的技术进行了分享；除此以外，A recap of front-end development in 2017 也是一篇不错的总结，更多 JavaScript 相关资料参考这里。

• Web 内容可用性提高指南: World Wide Web Consortium (W3C) 发布的 Web Content Accessibility Guidelines 2.0 是网页内容可用性的绝佳指南，可以帮助设计者与开发者来提高网页的总体可用性；本文则是对这份指南的简要总结，以帮助那些没有时间阅读原指南的开发者快速了解网页可用性方面的知识。本文依次讨论了如何判断用户可否有效地接受网页内信息、如何判断用户可否有效地使用网页中的控制按钮与跳转连接、用户是否可以理解网页内容、是否针对复杂的用户环境进行了适配等内容；更多 Web 开发相关内容阅读现代 Web 开发工程化实践。

• 卡通图解 JavaScript 引擎: 本系列文章着眼于从运行机制的角度来介绍 JavaScript，首篇文章介绍了 Callback Queue、Event Loop 等异步执行相关的概念，本文则是从引擎的角度，以漫画的方式来介绍 JavaScript 的编译、解析与执行的过程。上周的清单中咱们推荐了 V8 引擎的推测优化，本文则是提纲挈领地介绍 JIT 编译器的原理，给读者一个宏观的概念展现；更多 JavaScript 引擎相关资料参考这里。

开源项目

乐于分享，共推前端发展

• Parcel: Parcel 是高速、零配置的 Web 应用打包工具；其面向现代操做系统设计，可以进行多核并发编译，而且提供了文件系统的缓存以优化重构建或者增量构建的性能。Parcel 还提供了开箱即用的 JS, CSS, HTML, 资源文件等支持，可以自动地使用 Babel, PostCSS,PostHTML 来进行代码转换，同时内建支持 import() 动态导入与热替换。

• electron-toolkit: electron-toolkit 是轻量级的、强大的 Electron 应用的启动辅助工具，它可以以 NPM 脚本的方式启动，为开发者提供一系列开发过程当中须要的辅助工具。这些工具包括了图标生成、截图工具、安装器、二进制文件生成、网站生成、实时更新等等。

• Muuri: Muuri 是强大的 JavaScript 布局引擎，吸纳了来自 Packery, Masonry, Isotope, 以及 Sortable 的优秀特性，辅助开发者快速构建响应式、可排序、可过滤、可拖拽、可动画控制的可扩展表格系统。

• Vuetron: Vuetron 是基于 Electron 开发的，帮助 Vue.js 项目测试以及错误检测的工具，同时支持 Vuex 以及 Vue-Router。相似于 Developer Tools，Vuetron 可以查看事件、应用状态以及进行时间回溯的调试；同时还可以实现监听指定状态变量的变化，查看 API 请求与响应，可视化查看组件结构树等等功能。

巅峰人生

• 从黑客到创业，他说技术创业该这么作！: 本文是知道创宇 CTO & COO 杨冀龙在极客 Live 中分享的创业感悟和踩过的那些坑。杨冀龙是安全焦点民间白帽黑客组织核心成员，被《浪潮之巅》评为中国新一代黑客领军人物之一；他在本文中依次分享了对于黑客的定义、如何从黑客成为一名安全创业者、技术创业踩过的坑、给技术创业者建议等内容。

前端之巅

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