4.2-Frontend

# 前端每周清单第 8 期：React 16 即将发布，微软发布跨平台开发框架 ReactXP，Twitter Lite 的构建之道

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• 《React 15.5.0 版本发布》：近日 React 宣布发布 15.5.0 版本， 并且宣告了在即将发布的 React 16 版本中带来的一系列性能的提升与整个重构的内核代码。而在 15.5.0 中最主要的是 PropTypes、createReactClass、TestUtils 等类被迁移到了新的包中。

• 《万维网之父 Tim Berners-Lee 获得 2016 年度图灵奖》：来自 MIT 的教授，万维网的发明者 Tim Berners-Lee 获得了由美国计算机协会(ACM)颁发的图灵奖(A.M. Turing Award)。美国计算机协会赞誉 Tim Berners-Lee 发明了万维网、第一个网络浏览器、以及允许网络扩展的基本协议和算法，而 2017 年也正恰恰是图灵奖五十周年。( http://news.mit.edu/2017/tim-berners-lee-wins-turing-award-0404 )

• 《Preact 8.0.0 发布》：近日 Preact 发布其 8.0.0 版本，新版本中性能极限提升 30%，提供了更好地兼容适配性与错误反馈，而整个包体大小进一步下降，从 3.9KB 降到了 3.3KB 。( https://parg.co/b43 )

• 《微软开源跨平台开发框架 ReactXP》：ReactXP 是来自于微软的用于开发跨平台(iOS，Android，Web，Windows)应用的开源框架，其基于 React.js 与 React Native 项目，提供了类似的接口与语法规则；能够帮助开发者快速创建优美、响应式的 Web 界面以及原生体验的移动应用。( https://microsoft.github.io/reactxp/ )

开发教程

步步为营，掌握基础技能

• 《基于 React，Redux，React-Router-V4 以及 Firebase 创建实时足球投票应用》：本系列教程基于 React，Redux，Redux-Saga，React-Router V4 以及 Firebase 创建足球投票应用，在第一篇教程中主要介绍如何使用 create-react-app 脚手架来初始化项目结构并且添加必须的库。( https://parg.co/bhD )

• 《后 ES6 时代的正则表达式》：本文主要介绍 ES6 语法标准下正则表达式的新用法，包括了 /y 与 /u 两个新的匹配标识以及一些基于正则表达式的常见用法，譬如元素属性解析等。( https://parg.co/b4s )

• 《使用 CSS Grid 打造私家花园》：本网站是个非常不错的互动式学习 CSS Grid 的站点，其以 28 个互动的花园小游戏来带你一步一步学习 CSS Grid 的语法与实践。( http://cssgridgarden.com/ )

• 《创建基于 Vue.js 的可复用组件》：本系列文章关注于如何利用 Vue.js 创建可复用的组件，每一篇都会讲解某个具体的界面组件，然后一步一步地介绍如何利用 Vue.js 来实现这些组件，顺便也介绍 Vue.js 的各种原理与设计准则。( https://parg.co/b49 )

• 《Node.js 运行时介绍》：本文是一篇不错的 Node.js 入门介绍的文章，包括了 Node.js 中常见的概念知识、JavaScript 并发模型以及基于 Event Loop 的实现、Node.js 内置的对象，以及 Node.js 缘何取名为 Node.js 等等。( https://parg.co/b4I )

• 《隐藏幕后的 CSS 知识点》：在我们日常的开发中，往往关注于让界面看上去符合预期，而往往不会去关注那些隐藏的属性知识点以及 CSS 的幕后原理。本文则是对于 CSS 的渲染过程、级联规则、Visual Formatting Model、展示类型、位置布局等等。( https://madebymike.com.au/writing/the-invisible-parts-of-CSS/ )

工程实践

立足实践，提示实际水平

• 《如何构建高性能 Promise 库》：本文作者分享了他在构建类似于 Bluebird 的 符合 Promise A+ 标准的库 Aigle 时的经验，其主要原则包括避免创建比不必要的变量、函数与实例、避免执行不必要的函数、智能处理异步函数等等。( https://parg.co/bhz )

• 《使用 JavaScript 打造智能咖啡机》：这几年智能家居与 IOT 的概念非常火热，作者也发挥极客精神改造了一下办公室的咖啡机。文中作者借助了 Tessel 与 Johnny-Five 智能硬件平台，自定义了超文本咖啡机控制协议 HTCPCP，将咖啡机改造为了能够提供类 REST 服务的终端，能够远程控制与实时监控。

• 《使用 Chrome devtools 检视代码覆盖》：近日 Chrome Canary 版本中新增了执行代码覆盖率检查的特性，其能够反映你的 Web 应用中的每个 JavaScript/CSS 文件中的代码覆盖率以及所有的未被执行的行。

• 《Webpack 与 Rollup：求同存异》：近日，Facebook 宣布将 React 的构建工具由 Webpack 迁移到 Rollup，引发了很多开发者的讨论。本文则是深度介绍 Webpack 与 Rollup 的异同，最后总结而言，Webpack 适合于构建应用，而 Rollup 适用于构建库或框架。( https://parg.co/b4y )

• 《探索 Twitter Lite 的构建之道》：近日，Twitter 发布了遵从 Progressive Web App 规范的 Twitter Lite 网站，其兼具响应式、速度快、占用空间少、支持推送与离线体验等多个特征。本文即是 Twitter 工程师团队介绍 Twitter Lite 的构建之道，包括架构总览、可用性保证、渐进式加载、渲染优化、数据使用优化等多个方面 。( https://parg.co/b4X )

• 《深入浅出 Redux 测试》：本文首先介绍了 Web 测试的基本流程，分析了单元测试、组件测试、UI 自动化测试与端到端测试的特点与适用范围；然后使用某个具体的业务逻辑测试的案例来介绍项目开发中的 Redux 代码测试实践。( https://parg.co/b41 )

深度阅读

深度思考，升华开发智慧( https://parg.co/bhT )

• 《JavaScript 模块演化史》：当初 Brendan Eich 草创 JavaScript 之际估计想不到它会在之后的二十年内起到如此重要的作用，本文则是深度回顾了缺乏模块化带来的困难以及这二十年间从命名空间、依赖注入、CommonJS、AMD、UMD 到 ES2015 Modules 等等十余种不同的模块解决方案。( https://parg.co/bhn )

• 《rems 与 ems 详解，或许你并不需要它们》：本文对于现代 Web 开发中常见的 em 与 rem 单位在桌面浏览器中的开发进行了详细的阐述，通过多个例子对比了 rem、em、px 这几个单位的实际作用，最后还阐述了希望大家能够合理利用这几个单位而不是盲从选择。( https://parg.co/b4k )

• 《React 中的状态管理架构模式》：本系列文章着眼于对于现代复杂 Web 应用，譬如 React 或类似框架，的开发中常见的状态管理的架构模式。文章中会依次介绍 Naive Hierarchical Architectural Pattern、Top-Heavy Architecture、Flux 等等内容。( https://parg.co/b4J )

• 《失信的 Web Components》：本文是一篇带有强烈主观色彩讨论 Web Components 的文章，其回顾了六年前 Alex Russel 提出 Web Components 寄以带来的现代 Web 开发的愿望与准则，然后比较了 Web Components 与 React、Vue.js 等现代常用的开发框架；有对 Web Components 一直保持关注的开发者可以带着思辨的态度看看这篇文章。( https://parg.co/b4v )

• 《使用 Inline Cache 优化动态 JavaScript 代码》：本文是作者在开发 JSIL 开源库时使用的一系列优化手段的总结，主要关于如何使用多态在线缓存(Polymorphic Inline Cache)来优化代码执行速度，不过这种方式也有可能造成意外的变化。作者介绍了何谓 Inline Cache 及其优化原理和带来的性能提升评测等内容。( https://parg.co/b4a )

开源项目

乐于分享，共推前端发展

• 《glamorous》：来自 PayPal 的 React 组件的 CSS-in-JS 解决方案，其支持 JSX 语法、自定义样式组件等多种灵活的功能。( https://parg.co/b4Q )

• 《Planck.js》：Planck.js 是基于 JavaScript 的 2D 物理引擎，能够用于创建跨平台的 HTML 游戏。( http://piqnt.com/planck.js/ )

• 《Tippy.js》：Tippy.js 是基于纯粹的 JavaScript 的轻量级无添加的 ToolTip 库。( https://atomiks.github.io/tippyjs/)

• 《Deck.gl》：Deck.gl 是 Uber 出品的基于 WebGL 的支持大规模数据可视化的库，其能够用于对大型数据集中的数据进行可视化探索与展现。( https://uber.github.io/deck.gl/#/ )

• 《React Data Grid》：基于 React 构建的类似于 Excel 的网格组件，其提供了编辑、键盘导航、复制粘贴等多种功能。( https://github.com/adazzle/react-data-grid )

前端之巅

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