3.1-Frontend

# 前端每周清单：Instant App 将至，WebAssembly 将获默认支持，PWA 实践渐增

新闻热点

前端领域最新动态

• 《WebAssembly 成员就 API 设计与二进制格式达成一致》：近日，WebAssembly CG 成员单位 Chrome、Edge、Firefox 以及 Webkit 就初始版本的 WebAssembly API 以及 二进制格式达成一致，标志着浏览器预览阶段的结束，各大浏览器会开始默认支持 WebAssembly，让我们拭目以待。( http://suo.im/AXQU )

• 《斯坦福 CS 授课开始用 JavaScript 替换 Java》：今年春学期，斯坦福计划将 CS106J 课程实验性地使用 JavaScript 而不是 Java 进行教学；并且将 CS106S: “Programming Abstraction and Social Good” 作为独立课程发布，鼓励学生思考他们未来能够承担的社会职位。( http://suo.im/4DY8LJ )

• 《Ant Design 2.7.3 发布，阿里前端设计语言&前端框架》：Ant Design 2.7.3 发布了，Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。( http://suo.im/3hwBf9 )

• 《备受瞩目的 Instant App 即将到来》：Android 一向致力于让用户能以更加省力的方式发现并使用各种应用，而 Android Instant App 正是这一理念的集中体现——这是一种用户无需安装即可运行 Android 应用的全新方式。( http://suo.im/1AddvL )

开发教程

步步为营，掌握基础技能

• 《CSS Grid 指南》: 网格系统是布局设计的核心之一，在 Web 开发中我们经常需要借助第三方库来创建合适的网格系统。而 CSS Grid 则是一个二维布局系统，能够辅助开发者创建基于网格的用户界面，此文则是详细地介绍 CSS Grid 的语法细节以及调试实例。( https://tympanus.net/codrops/css_reference/grid/ )

• 《基于 Vue.js 开发一个 Pokemon Battle 指南》: 本文是非常详细的如何利用 Vue.js 开发一个宠物小精灵的战斗场景的教程，还是挺有意思的。( http://suo.im/1jwicW )

• 《Web 常见权限认证技术详解》：此文详细阐述了 Web 开发中常用的权限认证技术，首先介绍了 Web 开发中与权限相关的常见名词，而后介绍了 HTTP Basic Authentication、基于 Session 的认知、基于 Token 的认证、JWT、OAuth 以及 OpenID。( https://github.com/teesloane/Auth-Boss )

• 《ECMAScript 4 背后的故事》: 本文是对于 1999 ~ 2008 年之间 JavaScript 世界发生的大事件的详细介绍，阐述了 ECMAScript 4 从提出到角力到流产的前世今生。( http://suo.im/phBiE )

• 《React Native 与 Swift 性能对比》：作为混合式开发框架，React Native 在运行时仍然会实际调用 Objective-C 或者 Java。此文作者同时用 Swift 与 React Native 构建了相同的应用，并且从 CPU、GPU、内存使用、电池耗费等多个角度对这二者进行性能分析。结果表明二者性能相差无几，Swift 在 CPU 占用略占优势，二者的 GPU 占用不相伯仲，而 React Native 在内存上则有一定长处。( http://suo.im/2MWZnA )

• 《React 与 MobX 开发中的测试驱动开发》: 本文对于 React 与 MobX 的基本使用进行了介绍，阐述了为何作者认为 MobX 是个不错的 Redux 的替代以及如何对 MobX 进行单元测试。( http://suo.im/2PE2A6 )

• 《基于 React 与 GraphQL 的全栈开发指南》：GraphQL 最早由 Facebook 提出以解决复杂多变的查询问题，弥补 REST 中的不足。它允许界面组件以声明式获取数据而忽略后端实现细节。本系列文章是由 Apollo 团队提供，讲解如何基于 React 与 GraphQL 开发应用。( http://6me.us/O6p )

工程实践

立足实践，提示实际水平

• 《React 开发中的 10 个微模式》：此文是 Gilbertson 在工作中总结而来的 React 开发中常见的设计模式总结，譬如输入域的唯一标识分配、CSS 控制等等 。( http://suo.im/42S8Kb )

• 《美团点评前端无痕埋点实践》：构建一个数据平台大体上包括数据采集、数据上报、数据存储、数据计算，以及数据的可视化展示等几个重要的环节。前端数据采集与上报是整个流程中最重要的一环，只有确保前端数据生产的全面、准确、及时，最终产生的数据结果才是可靠的、有价值的。为了解决前端埋点的准确性、及时性、开发效率等问题，业内各家公司从不同角度，提出了多种技术方案，本文则是美团点评前端无痕埋点实践。( http://suo.im/fVPpT )

• 《工程实践中的 PWA 利器清单》: 本文是 Google Chrome 团队的 Addy Osmani 所写，介绍了这两年来他们团队开发或者推荐的一系列能够用于生产环境的 PWA 开发工具或者辅助库。此文作者同时来列举了目前在很多主流站点应用 PWA 之后带来的一系列包括离线优先、首屏加载优化等提升用户体验的实践案例。( http://suo.im/1IxGPJ )

• 《深入了解 JavaScript 中错误对象与堆栈跟踪》：JavaScript 中 Error 对象的堆栈跟踪信息包含了从异常抛出点到构造函数的所有栈帧信息，而手动地去捕获与操作堆栈跟踪信息有助于我们在开发测试或者异常处理相关的框架时有更好地实践。( http://suo.im/MiMWd )

• 《Airbnb 使用 React 重构搜索功能的实践》：早在 2015 年，Airbnb 的工程团队就决定将 React 作为主要的前端开发栈，不过因为其搜索页面过于复杂因此直到 2016 年初才开始迁移工作。本文就是 Airbnb 进行代码重构的经验介绍。( http://6me.us/2mS )

• 《百度搜索对 PWA 的探索和初步实践》: 本文是百度搜索资深 Web 前端工程师沈洲在前端之巅微信群中的分享整理总结而成，介绍了百度天气 PWA 应用的开发实践，本周还分享了《PWA 实践：从一个简单的页面开始》与《PWA 实践：理解和创建 Service Worker 脚本》等 PWA 相关内容 。(http://6me.us/JS85s)

深度阅读

深度思考，升华开发智慧

• 《对于在浏览器中使用 UDP 协议的一系列考虑》: 现代浏览器与网站大多构建于 HTTP 协议之上，而对于类似 agar.io 这样的实时游戏往往会选择 WebSockets 协议。此文作者首先介绍了下这些基于 TCP 的应用层协议面对的所谓对头阻塞问题，然后又讨论了 QUIC 以及 WebRTC 在构建专用服务器时的不足。最后，作者分析了使用 UDP 作为传输协议存在的问题，并且提出了 netcode.io 这个轻量级的传输加密的基于 UDP 封装的网络协议。( http://suo.im/3j4EV6 )

• 《对比探秘 WebAssembly 性能优越之谜》: 本系列文章通过有趣的漫画介绍了 WebAssembly 的前世今生，并且与 JavaScript 就加载、解析、编译、执行等浏览进行了详细对比，从而介绍 WebAssembly 的性能缘何相较于 JavaScript 会好上很多。同时作者也强调，WebAssembly 与 JavaScript 各有所长，未来并不会存在太多的竞争，更多的是相辅相成，各司其职。( http://suo.im/3jsTUH )

• 《为何使用 Node.js》：本文来自于 Node.js 的技术专家 Tomislav Capan，此文最早发布于 2013 年，详细介绍了 Node.js 的内部原理，并且论述了 Node.js 适用的业务场景与典型的范模式。( http://suo.im/3sFwvm )

• 《槽糕的 JavaScript 框架们》：此文作者 Matt Burgess 严肃地吐槽批评了几乎所有的现今流行的 JavaScript 框架，与他上一篇文章伟大的 JavaScript 框架一起阅读效果更佳。当然，作者并不是想让大家回到茹毛饮血的岁月，而是希望能以辩证地态度去认识与使用框架。( http://6me.us/e9R )

• 《当我们在谈大前端的时候，我们谈的是什么》：大前端到底指的是什么？事实上大前端并没有明确的定义，它由国内业界发明，甚至没有对应的英文词汇。在客户端开发上，Native 与 HTML5 之争持续快十年，吵了人们都失去兴趣了，从现在来看，并没有谁取代谁，而是有融合的趋势，融合之后的产物就是大前端。本文则是对于大前端的一些探讨，还可以参考《大前端年终总结与展望：大前端时代即将来临？》。( http://6me.us/5XC )

• 《来自 Google 的 API 设计指南》：这是来自于 Google 的网络 API 设计指南，最早于 2014 在 Google 内部推行，指导了包括 Cloud APIs 等在内的一系列对外服务。该指南同时适用于 REST API 与 RPC API，特别是 gRPC API。( http://6me.us/dgoI )

开源项目

乐于分享，共推前端发展

• 《notie》：这是一个轻量级的、零依赖的面向 JavaScript 的通知、输入以及选择套件库。它允许弹出警示信息、确认输入框、允许用户输入信息、允许用户进行选择以及进行日期选择等。( https://github.com/jaredreich/notie )

• 《跨浏览器通用存储接口 Store.js》：Store.js 能够根据浏览器情况自动选择合适的底层存储，并且提供了统一的 API 接口。Store.js 始于 2010 年，目前已经被运用到数以千计的站点中。而近日 Store.js 发布了 2.0 版本，其提供了完整的可插拔式的存储支持以及大量的附加功能。( https://github.com/marcuswestin/store.js )

• 《Rapscallion》：React 服务端渲染的性能一直是广为诟病，相较于其他前端框架会满上很多，笔者在此文中也进行过简要探讨。而 Rapscallion 则是新的支持 React 服务端渲染的开源包体，它支持异步非阻塞渲染，相较于renderToString其能达到将近 50% 的性能提升。同时 Rapscallion 官方还为我们准备了基于 Redis 的缓存实例。( http://suo.im/3YS6pz )

• 《在浏览器中实现自动驾驶汽车》：人工智能与深度学习的浪潮滚滚而来，也给我们带来了很多有趣的应用。该项目利用 JavaScript 创建了一个完整的自我学习的代理，能够在一个 2D 环境下控制某个车辆自动规避各种障碍 。用户还可以通过鼠标绘制出新的障碍，而小车可以通过强化学习不断进行自我更新，值得一试。( http://suo.im/4egERz )

• 《Caporal.js》：特性全面的可用于创建 Node.js 命令行工具的框架，包括了帮助信息生成、自动补全等。( https://github.com/mattallty/Caporal.js )

• 《Gutenberg》：网页打印时的格式错乱一直是个头痛的问题，而 Gutenberg,css 提供了一系列基本的仅在打印时才会加载的样式，优化专用于打印的格式显示。( https://github.com/BafS/Gutenberg )

巅峰人生

一览众山，聆听巅峰故事