3.2-Frontend

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

新闻热点

前端领域最新动态

• 《苹果封杀带有热更新特性的应用》：近日，部分使用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/bailicangdu/vue2-elm )

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

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

巅峰人生

一览众山，聆听巅峰故事