前端每周清单第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，注明“前端之巅投稿”。