前端每周清单第 54 期: SwiftNIO, 自定义 vue-router, Web 缓存与 GraphQL 必知必会

看新闻很累？看技术新闻更累？试试下载 InfoQ 手机客户端，每天上下班路上听新闻，有趣还有料！

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

新闻热点

国内国外，前端最新动态

• 苹果开源了 Swift 版 Netty：SwiftNIO : 近日，苹果开源了一款基于事件驱动的跨平台网络应用程序开发框架 SwfitNIO，它有点类似 Netty，但开发语言使用的是 Swift。苹果称 SwfitNIO 的目标是帮助开发者快速开发出高性能且易于维护的服务器端和客户端应用协议。SwfitNIO 并不会提供类似 Web 框架那样的解决方案，而是致力于为上层框架提供底层的构建块。在开发 Web 应用程序时，大部分开发者不会直接使用 SwfitNIO，他们会从 Swift 生态系统众多的 Web 框架中选择一个。不过，这些框架中的大部分都使用了 SwfitNIO。
• Chrome 65 新特性介绍: 本文是对即将发布的 Chrome 65 版本的新特性进行介绍，主要包 含 CSS Paint API, Server Timing API 以及 CSS display: contents 属性。其中 CSS Paint API 允许以 Canvas 那样编程绘制的方式设置元素的 background-image 或者 border-image 属性，Server Timing API 允许服务端在返回的响应头中设置性能相关信息，以方便客户端完整的性能度量。而 display: contents 属性则能够忽略中间元素，适合于 Flexbox 等场景。
• Node v8.10.0 (LTS) & v9.8.0 (Current) : 本周 Node.js v8.10.0 (LTS) 与 v9.8.0 发布，继续带来了一系列的特性更新与优化，包括 V8, libuv, ICU 等方面。

开发教程

步步为营，掌握基础技能

• 2018 GraphQL 必知必会: 大部分开发者都了解如何构建 REST API，也感受过它的红与黑；本文则是对 API 领域的新星， GraphQL 进行介绍与讨论。GraphQL 经常被称作是面向前端的 API 技术方案，因为它允许前端开发者以更简单灵活的方式进行数据请求。该特性也正是弥补了传统 REST API 的一个不足：无法为不同的客户端返回定制化数据；而 GraphQL 的另一个优势在于，能够将原本需要向多接口发起的请求仅向单接口请求。更多相关资料参考 GraphQL Reference 。
• 从零构建 Redux : 很多 Redux 的初学者可能会受困于繁多的 Redux 库，不过 Redux 的核心思想却是非常直观与易于理解的。如果你首先理解了 Redux 的构建思想，再去将其应用在 React 等实际的界面开发场景中，或许更能洞若观火，得心应手。本教程即是在从零构建 Redux 核心库的过程中，循序渐进地讲解 Redux 的设计思想；更多相关内容参考 现代 Web 开发–架构优化篇。
• JavaScript 面试算法题之 Glob Matching : 数据结构与算法相关的问题，往往是面试重要的组成；从作者自身的经验来看，也有越来越多的公司考虑让开发者以 JavaScript 实现某些算法题目。本系列文章都是关注于如何使用 JavaScript 来实现常见的算法，本文则关注于字符串匹配中常见的 Glob Matching；更多相关内容参考数据结构与算法基础。

工程实践

立足实践，提示实际水平

• React 开发中的项目组织与组件命名: 作为界面库，React 并未过多的介入到我们前端项目的代码组织与编排中。这个特性保证了 React 的独立与灵活性，并且允许开发者能够根据自身项目的特性来个性化编排；不过这也会导致一些初学者无所适从。本文中，作者为我们展示了他的项目组织与命名偏好，这些方法并不是重新造轮子，而是希望能够更好地组合它们。更多相关内容参考 React DevPractices Reference 。
• 构建自定义的 Vue Router : vue-router 是 Vue.js 官方的路由框架，其也为我们提供了完整的将组件映射到不同浏览器路由的功能。不过，本文作者觉得在一些简单的应用中我们并不一定需要 vue-router 这样功能完备的库，而可能只需要些许特性；因此作者从零构建了应用于 Vue.js 的简单自定义客户端路由库。本文首先介绍了客户端路由的基本特性与要求，然后以 Pokemon 为例，循序渐进地介绍该库的具体实现。更多相关内容参考 现代 Web 开发–Vue.js 篇。
• Web 缓存: 缓存能够帮助我们优化应用的处理速度，譬如缓存前一次的抓取数据或者计算结果。本文即是对于缓存体系的完整介绍，从浏览器，到 Web 服务器，最后到磁盘与 CPU；本文以自底向上的顺序介绍了不同层次缓存的特性与机制，着眼于数据的存储点而非如何去缓存。更多相关内容参考服务端应用程序开发基础。

深度阅读

深度思考，升华开发智慧

• React 16 之上：Time Slicing 与 Suspense API : 本文是对于近日公布的 React 未来新特性， Time Slicing 以及 Suspense API 进行讲解。Time-Slicing 允许运行在 React Fiber 之上的 React，将对子组件的更新计算切割为不同的块操作，并且在不同的帧中异步执行；而 Suspense API 则允许 ReactJS 将界面的更新推迟到数据抓取完毕，从而提高更好的用户体验与编程模型。更多相关内容参考 现代 Web 开发–React 篇。
• 利用 Web 打造超级计算机: 目前已经有了很多关于使用加密数字货币等基于区块链的技术方案，来挖掘访问网页的客户端的计算潜力，实现去中心化的计算。本文同样尝试去将无数的 Web 浏览器客户端调和打造为超级计算机，不过其未使用区块链等技术，而是利用 WebSocket，从零构建完整的技术方案。本文依次讨论了如何最大化利用节点的计算力，如何在多节点间分发任务并且获取任务结果等内容；更多相关内容参考 DistributedSystem CheatSheet 。
• React 中条件渲染的不同实现: JSX 是不错的用来定义 UI 组件的 JavaScript 扩展，不过其目前并不直接支持循环或者条件表达式；本文即是用不同的方法去实现该需求，也是一篇不错的对于 React 中设计模式的概览。本文根据不同的使用场景，介绍了不同的条件渲染的办法：If/Else, Prevent rendering with null, Element variables, Ternary operator, Short-circuit operator (&& ), Immediately-Invoked Function Expressions (IIFE), Subcomponents, High Order Components (HOCs)。更多相关内容参考 现代 Web 开发–React 篇。

开源项目

乐于分享，共推前端发展

• Propel : Propel 为我们提供了基于 GPU 的类似于 Numpy 这样的科学计算框架。JavaScript 是类似于 Python 这样的动态语言，我们认为其同样能够为科研向的开发者构建合适的工作流。Propel 能够运行在浏览器或者服务端的 Node.js 环境中，不同的环境中 Propel 皆能够使用 GPU 硬件来执行计算任务。浏览器环境下 Propel 利用了 Deeplearn.js 提供的 WebGL 接口，而在 Node.js 环境下则使用了 TensorFlow 的 C 接口。
• mpvue : mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。其主要特性包括：彻底的组件化开发能力：提高代码复用性, 完整的 Vue.js 开发体验, 方便的 Vuex 数据管理方案：方便构建复杂应用, 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload 等。
• Xray : Xray 是 Atom 团队在四年多的经验总结之上，构建的实验性的基于 Electron 的文本编辑器。目前 Xray 正处于快速地迭代开发中，希望能够在未来提供高性能的、可协同编辑的、可扩展的，以及多端体验一致的编辑器。
• scrcpy : 该应用提供了利用 USB 在电脑屏幕上展示与控制 Android 设备的功能，它并不需要任何的 Root 权限，并且能够作用于 GNU/Linux, Windows 以及 Mac OS 等多平台。该工具需要先安装 adb 命令，开发者可以直接从 Android SDK Platform Tools 中获取。

巅峰人生

• 程序媛小姐姐，了解一下？: 虽说第一个程序员是女性，但现在，这行业早已被男性所“主宰”。Bloomberg（彭博）曾给男程序员创造了一个很有男子气概的词语“ Brogrammer ”（“bro”意为“兄弟”“男人”），一改程序员呆板的极客形象，将他们描述得又酷又时尚。但同时，这也凸显了 IT 行业以男性为主导的发展方式，女程序员们都被忽略了。1842 年，人称“数字女王”的阿达 - 洛芙莱斯（Ada Lovelace）编写了历史上首款电脑程序。时间闪回到 170 多年后，电脑编程行业却被男性一统天下。一方面，程序员们被外界贴上的各种负面标签所困扰，另一方面，女性程序员的稀缺又总是在程序员群体里被贴上另一些不太友好的标签。

前端之巅

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

感谢徐川对本文的审校。

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