前端每周清单第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，注明“前端之巅投稿”。