前端每周清单第 38 期: Node 9 发布，Kotlin 与 React，Netflix 架构解

摘要：发布本周正式发布，包含了一系列的特性提升与问题修复，同时也在不断致力于将打造地更为轻巧与高性能。当然，姜振勇老师还会介绍的多种服务，包括大数据网络和安全，展现弹性安全和高可扩展性的全方位能力。

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

国内国外，前端最新动态

Node.js 8 宣布进入 LTS，Node.js 9 发布: 近日 Node.js 维护团队渲染 Node.js 8 正式进入 Long-Term Support 状态，这也意味着 Node.js 8 已做好了进入生产环境的准备，同时 Node.js 9 即将成为当前的发布线版本。Node.js 8 引入了 Async/Await、V8 6.1 等一系列的特性，相较于 Node.js 6 带来了将近 20% 的性能提升；而 Node.js 9.0.0 则引入了 Async Hooks，并且对于 Errors、Child Processes、fs 等多个模块进行了优化。更多关于 Node.js 8 的特性概述与 Node.js 9 的展望可以查看原文。

Angular 5 发布: 本周 Angular 5.0.0 正式发布，包含了一系列的特性提升与问题修复，同时也在不断致力于将 Angular 打造地更为轻巧与高性能。新版本中 Angular CLI 会默认启用构建优化器，Angular Universal 项目引入了新的状态转化接口与 DOM 支持；而在编译器方面，Angular 5 也对于 TypeScript Transform、空格、注解等进行了提升，并且对于国际化、时区、HTTPClient、表单、路由等都进行了优化。

TypeScript 2.6 发布: 本周 TypeScript 2.6 版本正式发布，该版本中允许使用 --strictFunctionTypes 参数指定逆变的函数参数适配；并且为 tsc 添加了 --locale 标志位以指定使用的本地语言，可以自行设定错误的提示语言。同时该版本还优化了 --watch 模式的编译效率，并且允许使用 // @ts-ignore 来指定单行的错误忽略；更多特性介绍可以查看原文。

步步为营，掌握基础技能

与时俱进：React 16 新特性尝鲜: React 16 的发布除开源许可证和 Fiber 机制全面开启之外，还为我们提供了部分非常强大的新特性，本视频教程将通过实例带你探索这些新特性，从 Error Boundary 到 Text Only Component，再到 Portal，共 6 小节，19 分钟，每个小节实例讲解一个新特性，让你在学会新特性用法的同时熟悉新特性的最佳实践。学完本视频教程，你将能熟练把诸如 Error Boundary，Portal 等特性运用到你的实际项目中来提高开发效率和代码质量。更多 React 相关资料查看这里。

基于 Node.js 搭建零依赖的 HTTP/2 静态文件服务器: 目前 HTTP/2 已经在大部分的现代浏览器中得到了支持，从而使得开发者能够利用多路复用、头部压缩、服务端推送等特性；Node.js 自 8.8.1 版本后也开始支持 HTTP/2，本文即是介绍如何使用 Node.js 创建简单的 HTTP/2 静态文件服务器。鉴于浏览器端仅支持 HTTPS 信道的 HTTP/2 请求，本文首先介绍了如何使用 LetsEncrypt 来获取 HTTPS 证书或者生成自签发证书；然后展示了如何用 http2 及其回调来创建静态文件服务器。接下来讨论了如何使用 http2 库中的服务端推送的接口，以及如何在现有应用中集成使用 HTTP/2 服务器；更多 Node.js 实战教程查看这里。

Kotlin 与 React: 随着 Kotlin 宣布支持 Web 应用与 iOS 应用开发，其也成为了新的跨平台解决方案的选择之一；而 Create React Kotlin App 即是类似于 Create React APP 的，使用 Kotlin 来开发 React 应用的脚手架。Create React Kotlin App 目前依赖于 JDK 8（暂不支持 Java9），提供了类似于 Create React APP 的控制命令，同时也支持在 Intellij IDEA Ultimate 直接使用内置的 JavaScript 调试器进行调试。更多 React 教程查看这里。

立足实践，提示实际水平

Node.js 最佳实践清单: 本仓库是对于 Node.js 最佳实践的清单汇总，包括了项目结构、异常处理、代码样式、测试与质量保障、部署到生产环境、安全、性能优化等方面；更多 Node.js 学习资料查看这里。

搜狗地图面向 SPA 和 Hybrid 的前端工程体系实践: 本文为搜狗地图前端主管周俊鹏老师在 QCon 上海 2017 上的演讲总结而成，搜狗地图前身是图行天下，成立于 1999 年，是国内第一家互联网地图服务网站，2005 年被搜狐收购后改名为“搜狗地图”。所以这个刚“开始”做的地图产品比大多数人预料的还要老。搜狗地图前端团队对前端工程体系的理解是：工程体系本质上是一种服务，其服务的对象是技术团队所采用的技术以及组织架构。而架构本身也定位为一种服务，其服务的对象是具体的业务。更多 Web 工程化的讨论查看这里。

Slack 桌面应用的优化：从 WebView 到 BrowserView: Slack 团队使用了基于 Electron 的混合开发技术来打造他们的桌面端应用，不过很多时候因为其糟糕的性能表现而广为诟病。本文中 Slack 技术团队介绍了它们在即将发布的 3.0 版本里面针对性能问题与用户体验所做的一些优化，主要就是从标准的 WebView 迁移到 BrowserView，以类似于 Chrome 中多 Tab 的方式来优化单窗口的表现。除此之外，本文还讨论了如何跨窗口管理 Redux Store、如何处理副作用与异步 Action、如何快速地重构代码等内容；更多 Electron 学习资料查看这里。

深度思考，升华开发智慧

Netflix 工作机制简析：每次你点击之后发生的事: Netflix 支撑着数百个国家数亿用户的数十亿播放，正是其强大的基础架构支撑着业务的正常运行，本文即是对于 Netflix 的工作机制与架构进行简要介绍。当用户点击播放按钮之后，Netflix 的数百个微服务或者独立的程序构成的 Netflix 服务就开始协同工作，检验请求内容的合规性，并且将其转化为合适的尺寸，同时还要避免其被恶意复制。接下来服务器会将其复制存放在最靠近用户的存储点，而客户端则会自动选择最合适的节点来加载数据；更多大厂架构分享查看这里。

前端框架新选择——基于 MVVM 的 San: 在 MVVM 早已被引入 Web 前端应用开发的今天，其实我们已经有了一些选择，有了一些应用开发的利器。它们的代表就是 Vuejs，React, angular。它们都致力于提升开发效率，希望帮开发者做更多的事，通过诸如声明式的绑定，便可通过框架完成视图层的自动化 , 使得业务开发者可以有更多的精力，重新聚焦业务实现的关注点，回归应用开发的本质。百度 EFE TEAM 历时接近两年时间设计、开发 San 框架，一个实现了 MVVM 的 Web 组件化框架。在接近两年的时间里，它不断迭代，支撑了越来越多的业务。

HTTP 103: 近日 HTTP Working Group 宣布新的 HTTP 状态码 103 Early Hints 进入 Version 5，本文即是关于该状态码的详细起草文件。新的状态码允许服务端提前发送某些响应头，并且可以在响应头中通过 Link 属性指明需要提前加载的文件，其能够有助于实践 Preloading 等预加载优化。浏览器端在接收到 Early Hints 之后，实际的响应头之前即可开始进行资源文件的加载；不过这样分片地发送响应头同样会存在风险，因此服务端应当在确定了客户端的身份之后再发送 Early Hints 响应头。更多 HTTP 相关资料查看这里。

JavaScript 工作原理之深入 WebSockets 与 HTTP/2: 本文是该系列的第五篇文章，着眼于介绍常用的通信协议，讨论他们的属性特点并且选择最合适的构建方式与应用场景；同时本文也快速地比较了 WebSockets 与 HTTP/2 各自的优劣。本文首先介绍了 WebSocket 的请求格式与帧协议，以及 JavaScript 中常见的 WebSockets 控制回调；然后从请求头、二进制支持、多路复用、压缩等多个角度比较了 HTTP/2 与 WebSockets，并且讨论了 HTTP/2 + Server-Sent Events 的作用。更多 HTTP/2 相关资料查看这里。

乐于分享，共推前端发展

Bottery: Bottery 是由 Kate Compton 开源的一款非常有意思的对话式原型设计平台，其提供了聊天、控制、编辑器、白板、审视器、状态监控器等界面；将聊天机器人与原型设计流有机结合起来，并且使用有限状态机状态迁移的思路来模拟我们产品设计中的原型设计思路流程。

Frappé Charts: Frappé Charts 是受 GitHub 启发创建的零配置的，简单而大方的现代图表库。Frappé Charts 提供了常见的柱状图、折线图、流线图、热点图等多种图表形式，以及灵活的数据变化监听接口。

mlhelper: mlhelper 是 JavaScript 中机器学习相关的算法与工具库，其提供了常见的 kNN、决策树（ID3）、矩阵运算、向量运算、文件解析以及常见的数据模型可视化功能。

Server.js: Server.js 是另一个简单而强大的 Node.js 框架，它致力于帮助开发者尽可能地简化项目开发的复杂度。Server.js 默认地包含了很多 Express.js 中需要额外装载的中间件，譬如请求体与文件解析、Cookie、Session、Gzip、Redis 等；此外，Server.js 还提供了弹性易扩展的 API 设计方案与基于 WebSocket 的实时数据服务。

大咖告诉你：这才是支持你双十一“剁手”的幕后功臣: 本文是 AWS 解决方案架构师姜振勇分享的，中小型电商应该如何应对双十一这样的高并发访问场景。对于注册用户量超过 3000 万的小红书来说，要想在双十一搞定剁手党，先要在平时了解客户的喜好和需求，这就势必要对数据进行清洗、归整，适于数据分析师使用。姜振勇老师告诉你小红书这样的电商，是如何借助 AWS 快速搭建高效的大数据统计、分析系统的。除此之外，你还能够听到小米网、SK 电信等客户真实案例。当然，姜振勇老师还会介绍 AWS 的多种服务，包括大数据、网络和安全，展现 AWS 弹性、安全和高可扩展性的全方位能力。

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