前端每周清单第 44 期: 2017 JS 调查报告、REST 接口实时化、ESM 的过去与将来

前端每周清单专一前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID ： frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• FCC 废除网络中立法案: 所谓的网络中立性，要求网络服务供应商不能优待或者故意限制来自某些网站的流量。前总统奥巴马在 2015 年签署命令，规定以 1934 年经过的《联邦通信法》“ 第二类 ” 业务来规管网络服务供应商，让联邦通信委员会执法，禁止网络服务供应商优待任何公司。美国联邦通信委员会（Federal Communications Commission, FCC ）早前经过废除网络中立性的规定，再也不明文禁止网络服务供应商优待来自特定网站的流量。

• Expo SDK v24.0 发布: 本周 Expo SDK 24.0 正式发布，其基于 React Native 0.51 版本；同时 Expo 的官方网站也迎来了极大的更新，搜索、项目建立、发现等界面都面目一新。该版本中添加了离线图片支持功能，避免了每次应用初始化时都须要进行网络图片加载；同时添加了 iOS 权限对话框的配置，优化了 ImageManipulator, ImagePicker 等接口的功能。

• React Studio 1.3 发布: React Studio 是图形化可交互地 React 应用开发工做台，本文便是介绍最新的 1.3 版本中包含的系列特性。首先是总体性能与交互体验的提高，而且增长了对多语言的支持，同时优化了 Mock 数据的建立方式；此外，该版本还引入了新的卡片、选择器等等一系列新的组件。

开发教程

步步为营，掌握基础技能

• JavaScript 基础代码片: 本文整理了许多简明精巧的 JavaScript 开发中用到的代码片，既适合于初学者学习语法，也能帮助开发者温故知新。本文包含了数组的常见处理、浏览器元素与位置、时间与日期、函数与函数式编程、数学公式与计算、Node.js、Object、字符串以及不少的其余工具类；更多 JS 学习资料参考现代 JavaScript 开发：语法基础与工程实践。

• 清除浏览器中的资源缓存: 浏览器缓存是最多见的，也是最显著的提高前端性能的手段之一；不过在若是咱们错误地将某些资源设置为了长期缓存，那么就要寻求方法强制刷新这些资源。本文便是介绍讨论如何强制刷新浏览器的某些资源缓存，做者依次讨论了 location.reload, vary + fetch, fetch + cache:reload, fetch + POST, iframe 中进行 POST, Clear-Site-Data 等方法；更多浏览器的存储操做参考现代 Web 开发基础。

• 基于 Vue.js 的 RSA 加密通讯应用: 加密是现代互联网的基石之一，本文便是但愿经过构建简单的加密聊天应用，来引导读者了解加解密算法的基本概念。本文首先介绍了 2048 位的 RSA 加密算法的概念与实现方式，而后使用 Vue.js 来编写前端界面，而且使用 Node.js 以及 Socket.io 来编写服务端来协调各个客户端的消息。更多 Vue.js 相关资料参考 Vue.js Reference。

工程实践

立足实践，提示实际水平

• ESM 的目前实现与将来规划: ES 模块化标准最先是 2015 年在 ECMAScript 6 中发布，如今咱们已经能够在三个主流浏览器中使用 ES Modules。而 Node.js 目前是采用了 Common.js 模块化方案，咱们能够在应用中经过 require 方法来引入其余模块。两种模块机制的巨大差别使得同时兼容 Common.js 与 ESModule 并不是易事；而自 Node.js 8.9.0 以来，开发者能够实验性地使用 ESModules，本文便是对于社区的反馈以及 ESM 的将来规划进行介绍。更多相关资料参考 JS Reference。

• 基于 Apollo 的组件数据交互: 本文是 Werkspot 的工程师分享的他们协同使用 Apollo Client 与 React Native 来开发应用的实践经验，着重讨论了 GraphQL 带来的易用性与灵活性。做者首先讨论了查询组件的构成，而后分析了如何结合查询组件与 Mutations，最后讨论了如何测试查询组件；更多 GraphQL 相关资料参考这里。

• 将 REST APIs 转化为实时 APIs: 实时交互式现代技术栈中的重要组成，从而知足用户与企业的高速频繁地数据需求；本文便是介绍如何利用开源的 Pushpin 来将 REST API 转化为实时 API。本文首先介绍了请求-响应架构与事件驱动架构地区别，而后对比了现有的事件接口的解决方案，最后介绍了 Pushpin 的特性与部署方式。更多服务端架构讨论参考服务端应用程序开发基础。

• Electron 开发跨平台构建流程设计: 这是 Electron 系列文章的第二篇，本文将和你们分享我是怎么去构建自动化的 Electron 开发构建工程的，说白了，就是怎么把敲的代码变成一个用户能够下载安装的包。固然随着以后应用复杂度的提高和技术再选型，工程体系可能随时会重构或演进，但至少能够给你们一些参考，欢迎留言交流。工程自动化，应该是全部开发者的一种基础追求，当你搭建建好工程体系，之后你将专一于产品功能的开发，而不会花大量没必要要的时间去手动构建。更多 Electron 相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• The State of JavaScript 2017: 通过漫长的调研与数据整理以后，2017 年的 JavaScript 使用报告正式发布；本报告汇聚了来自数万名开发者对于语法、前端框架、状态管理、服务端框架、测试、CSS 、构建工具、移动端框架等等大前端相关技术栈的见解与使用体验。本报告仍然采起了乐于使用、正在使用、准备使用、不感兴趣、没听过等几个层次来描述开发者对于某个框架或者工具的见解；此外，本报告还提供了所谓 Connections 图解，即衡量使用者不一样技术之间的关联度，譬若有多少 React 的使用者仍然使用了 Redux 等等。更多 JS 教程参考现代 JavaScript 开发：语法基础与工程实践。

• NectarJS: 将 JavaScript 编译为平台相关的二进制代码: 本文做者 Adrien Thierry 近年来致力于，打造将 JavaScript 编译为平台相关的二进制代码的途径，其在本文中介绍了开源的 NectarJS 的设计理念与运行机制。做者将 NectarJS 定位为编译即服务，即可以在优化 JavaScript 自己性能的同时，支持将其编译为 WebAssembly、IoT、Windows、OSX、Linux 等等各个平台或者目标的格式。更多 JS 教程参考现代 JavaScript 开发：语法基础与工程实践。

• REST 就是新时代的 SOAP: 本文做者分享了其对于 REST 的见解，不可避免地带有主观色彩，能够辩证地去看待。做者首先讨论了 RESTful API 的不足，其抽象简练的原则每每不能知足真实业务场景中的问题；而后做者又讨论了 REST 动词、错误处理乃至于基础概念上的不足，做者并未在本文中讨论他理想的解决方案，只是抛出了不少问题留待读者去思考。更多服务端架构讨论参考服务端应用程序开发基础。

• 利用机器学习突破图片验证码: 图片验证码是现代网页中常见的安全防火墙之一，可以用于人机识别，避免爬虫等恶意抓取行为；本文则是以著名的 WordPress 图片验证码插件为例，介绍如何使用机器学习来突破验证码的限制。本文做者主要使用了 Python 3, OpenCV, Keras, TensorFlow 这些常见的机器学习库与工具，首先介绍了如何使用 WordPress 的插件创造训练数据集，而后介绍了深度卷积神经网络的基本原理以及如何进行神经网络的训练，最后介绍了如何使用训练好的模型进行图片识别。更多 Web 安全相关资料参考这里。

开源项目

乐于分享，共推前端发展

• exercism.io: Exercism 提供了超过三十种编程语言的数百个实践问题，以帮助开发者在实践中学习而且掌握某个编程语言。Exercism 还提供了便捷的客户端工具，帮助开发者快速搭建实验环境，而且容许开发者分享本身的看法与解决方案。

• Microbundle: Microbundle 是基于 Rollup 构建的零配置小模块打包工具，开发者只须要安装，而且在 package.json 内配置基础命令便可使用。Microbundle 会自动检测 index.js 或者 cli.js 这样的文件，做为入口文件，自动编译为 CommonJS、UMD 、 ESM 等多种格式。

• WAlt: WAlt 能够做为 WebAssembly 文本格式的中介，其尝试使开发者利用 JavaScript 的语法来直接编写 .walt 代码，而后直接编译为 WebAssembly。WALt 的优点在于，其并不须要 C/C++ 或者 Rust 环境，而只须要了解 JavaScript；而且编译的过程也不须要 LLVM 等二进制工具，还可以集成于 Webpack 等工具。

巅峰人生

• 10 年 IT 老兵：思路上的转变，远比单纯提高技术更有价值: 本文节选自赵成教授在极客时间 App 开设的“赵成的运维体系管理课”，是其对本身十年技术生涯的回顾与总结。赵成教授来自美丽联合集团，集团旗下两大主力产品是蘑菇街和美丽说，目前负责管理集团的技术服务团队。做者在本文中依次分享了为何我选择了踏上运维之路？、运维思路上的转变，远比单纯提高运维技术更有价值、专栏的构成等内容。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，注明 “ 前端之巅投稿 ”。