前端每周清单第 4 期：React Router 4.0 发布、Firefox 52 默认支持 WebAssembly、苹果热修复门盘点

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

新闻热点

国内国外，前端最新动态

• 《苹果「热修复门」事件复盘、分析和展望》：近日，部分使用 Rollout.js 或者 JSPatch 的开发者表示其应用在提交审核时受到了警告，表示因为应用可能会在运行时改变其功能特征而被打回。与此同时 React Native、Weex 等混合开发技术人员也表示了担心。一时间众说纷纭，有说是针对热修复的，有说是 RN 也收到警告邮件的，恰逢微软发布 Visual Studio 2017，推出了开发 React Native for iOS 功能，还有说苹果借此来反制微软的。到底事情真相如何，目前都有哪些动向，会带来什么影响，此文进行了全面盘点。
• 《Let’s Encrypt 升至 SSL 证书提供商首位》：随着 HTTPS 浪潮的来临，越来越多的金融站点、在线存储以及其他网站使用 SSL 来加密传输数据。而作为开源免费的 SSL 证书提供商，Let’s Encrypt 超越 COMODO CA Limited、GeoTrust Inc.、GoDaddy 成为了占据市场份额最多的厂商。
• 《Firefox 52 版本发布》：本周 Mozilla Firefox 团队正式发布 Firefox 52 版本，自此 Firefox 成为第一个默认支持 WebAssembly 的浏览器。同时 Firefox 还优化了安全机制，当用户在非安全页面输入密码时会进行安全提示。此外本版本还引入了 CSS Grid、async/await 支持等特性。
• 《React Native 中的 FlatList 组件》：3 月 1 日开始 ReactNative 中的 FlatList 正式从测试包中移动至正式包中；我们在项目开发中可以使用 FlatList、SectionList、VirtualizedList 来替代传统的即将被移除的 ListView。
• 《React Router 4.0 正式版发布》：今日 React Training 宣布 React Router 4.0 正式版发布，该版本相较于前面三个版本有根本性变化，遵循 Just Component 的 API 设计理念。

开发教程

步步为营，掌握基础技能

• 《Vue.js 实用技巧》：本文来自于饿了么大前端的 cinwell， Vue.js 2.0 已经发布了有一段时间，生态链也日渐完善。作者在使用 Vue.js 开发项目时收集的一些工具和使用技巧，分享给各位。
• 《GraphQL 名词 101：解析 GraphQL 的查询语法》：GraphQL 日渐成为数据查询的主流标准之一，整个生态圈也蓬勃发展。本文则由浅入深地详细介绍基础的 GraphQL 格式与关键字，有助于初学者对于 GraphQL 的使用形成体系认知。
• 《结合 Firebase 构建完整 Angular 认证系统》：该作者在视频中详细介绍了如何利用 Angular 2 构建前端界面，并且使用 Firebase 作为后端存储支撑来构建完整的认证系统。
• 《循序渐进在 Sketch 中创建完整的 APP 设计项目》：本文作者介绍了如何在 Sketch 创建完整的应用设计系统，从最简单的创建文件夹开始，到颜色选择、排版设置、网格配置到最后的页面到发布等等。
• 《使用 Service Worker 与 Background Sync 进行延迟请求》：本文作者以信息发送为例，介绍了如何利用 Service Worker 与 Background Sync 来当用户离线时保留用户请求信息，直到用户重新在线时自动完成请求，将信息发送出去。
• 《Service Worker 测试》：本文介绍了一些用于测试 Service Worker 的实践技巧与方法，来保证你的站点在离线时也能有正确地响应与操作。
• 《Angular 应用中的状态管理》：本系列文章介绍了如何利用 ngrx/store 与 ngrx/effects 对典型的 Angular Todo 应用进行状态管理。

工程实践

立足实践，提示实际水平

• 《vue2-elm》：基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用，涉及注册、登陆、商品展示、购物车、下单等等，是一个完整的流程。挺不错的学习参考资料。
• 《ReactNative 性能优化实践》：日前有人表示 React Native 在 Android 上表现不佳，本文则是作者对于潜在的性能问题提出的优化方案。作者首先分析了常见的 Overdraw 问题以及可能的问题源与解决方案，然后介绍了列表中常见的 GPU 渲染瓶颈以及解决方案。
• 《JavaScript 图片处理库盘点》：图片处理一直是客户端开发中的常见问题，本文则是对基于 JavaScript 的常见的进行图片滤镜、裁剪等操作的库进行了盘点；本文横向比较了 CamanJS、glfx.js、grafi.js、Jimp 以及 Filtr2 这几个常用的图片处理库，并且给出了不同业务场景下的选用建议。
• 《Slack 是如何减少其客户端内存占用的》：本文是 Slack 在其桌面应用的开发过程中探索出的如何减少应用内存开销的经验介绍。Slack 最初为用户的每个登录团队都启动了相同的处理进程，而后根据调研发现仅有部分用户会同时使用多个团队；因此 Slack 从卸载后台团队的 DOM 树、分拆 JavaScript 代码进行优雅降级、重构 JavaScript 代码库等多个方式来优化桌面应用的内存占用。
• 《别被现在的密码设置原则骗了》：最近 CIA 的黑客工具箱曝光于众，也引发了大家对于系统安全的担忧；本文作者则是从应用系统权限认证中密码设置原则的角度出发，首先指出现存的很多所谓密码原则（譬如必须是 8~32 个字符、必须包含字母数字等）还是存在一些漏洞，并不能完全依赖于这些原则，最后也提出了自己对于现在云计算与 GPU 运算的环境下如何构建有效地密码设置体系进行了介绍。
• 《React 中 setState 的函数式用法》：React 生态圈中一直崇尚所谓函数式编程理念，而本文作者介绍了如何利用 setState 函数的回调来实现 setState 的函数式用法；就像 Redux 中的 reducer 一样，能够独立声明于组件外，然后声明式的使用，从而保证组件更新逻辑的清晰与可测试性。

深度阅读

深度思考，升华开发智慧

• 《我理解的“大前端”或“大无线”》：本文主要是介绍作者所在团队最近的一些变化和思考，包括前言、NodeJS 职能变化、ReactNative 的大规模应用、专门的架构组职能、总结五部分。
• 《Base64 编码与性能得失》：在 HTTP 1.x 的时代，为了减少网络请求数，我们会将小图片以 Base64 编码的方式插入到网页中直接返回。本文则是对于 Base64 编码的基本原理、编码之后带来的包体增加与解析时间损耗、使用 preload 替代 Base64 等知识进行了分析。
• 《ReactRouter-V4 构建之道与源码分析》：本文介绍了 React Router V4 的设计思想，一步一步由浅入深地介绍如何从零开始构建一个类似于 React Router V4 这样的秉持路由即组件的思想的路由框架。
• 《大型可扩展系统的设计之道》：本文深入浅出地介绍了大型可扩展系统的基本组成，我们从客户端发起的请求会在后端经过怎样的奇幻漂流之后形成响应数据，是个前端开发者不错的拓宽视野的阅读资料。
• 《流行网站上陈旧的 JavaScript 库留存调研》：本文是 Tobias Laudinger 及其合作者对于客户端 JavaScript 库的使用现状的调研报告；基于对于超过 133K 个网站的调查结果，它们发现大约 37% 的站点仍然使用了某些存在已知漏洞的 JavaScript 客户端脚本，它们建议我们一定要慎重思量网站中引入的外部依赖，特别是对于那些已经运行了很久的站点。
• 《来自 Formidable 的 2017 React Naive 技术栈》：本文是来自 Formidable 的工程师 Jani Eväkallio 介绍的他们在 2017 选定的 React Native 开发技术栈，包括构建工具、组件库、状态管理等等方面。

开源项目

乐于分享，共推前端发展

• 《基于 Vue2 与 Element-UI》的管理系统模板：基于 Vue.js 2.x 系列 + Element UI 的后台管理系统解决方案。
• 《PWA Builder》：随着 PWA 的日渐发展，Manifoldjs 也转型成为 PWA 应用在线构建工具；该工具为用户提供了在线构建 Manifest、自动生成多格式 Icon、创建 Service Worker、发布 PWA 等多种服务。
• 《UnCSS》：UnCSS 能够帮助你从样式表中移除 HTML 中未被用到的样式，它支持多文件以及 JavaScript 样式定义，并且提供了接口、命令行、构建插件、POSTCSS 插件等多种使用方式。
• 《命令行图片压缩工具探讨》：本文对于基于 ImageMagic 进行常见的图片、压缩转换任务进行了介绍。
• 《Vue.js 前端框架比较》：本文是对常用的基于 Vue.js 的前端框架的比较。

巅峰人生

一览众山，聆听巅峰故事

• 《创业公司的 CTO 不是人干的》：清华到 360，再到创业公司 CTO，熊猫 CTO 黄欢直播喊麦的背后，默默总结出了切身感悟：勇敢承认自己差，但可以不服输；越容易学到的东西，含金量也越低；牛人背后，都有苦逼积累期。

感谢韩婷对本文的审校。

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