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

前端每周清单：Instant App将至，WebAssembly将获默认支持，PWA实践渐增 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web 前端入门与工程实践。更多阅读清单请转向往期索引。

前端每周清单

新闻热点

前端领域最新动态

• 《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/... )

• 《基于 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/... )

• 《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... )

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

• 《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/... )

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

巅峰人生

一览众山，聆听巅峰故事