前端每周清单第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相关资料参考这里。

• <img> 的变迁：非GIF的动图实现:图片是现代网页应用中不可或缺的部分，GIFs是动图实现的选择之一，但其质量与性能一直差强人意；如果直接使用video标签，又是无法发挥preloaded的作用，还必须分段请求。在Safari Technology Preview中，允许开发者使用 <img src=".mp4"> 的形式来实现简单的动图需求，相较于原本的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，注明 “ 前端之巅投稿 ”。