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

前端每周清单：React Router 4.0发布、Firefox 52默认支持WebAssembly、苹果热修复门盘点 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web 前端入门与工程实践。更多阅读清单请转向往期索引。

前端每周清单

新闻热点

前端领域最新动态

• 《苹果封杀带有热更新特性的应用》：近日，部分使用 Rollout.js 或者 JSPatch 的开发者表示其应用在提交审核时受到了警告，表示由于应用可能会在运行时改变其功能特征而被打回。与此同时 React Native、Weex 等混合开发技术人员也表示了担忧，不过 Rollout.js/JSPatch 都会暴露底层接口给 JavaScript 调用，而 RN 只是内部使用了原生方法，而且Apple 也容许使用 JavaScriptCore 更新代码（CodePush 这类的是符合要求的）。( http://6me.us/ZXEz )

• 《Let's Encrypt 升至 SSL 证书提供商首位》：随着 HTTPS 浪潮的来临，愈来愈多的金融站点、在线存储以及其余网站使用 SSL 来加密传输数据。而做为开源免费的 SSL 证书提供商，Let's Encrypt 超越 COMODO CA Limited、GeoTrust Inc.、GoDaddy 成为了占据市场份额最多的厂商。( http://6me.us/1Od )

• 《Firefox 52 版本发布》：本周 Mozilla Firefox 团队正式发布 Firefox 52 版本，自此 Firefox 成为第一个默认支持 WebAssembly 的浏览器。同时 Firefox 还优化了安全机制，当用户在非安全页面输入密码时会进行安全提示。此外本版本还引入了 CSS Grid、async/await 支持等特性。( http://6me.us/rtkX )

• 《React Native 中的 FlatList 组件》：3 月 1 日开始 ReactNative 中的 FlatList 正式从测试包中移动至正式包中；咱们在项目开发中可使用 FlatList、SectionList、VirtualizedList 来替代传统的即将被移除的 ListView。( http://6me.us/dqiO1 )

• 《React Router 4.0 正式版发布》：今日 React Training 宣布 React Router 4.0 正式版发布，该版本相较于前面三个版本有根本性变化，遵循 Just Component 的 API 设计理念。( http://6me.us/rov8c )

开发教程

步步为营，掌握基础技能

• 《Vue.js 实用技巧》：本文来自于饿了么大前端的 cinwell， Vue.js 2.0 已经发布了有一段时间，生态链也日渐完善。做者在使用 Vue.js 开发项目时收集的一些工具和使用技巧，分享给各位。( http://6me.us/alZ )

• 《GraphQL 名词 101：解析 GraphQL 的查询语法》：GraphQL 日渐成为数据查询的主流标准之一，整个生态圈也蓬勃发展。本文则由浅入深地详细介绍基础的 GraphQL 格式与关键字，有助于初学者对于 GraphQL 的使用造成体系认知。( http://6me.us/K7SMyO )

• 《结合 Firebase 构建完整 Angular 认证系统》：该做者在视频中详细介绍了如何利用 Angular 2 构建前端界面，而且使用 Firebase 做为后端存储支撑来构建完整的认证系统。( http://6me.us/PxWiA )

• 《按部就班在 Sketch 中建立完整的 APP 设计项目》：本文做者介绍了如何在 Sketch 建立完整的应用设计系统，从最简单的建立文件夹开始，到颜色选择、排版设置、网格配置到最后的页面到发布等等。( http://6me.us/DJgEx)

• 《使用 Service Worker 与 Background Sync 进行延迟请求》：本文做者以信息发送为例，介绍了如何利用 Service Worker 与 Background Sync 来当用户离线时保留用户请求信息，直到用户从新在线时自动完成请求，将信息发送出去。( http://6me.us/IrTKkz )

• 《Service Worker 测试》：本文介绍了一些用于测试 Service Worker 的实践技巧与方法，来保证你的站点在离线时也能有正确地响应与操做。( http://6me.us/4uzz )

• 《Angular 应用中的状态管理》：本系列文章介绍了如何利用 ngrx/store 与 ngrx/effects 对典型的 Angular Todo 应用进行状态管理。( http://6me.us/jMVVqk )

工程实践

立足实践，提示实际水平

• 《vue2-elm》：基于 vue2 + vuex 构建一个具备 45 个页面的大型单页面应用，涉及注册、登录、商品展现、购物车、下单等等，是一个完整的流程。挺不错的学习参考资料。( https://github.com/bailicangd... )

• 《ReactNative 性能优化实践》：日前有人表示 React Native 在 Android 上表现不佳，本文则是做者对于潜在的性能问题提出的优化方案。做者首先分析了常见的 Overdraw 问题以及可能的问题源与解决方案，而后介绍了列表中常见的 GPU 渲染瓶颈以及解决方案。( http://6me.us/qX63f )

• 《JavaScript 图片处理库盘点》：图片处理一直是客户端开发中的常见问题，本文则是对基于 JavaScript 的常见的进行图片滤镜、裁剪等操做的库进行了盘点；本文横向比较了 CamanJS、glfx.js、grafi.js、Jimp 以及 Filtr2 这几个经常使用的图片处理库，而且给出了不一样业务场景下的选用建议。( http://6me.us/ylUyM )

• 《Slack 是如何减小其客户端内存占用的》：本文是 Slack 在其桌面应用的开发过程当中探索出的如何减小应用内存开销的经验介绍。Slack 最初为用户的每一个登陆团队都启动了相同的处理进程，然后根据调研发现仅有部分用户会同时使用多个团队；所以 Slack 从卸载后台团队的 DOM 树、分拆 JavaScript 代码进行优雅降级、重构 JavaScript 代码库等多个方式来优化桌面应用的内存占用。( http://6me.us/z0XSh3 )

• 《别被如今的密码设置原则骗了》：最近 CIA 的黑客工具箱曝光于众，也引起了你们对于系统安全的担心；本文做者则是从应用系统权限认证中密码设置原则的角度出发，首先指出现存的不少所谓密码原则（譬如必须是 8~32 个字符、必须包含字母数字等）仍是存在一些漏洞，并不能彻底依赖于这些原则，最后也提出了本身对于如今云计算与 GPU 运算的环境下如何构建有效地密码设置体系进行了介绍。

• 《React 中 setState 的函数式用法》：React 生态圈中一直崇尚所谓函数式编程理念，而本文做者介绍了如何利用 setState 函数的回调来实现 setState 的函数式用法；就像 Redux 中的 reducer 同样，可以独立声明于组件外，而后声明式的使用，从而保证组件更新逻辑的清晰与可测试性。

深度阅读

深度思考，升华开发智慧

• 《我理解的“大前端”或“大无线”》：本文主要是介绍做者所在团队最近的一些变化和思考，包括前言、NodeJS职能变化、ReactNative的大规模应用、专门的架构组职能、总结五部分。。( http://6me.us/Md2 )

• 《Base64 编码与性能得失》：在 HTTP 1.x 的时代，为了减小网络请求数，咱们会将小图片以 Base64 编码的方式插入到网页中直接返回。本文则是对于 Base64 编码的基本原理、编码以后带来的包体增长与解析时间损耗、使用 preload 替代 Base64 等知识进行了分析。 ( http://6me.us/vTB6A )

• 《ReactRouter-V4 构建之道与源码分析》：本文介绍了 React Router V4 的设计思想，一步一步由浅入深地介绍如何从零开始构建一个相似于 React Router V4 这样的秉持路由即组件的思想的路由框架。( http://6me.us/jfUwEw )

• 《大型可扩展系统的设计之道》：本文深刻浅出地介绍了大型可扩展系统的基本组成，咱们从客户端发起的请求会在后端通过怎样的奇幻漂流以后造成响应数据，是个前端开发者不错的拓宽视野的阅读资料。( http://6me.us/NjAHhu )

• 《流行网站上陈旧的 JavaScript 库留存调研》：本文是 Tobias Laudinger 及其合做者对于客户端 JavaScript 库的使用现状的调研报告；基于对于超过 133K 个网站的调查结果，它们发现大约 37% 的站点仍然使用了某些存在已知漏洞的 JavaScript 客户端脚本，它们建议咱们必定要慎重思量网站中引入的外部依赖，特别是对于那些已经运行了好久的站点。( http://6me.us/csu2da )

• 《来自 Formidable 的 2017 React Naive 技术栈》：本文是来自 Formidable 的工程师 Jani Eväkallio 介绍的他们在 2017 选定的 React Native 开发技术栈，包括构建工具、组件库、状态管理等等方面。( http://6me.us/yH2yE )

开源项目

乐于分享，共推前端发展

• 《基于 Vue2 与 Element-UI》的管理系统模板：基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。( https://github.com/lin-xin/ma... )

• 《PWA Builder》：随着 PWA 的日渐发展，Manifoldjs 也转型成为 PWA 应用在线构建工具；该工具为用户提供了在线构建 Manifest、自动生成多格式 Icon、建立 Service Worker、发布 PWA 等多种服务。( http://6me.us/VW9nG )

• 《UnCSS》：UnCSS 可以帮助你从样式表中移除 HTML 中未被用到的样式，它支持多文件以及 JavaScript 样式定义，而且提供了接口、命令行、构建插件、POSTCSS 插件等多种使用方式。( https://github.com/giakki/uncss )

• 《命令行图片压缩工具探讨》：本文对于基于 ImageMagic 进行常见的图片、压缩转换任务进行了介绍。( http://6me.us/WYOP1 )

• 《Vue.js 前端框架比较》：本文是对经常使用的基于 Vue.js 的前端框架的比较。( http://6me.us/5E8wN )

巅峰人生

一览众山，聆听巅峰故事