前端每周清单第 30 期：WebVR 指南，Vue 代码分割范式，理想的 React 架构特性

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

新闻热点

国内国外，前端最新动态

• Chrome 61 新特性介绍：Chrome 61 中即将原生地支持 JavaScript 模块，意味着开发者可以不用 Babel 等转换器即直接在浏览器中运行模块化代码。除此之外，Chrome 61 还允许开发者使用 navigator.share 来触发 Android 原生的分享对话框，并且引入了 WebUSB 接口来访问受信的 USB 设备；更多特性介绍请查看原文。
• Yarn 1.0 发布：著名的 JavaScript 包管理器 Yarn 终于发布了其 1.0 版本，目前已经有超过 175000 个 Github 上的项目包含了 yarn.lock 文件，每个月有超过三十亿的下载量。在新版本中，Yarn 引入了工作空间、自动合并 lockfiles、可选择的版本解决等特性，并且进行了其他一系列的性能提升与错误修复等工作。
• Meteor 15.2 发布：经过超 40 个 Pull Request 的请求合并之后，Meteor 发布了 1.5.2 版本；新版本中放弃了对于 MongoDB 2.4 版本的支持，修复了 Node.js 垃圾回收的 Bug，引入了一系列的新特性，详情请查看原文。
• 百度与 W3C 中国联合组织移动网页加速技术研讨会：2017 年 8 月 30 日，百度联合 W3C 中国在北京中关村软件园国际会议中心主办了“移动网页加速技术研讨会”，W3C 中国以及腾讯、阿里巴巴及 UC、搜狗、小米、傲游、中国移动、中国电信、DCloud、听云等 W3C 中国区会员及厂商代表积极参与了本次研讨会。本次研讨会探讨了百度 MIP（Mobile Instant Pages）技术以及类似技术（如：Google AMP、Facebook Instant Article、腾讯云加速）涉及到的标准化问题，即如何让一个页面被内容分发平台即时展现渲染，从而以更快的加载速度和更友好的展现交互方式来提升用户在内容分发平台上的浏览体验。研讨会探讨了使用 Pre-fetch/Pre-render page、Async open page、CDN 服务来实现这类服务的可能性。

开发教程

步步为营，掌握基础技能

• 面向 Web 开发者的 VR 指南：近日来，越来越多的浏览器添加了对于 VR 特性的支持，本文即是盘点下目前浏览器中 VR 技术发展的现状，并且对可用的 WebVR 相关 API 进行简要介绍。本文首先介绍了 VR 以及 WebVR 的基础概念，列举了 WebVR 目前的浏览器以及设备的支持情况，然后分析了 WebVR 的发展趋势与潜在机会；更多 WebVR 相关资料参考这里。
• 基于 Vue.js 与 Webpack 的三种代码分割范式：代码分割是提升单页应用初始加载速度的重要方式之一，其能有效提升用户体验；本文则着眼于介绍 Vue.js 应用开发中常见的三种代码分割方式，分别是按照页面切分、按照页面的可见区域折叠切分以及按条件加载。更多 Vue.js 相关资料参考这里。
• 利用 Flow 与 Recompose 编写高阶组件：高阶组件是 React 应用开发中典型的设计模式之一，我们常常会利用 Recompose 库来实践高阶组件；另一方面，Flow 静态类型检测工具能够有效提升应用的鲁棒性，本文即是介绍如何在开发中协同使用 Flow 与 Recompose，编写具有静态类型的高阶组件。本文依次介绍了如何从 Recompose 中引入类型声明、如何为类组件添加类型声明、如何编写高阶函数等内容；更多 React 相关资料参考这里。
• Node.js 中 async_hooks 图解：async_hooks 是 Node.js 8 中引入的实验性接口，其允许开发者依赖 init、before、after、destroy 四个回调函数监控异步资源的执行情况。本文则是以手绘图形象地介绍 async_hooks 的工作原理与运行机制；更多 Node.js 相关资料参考这里
• 如何在 Chrome DevTools 中调试 JavaScript ：Chrome DevTools 是非常强大的调试工具，本文着眼于介绍如何使用 Chrome DevTools 来添加断点并且单步执行 JavaScript 代码，从而帮助开发者更有效地定位到错误点。本文首先介绍了测试用例以及如何重现错误，然后依次阐述了添加断点、单步调试、检查当前值、修复错误并重新保存等内容；更多 Web 调试相关资料参考这里。

工程实践

立足实践，提示实际水平

• TypeScript 与 Webpack 的激情碰撞：本文是 ts-loader 的核心维护者之一，分享的多个能提升 Webpack 中 TypeScript 使用体验的插件。fork-ts-checker-webpack-plugin 能够利用子进程来进行类型校验，HappyPack 则允许并发处理多个文件从而提升 Webpack 的编译速度，thread-loader 与 cache-loader 还能进一步提升编译速度；更多 Webpack 相关资料参考 https://parg.co/bVs 。
• 理想的 React 架构应该具备的特征：React 本身并不是某种应用架构，它只是 MVC 架构中的视图层；本质上只是拥有内部组件生命周期的单向数据绑定的视图库。本文则是作者分享的自己实践中总结出的 React 应用架构特征：控制器与模型层不应该直接被 React 组件表示、Props 尽可能少地在深层组件间传递、尽可能地使用不可变数据以减少计算压力；更多 React 相关资料参考这里。
• 来自 HousingEngg 的 React Native 实践分享：HousingEngg 去年开始 PWA 化应用以来，极大地提升了用户体验；而在进行移动端应用开发的技术选型时，为了尽可能地完成代码复用，决定用 React Native 进行开发。本文首先介绍了开发目标与 React Native 相关技术栈选型，包括 react-navigation、redux-observable、ramda、redux-persist 等；然后介绍了 storybook、fastlane、detox、sentry 等常用的工具，最后分享了些开发过程中遇到的坑以及构建流程的搭建。更多 React Native 相关资料参考这里。
• 利用 requestAnimationFrame 优化动作性能：requestAnimationFrame 为我们提供了相对底层的接口，本文则是对于 requestAnimationFrame 的深度解析。本文首先介绍了 requestAnimationFrame 的基础用法与运行机制，然后介绍了其在 Easing 动画、SVG 绘制、定时器方面的应用；更多 Web 动画相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• car2go 的前端框架选择：本文是 car2go 的工程师分享的他们在前端框架选择时候的考量；今年组建新的前端开发团队时，需要根据团队内成员不同的经验、背景、编程倾向与技能来进行选择。技术选型主要从文档、项目的维护者的投入、StackOverflow 等常见平台的问题丰富度、工具链的完善程度、插件或者扩展的数量、Web 技术标准、上手难易程度、代码风格、API 设计、可扩展性等方面进行考虑，最终的候选者是 React 与 Vue.js；不过因为 Vue.js 更加完善的文档，最终胜出。
• 面向创业者与 CTO 的 React 开源协议解析：本文是 Facebook 前工程师，后来的创业者对于近日沸沸扬扬的 React BSD + 专利协议的个人解释，希望能够帮助更多的人理解 Facebook 设置该协议的初衷，以及对于使用者的潜在影响。本文首先介绍了 2012 年雅虎对于 Facebook 的专利诉讼及其应对方式，然后分析了该事件对于 Facebook 专利战略的启示；笔者认为 Facebook 设置该协议更多的是处于防卫考虑，避免受到恶意的专利诉讼。不过对于那些潜在的可能和 Facebook 进行直接竞争的创业公司，还是需要慎重地使用 React 等系列框架。
• 10 个常见的软件架构概述：很多人都会好奇大型商业系统的设计是如何进行的，实际上在大型软件开发启动之前，我们都会选择合适的能够提供想要的功能与高性能的特性的架构；本文则是介绍软件设计中常见的十种架构，对比了其使用场景、优势与劣势。本文依次介绍了分层模式、客户端 - 服务器模式、主从模式、管道过滤模式、代理模式、点到点模式、消息总线模式、黑板模式、解释器模式等。
• Mobile Web 性能优化手册：无论是开发者、设计师或者市场专员，都会关心最终用户对于产品的使用体验；而在移动端愈发成为主要入口的今天，移动 Web 的性能优化也愈发重要。本手册则是图文并茂地介绍了移动 Web 优化应该考虑的点。本手册依次分析了性能优化的实际意义、性能优化的感知指标会有哪些、常见的移动 Web 优化策略以及 AMP 与 PWA 等常见的优化建议等内容；更多 Web 性能优化相关资料参考这里。

开源项目

乐于分享，共推前端发展

• react-imgpro ：react-imgpro 是基于 React 的图片处理组件，该组件能够提供常见的缩放、调色等图片处理功能，并且将处理之后的图片以 base64 编码形式返回。
• Lozad.js ：Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript 懒加载器，其能够被用于进行图片、iframe 等多种形式的元素。
• Rythm.js ：Rythm.js 是非常有趣的 JavaScript 库，它能够为你的页面添加动感地音乐效果，仿佛在摇滚中起舞。
• Downshift ：Downshift 是 PayPal 开源的简单、灵活的 React 输入组件，提供了自动完成、下拉选择等多种丰富的功能；Downshift 提供了 Render Function as Children 的接口，从而给予了开发者极大的灵活性与自由发挥的空间。
• Fastify ：Fastify 是新近发布轻量级的 Node.js 服务端框架，其受到了 Hapi、Restify 以及 Express 的启发，不过在性能评测上却远远优于 Hapi 或者 Express，仅次于原生的 http.Server()。

巅峰人生

• 5 年，从新手程序媛到研发总监，如何获得跨越式的成长路径？：本文是百度外卖技术总监张灿在二叉树 Live 上的分享，介绍了自己对于技术领域的转型中的转型动机分析、转型问题的应对，如何应对技术发展的瓶颈期，从实习生到研发总监的升级之路在历经的初级菜鸟、资深技术、技术管理等相关方面的感悟与经验总结。

前端之巅

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

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。