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

前端每周清单专一大前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（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，注明 “ 前端之巅投稿 ”。