前端每周清单第 17 期：大前端技术生命周期模型；WWDC 发布 Safari 11；面向生产环境的前端性能优化

作者 | 王下邀月熊 编辑 | 尾尾 链接点不开？对不起，这个锅小编不背——重要的事情要特意提醒： 由于微信不支持外链（注意是外链），故在相关内容后的提供了短链接，方便大家复制。查看本文带链接版请点击阅读原文。 新闻热点

国内国外，前端最新动态

• 《大前端技术生命周期模型》 ：GMTC 全球移动技术大会主编徐川推出了 InfoQ 观察与总结大前端技术采用的生命周期，并表示大前端正处于密集创新阶段，未来将会有几项技术突破出来成为主流。（http://www.infoq.com/cn/news/2017/06/GMTC-Geeks-technology-upgrades ）

• 《WWDC 中发布 Safari 11》：Safari 11 带来了很多的新特性，包括开发者喜闻乐见的 WebRTC、网页快照、WebAssembly、iOS 中的拖拽支持等等；同时在 Safari 11 中我们还可以使用 Media Capture、WebCrypto、Resource Timing 等多种新的 API。( https://parg.co/bLE )

• 《Google Chrome 开发者工具更新》：在 Google I/O 2017 大会上，Paul Irish 发表了一段"2017 开发者工具年度报告"，他展示了一些 Chrome 开发者工具的新特性，其中包括能够帮助开发者简化代码和处理现代 JavaScript 需求的一些新特性。（http://www.infoq.com/cn/news/2017/06/chrome-devtools-updates ）

• 《V8 6.0 发布》：V8 6.0 发布，提供了对 SharedArrayBuffer 的支持等新特性。（https://v8project.blogspot.jp/2017/06/v8-release-60.html）

开发教程

步步为营，掌握基础技能

• 《WebAssembly 初体验：重构简单游戏引擎》：WebAssembly 为我们提供了构建高性能的前端应用的途径，而本文则从零开始介绍如何使用 C 来覆写简单的 JavaScript 游戏引擎并且将其编译为 WebAssembly。本文依次介绍了如何搭建基础的 Emscription 工具链、使用 JavaScript 引入 wasm 模块、覆写并且优化某个小型游戏引擎、两个引擎的性能评测等等部分。( http://blog.openbloc.fr/webassembly-first-steps/ )

• 《使用 Vue 与 NativeScript 开发跨端应用》：目前标准的开发 NativeScript 应用的方式是使用朴素的 JavaScript 或者 Angular，而本文介绍了如何结合使用 Vue 与 NativeScript 来开发跨终端应用。本文首先阐述了 Vue.js 相较于 React 或者 Angular 的优势，然后阐述了使用 Vue 语法来开发基础 NativeScript 应用的步骤。( https://www.nativescript.org/blog/a-new-vue-for-nativescript )

• 《基于 Firebase 与 Vue.js 构建基于地理位置的聊天室》：本文介绍了基于 Firebase 与 Vue.js 构建某个基于地理位置搜索与配对的聊天室应用的过程，应用发布在 这里，还是挺有意思的应用。本文除了介绍 Vue.js 项目的基础构建与语法之外，还介绍了所谓 Geohash 的知识与 Firebase 相关接口的使用。( https://parg.co/bLH )

• 《Node.js 8 中 util.promisify 介绍》：Node.js 8 为我们提供了新的工具函数 util.promisify()，它能够将某个基于回调的函数封装为基于 Promise 的函数。本文介绍了 util.promisify() 的基本使用，首先介绍了对于文件读取写入相关接口的封装使用，然后讨论了如何引入 async 语法，最后还介绍了自定义 promisify 函数的用法。（http://2ality.com/2017/05/util-promisify.html）

• 《你应该掌握的关于 Node.js 子进程的知识》：Node.js 最初以单进程单线程非阻塞方式提供了强大的性能表现，不过在目前多核时代下仅使用单进程已远远不能承载日益增长的应用压力。本文即介绍在 Node.js 中如何使用 spawn()、exec()、execFile()、fork() 等多进程相关模块的用法与各自的特点，依次介绍了使用 spawn 来创建实现了 EventEmit 接口的子进程、使用 exec 执行子命令、使用 fork 创建自带通信信道的子进程等。( https://parg.co/bLq )

工程实践

立足实践，提示实际水平

• 《Medium 网站的技术栈》：Medium 是一个在线发布平台，最初由 Twitter 联合创始人 Evan Williams 开发。该平台于 2012 年启动，现在每个月有 6000 万独立访客。该网站部署在 AWS 上，使用 NodeJS 和 Go 作为应用程序和服务的开发语言，使用 DynamoDB 作为数据存储，并使用 Amazon Redshift 作为数据仓库。（http://www.infoq.com/cn/news/2017/06/medium-technology-stack ）

• 《Figma 利用 WebAssembly 降低三倍加载速度》：自 WebAssembly 推出之后，很多开发者都开始尝试在小型项目中实践 WebAssembly，不过尚缺大型真实案例比较。而 Figma 因为其产品主要基于 C++ 实现，可以方便地编译到 WebAssembly 中并且与原方案进行性能比较。本文中 Figma 介绍了它们在 Firefox 中使用 WebAssembly 之后带来的加载性能提升以及下载尺寸的优化，同时还提及了目前 WebAssembly 在实际项目使用中存在的一些问题与风险。( https://parg.co/biB )

• 《利用 React Apollo 减少 Redux 代码量》：Redux 为人诟病的一点就是需要大量的模板代码，而更多的代码往往也意味着更多的潜在错误与更高的维护代价。本文则介绍了如何利用 Apollo 来接管应用中的数据加载与呈现逻辑，从而减少 Redux 实现方案中加载数据生命周期中所需要的代码。( https://parg.co/bLA  )

• 《CSS 局部作用域变量详解》：CSS 自定义属性或者所谓的 CSS 变量，为我们带来了真正的、不同于 SASS 等预处理框架中使用的类占位符的动态变量。本文介绍了 CSS 变量的基本定义语法与使用，以及如何使用 JavaScript 来动态修改 CSS 变量值从而动态地进行界面重渲染，最后阐述了目前浏览器对于 CSS 变量的支持情况以及可以使用的兼容方式。( https://parg.co/bLS )

• 《面向生产环境的前端性能优化清单》：在 Web 前端开发中，产品经理更多的会关注于寻找优秀的设计与内容，而开发者同样需要关注于如何进行前端性能优化。作者在本文中则分享了多年经验累积的性能优化清单，包括常见的资源优化、CSS 优化中常用的工具、常用的性能检测工具等等。( https://parg.co/bLP )

• 《渐进式图片渲染机制》：图片在网页中占据了重要的地位，合适的图片能够大幅提升用户体验，不过同样会占据大量的带宽；本文则着眼于如何综合利用懒加载与渐进式渲染等方式来优化带宽使用与用户体验。本文首先讨论了对于合适的图片格式的选择，然后介绍了常见的图片懒加载的技术，最后阐述了所谓渐进式编码与渐进式图片渲染的理念与实践。( https://parg.co/bLp )

深度阅读

深度思考，升华开发智慧

• 《Mobdux：整合 MobX 与 Redux 中优秀的部分》：MobX 与 Redux 为我们提供了截然相反地管理前端应用状态的方式，而本文则细致地分析对比了 Redux 与 MobX 的优缺点，并且从自己的实践经验角度出发提出了结合二者优点的 mobdux 框架。( https://parg.co/bLd )

• 《不会做动画的前端不是好开发》：自从有了前端开发这个概念以来，这个岗位所做的事情都是围绕着人机交互来开展的，主要包括展示信息给用户看，然后获取用户的意图并做出响应。随着终端设备以及业务的快速发展，前端工程也越来越复杂，所以分工也进一步精细化，有侧重做工具化与模块化架构的，有侧重无线体验或者 Web 与 Native 融合方面的，也有侧重复杂的商家后台或者数据可视化的，甚至有部分公司把 HTML+CSS 与 JS 的工作也分开的，所以出现了不同前端工程师会有不一样的侧重点。而目前越来越多的业务线有越来越高的动画类需求，而在动画方面能紧跟技术趋势的优秀前端实在是比较难找，本文则希望让那些想在动画方面有些提升的朋友有所帮助。( https://parg.co/bL0 )

• 《Flow 与 TypeScript》：本文主要对比了 Flow 与 TypeScript 这两个常用的 JavaScript 静态类型检测工具，首先介绍了在简单项目中如何使用 TypeScript 与 Flow。然后对比了二者在类型覆盖率上的渐进对比，会发现使用 Flow 之后因为其较为严格的类型要求会相对较快地实现高覆盖，而 TypeScript 则相对较为松弛。( http://thejameskyle.com/adopting-flow-and-typescript.html )

• 《JavaScript 中类的私有域定义》：目前对于类中的私有域定义已经达到了 Stage 2，本文即是详细介绍 #private 语法的使用以及设计理念。顾名思义，我们可以使用 #privateFieldName 方式来定义类中的私有域，该私有域仅允许该类的方法访问（包括静态方法）。本文还介绍了使用这种 HashTag 方式而不是其他语言中常见的 private 关键字来定义的考量。( http://thejameskyle.com/javascripts-new-private-class-fields.html )

• 《CSS 的现状》：毫无疑问我们正在见证着 JavaScript 社区与生态的极速变化，而与此同时可能很多人没有关注到 CSS 社区的进展，本文作者则是对于 CSS 的现状进行了综述并且提出了个人的观点。本文作者主要提出了五个论点：我们可以使用 CSS Module 来替代原有的 BEM 等命名方案、使用 Flexbox 来替代 float、使用 CSS Grid 来替代第三方网格库、使用 CSS 内置的变量、计算函数等特性来替代 SASS 等预处理库，乃至于最终我们完全可以使用 CSS-in-JS 来替代 CSS。本文具有极强的主观色彩，请批判性阅读。( https://parg.co/bLZ )

开源项目

乐于分享，共推前端发展

• 《metro-bundler》：为了更好地社区支持，原 react-native-packager 被独立为 Metro Bundler；其致力于打造具有亚秒级别的重载以及较好可扩展性的模块系统，同时它仍然是 React Naive 内置的开箱即用的工具。( https://github.com/facebook/metro-bundler )

• 《preact-i18n》：轻量级的面向 preact 的国际化库，支持基于层次化目录的命名空间定义、支持模板字符串与默认值等特性。( https://github.com/synacor/preact-i18n )

• 《billboard.js》：基于 D3 v4+ 的轻量级可重用的 JavaScript 图表库，支持 IE 9 以上浏览器。billboard.js 为我们提供了常见的柱状图、时序图、饼图等等多种图表类型。( https://github.com/naver/billboard.js )

今日荐文

点击下方图片即可阅读

收藏指数满格！帮你打包前端之巅一整年好文！

---

前端之巅

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