前端每周清单第 40 期: JS 的 Core 与 Cost，Node 内存溢出调试，Software 2.0

前端每周清单第 40 期: JS 的 Core 与 Cost，Node 内存溢出调试，Software 2.0

做者：王下邀月熊 编辑：徐川

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

新闻热点

国内国外，前端最新动态

• Atom 发布代码协同工具 Teletype: 本周，Atom 发布了远程协同工具 Teletype，其容许开发者以 P2P 的方式进行结对编程；尽管 Beta 版本尚存在不少的 Bug，仍是拭目以待将来更方便的团队协同工具。同时，VS Code 也发布了所谓的 Live Share 规划，其一样容许开发者使用 Visual Studio 2017 或者 VS Code 来实时协同编辑代码。

• Firefox 57.0 发布: Firefox Fast Again! 本周 Firefox 57.0 版本正式发布，给用户带来了一个全新的 Firefox，畅快地使用体验。该版本中最大的变化，便是引入面向现代设备的浏览器引擎：Quantum；同时该版本还从新设计了用户界面，为用户提供清新爽朗，且触摸屏友好的界面。更多详细内容能够查看原文或者下文介绍的 Quantum 揭秘一文。

• Github 发布安全告警功能: 上个月 Github 引入了 Dependency Graph，容许以可视化地方式呈现 JavaScript 与 Ruby 仓库的依赖图谱。在此基础上，Github 发布了仓库的安全告警功能，在用户打开 Dependency Graph 的状况下，其可以自动地检测依赖项目是否存在安全漏洞；一旦发现了存在漏洞的依赖，其会及时地给予开发者反馈。

• Expo SDK 23.0.0 发布: 本周 Expo SDK 23.0.0 正式发布，其基于 React Native 0.50；在该版本中也正式引入了 React 16.0.0，从而可以使用新版本的 React 中的各项特性。该版本还尝试引入了 Release Channels 功能，容许开发者更方便地发布与更新本身的应用；而且开始支持 iOS OTA 更新的后台抓取功能。除此以外，该版本还更新了 Android 中的 JavaScriptCore、更新了 Snack 以及多个 API 的表现。

开发教程

步步为营，掌握基础技能

• Angular 初学者完备指南: 本文是一篇很是完备的 Angular 初学者指南，不只按部就班地引导开发者搭建简单的 Angular 项目，还囊括了 Angular 中诸多基础概念。本文首先介绍了 Angular 的概念与定位，包括了 SPA、Angular 框架与整个平台的构成、Angular 各个版本之间的关系等内容；接下来本文介绍了 Angular CLI 以及如何使用它搭建简单的项目，而且讨论了 Angular CLI 中常见参数的做用。而后本文在简单项目的基础上，分析了 Angular 项目的目录结构与文件含义；最后从 Angular 组件的语法开始，依次介绍了服务、模块等关键部分的语法与接口。更多 Angular 相关资料参考这里。

• 你须要了解的有关 React 的一切: 不少人已熟悉或使用着 React，不过其也在不断地变化，本文即是一篇不错的入门介绍文章，也可以梳理下 React 的关键知识点。本文以构建简单的 React 音乐播放器为例，按部就班地介绍什么是 React 组件、ReactDOM 渲染、类组件与函数式组件、JSX、State、事件处理、异步 setState、Props、Refs 等内容；更多 React 教程参考 React 与前端工程化实践。

• 函数式编程实践教程: 本文是做者在 LinkedIn 演讲的总结，旨在解释函数式编程及其组合的思想如何能帮助开发者编写更好的代码；而不是着眼于某个语言或者执着于讨论 Monads 这些名词。做者从四十年前 Fortran 的做者 John Backus 对于函数式编程的引入谈起，讨论了组合（Composition）在计算机科学中的意义；而后分别以 Java 与 JavaScript 等经常使用语言为例，讨论了如何经过组合将复杂的问题分解，而且将函数式的、细节的方案有机组合为总体的解决方案。更多函数式编程相关资料参考这里。

工程实践

立足实践，提示实际水平

• JavaScript 的代价与优化: 本文是 Addy Osmani 大神的又一力做，着眼于讨论如何在移动设备上快速地提高站点加载速度与用户交互地响应性能。本文依次从如何减小包体尺寸与传输数据量、优化 JavaScript 代码的解析、编译、执行，如何实践 PRPL 模式等方面进行阐述；更多性能优化相关资料参考这里。

• 扩展 React 服务端渲染的实践: 做者在本文中分享了，其在近期扩展 React 服务端渲染过程当中的实践经验；虽然文中不少的讨论点都是 React 相关，可是面临的通用扩展挑战，或者解决的问题都是值得重复借鉴的。本文并无直接讨论 React 服务端优化，而是从常见的负载均衡谈起，介绍了常见负载均衡的算法与策略；而后讨论了客户端渲染的兜底方案，即当流量过大致使服务端没法及时响应的状况下，如何给用户合适的反馈。接下来本文还讨论了分级卸载、组件缓存、依赖处理、同构渲染等内容；更多 React 教程参考 React 与前端工程化实践。

• Node.js 中内存溢出与内存膨胀调试: 内存问题是服务端应用程序的常见痛点之一，本文做者近日就受困于内存泄露（Memory Leak）与内存膨胀（Memory Bloat），本文便是他的调试经验分享。所谓的内存泄露是指无用的内存却未被回收释放，而内存膨胀指程序使用了过量的内存；做者介绍了使用堆快照以及 Chrome DevTools 来辅助回溯、搜集、分析与解决这些内存问题。若是想要了解 Web 应用中 JavaScript 的内存调试能够参考内存分析与内存泄漏定位一文。

• 前端测试金字塔：从新思考你的测试: 本文着眼于前端测试方面，从所谓的测试金字塔结构谈起，梳理前端测试的关键内容与设计理念。做者认为所谓的前端测试金字塔自底向上为单元测试、快照测试、端到端测试，而后以简单的模态弹窗为例，介绍各个测试模块的设计要点。通常来讲，单元测试用于测试代码库中的函数、类等原子对象，而快照测试则可以记录组件渲染以后的状态而且随时进行比较；端到端测试则是用于黑盒保证产品的最终体验。更多 Web 测试相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• JavaScript. The Core 第二版: 本文是 JavaScript 核心概述的第二版，主要对于 ECMAScript 语言标准与其运行时的核心组件进行讲解。本文依次介绍了 Object、Prototype、Class、Execution Context、Environment、Closure、This、Realm、Job 以及 Agent 的概念；更多 JavaScript 教程参考现代 JavaScript 语法基础与工程实践。

• WebAssembly 已被全部主流浏览器支持: 在过去几周苹果的 Safari 浏览器与微软的 Edge 浏览器分别发布新版本，支持了 WebAssembly，再加上早已支持的 Firefox 和 Chrome，WebAssembly 已获得全部主流浏览器支持。在普遍的浏览器支持下，开发者试验使用 wasm 模块开发的新特性将触达绝大多数用户。如此普遍的支持得益于 asm.js 项目早期的成功，由于它是 JavaScript 的子集，所以能够运行在全部浏览器上，如 Facebook 的社交游戏 Candy Crush Saga 等就使用了它。

• Software 2.0: 本文是特斯拉 AI 主管 Andrej Karpathy 发表的其对于软件将来发展的见解，见仁见智，你们也能够带着批判的态度去阅读。所谓的软件 1.0 便是程序员使用 Python、C++、Java 等编写代码，而后再编译为机器码指令或者由解释器执行，每一行代码赋予程序特定的功能。做者认为深度学习便是软件 2.0，神经网络不只是一个分类器，更意味着编程基础开始发生变化，而开发者也能够经过神经网络权值进行编程。软件 2.0 拥有着同态计算、更易烧录、持续运行、常量存储、运算高效、十分敏捷等特性。

开源项目

乐于分享，共推前端发展

• Datasette: Datasette 为咱们提供了面向 SQLite 数据库的开箱即用的、只读的 JSON API；同时 Datasette 还提供了用于将数据库打包为 Docker 容器，而且将其部署到 Zeit Now 等云端容器的工具。

• SQL Operations Studio: SQL Operations Studio 是由 Microsoft 开源的数据管理工具，其支持 SQL Server，Azure SQL DB 以及 SQL DW 等多种微软旗下的数据库；SQL Operation Studio 可以和 VS Code 深度集成，运行在 Windows、macOS、Linux 等主流操做系统平台中。SQL Operations Studio 提供了 SQL Server 链接管理、对象查询、完备的 T-SQL 编辑器、多种格式数据源导出、数据备份与回滚、自定义脚本、历史任务查询等等丰富的功能特性。

• Luxon: Luxon 是由 Moment 出品的，用于操做 JavaScript 中时间与日期对象的工具库；Luxon 能够看作对于 Moment.js 的现代化接口包裹。Luxon 提供了 DateTime、Duration、Interval 等扩展类型，支持链式函数式风格的接口调用，可以对常见格式的时间字符串进行解析与转换，而且不须要 locale 或者 tz 文件就能够进行国际化转换。

巅峰人生

• React 诞生记：Facebook 并购 Instagram 与开源 React.js: 毫无疑问，React 已成为最著名的且最流行的 JavaScript 界面库之一，它在 Github 上有超过 70K 的 Star，超过 1100 名贡献者与每个月超过六百万的下载量，而且它已经在数千家公司的技术栈中获得了应用。不过在 React 面世之初，并未有太多的人关心它；本文是对 Stack Stories 访谈节目的记录总结，是由 React 的最初创造者之一的 Pete Hunt， 来分享 React 诞生先后的故事：为何会有 React，它是如何得到 Facebook 的关注，它又通过了怎样的流程才进入到公众的视线，等等。

前端之巅

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