前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花，网络安全二三事

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

新闻热点

国内国外，前端最新动态

• PWA 是否能带来新一轮大前端技术洗牌？: 本文是 Brilliant Open Web 团队成员，百度资深前端工程师彭星分享的对于 PWA 与大前端技术的看法。本文回顾了 Web 在移动时代遭遇的两大枷锁：用户体验枷锁与用户留存枷锁，讨论了 PWA 成为解开枷锁钥匙的可行性，分析了其是否能真正弥补 Web 的劣势。
• 77% 的网站仍然使用有漏洞 JavaScript 库: 上周 Snyk 发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。本文则是从 Web 安全的角度对于数据进行了深度分析，发现统计的超过 433000 站点中， 77% 使用了至少一个包含已知漏洞的前端 JavaScript 库；更多详细的数据描述请查看原文。

开发教程

步步为营，掌握基础技能

• 基于 CSS Grid 的常见响应式布局: CSS Grid 允许我们在二维坐标系上编排元素，在主流桌面浏览器逐步完善对其的支持之后，CSS Grid 也开始登陆到移动端浏览器；本文即是介绍如何利用 CSS Grid 实现常见的响应式布局。本文依次介绍了图文混排布局、整页图片画廊、卡片布局、Holy Grail 布局等等；更多 CSS Grid 相关资料查看这里。
• 2018 年值得使用的 React 组件库: 工欲善其事，必先利其器；作者根据自身的实践经验与 GitHub、Stack Overflow 等社区的活跃程度，在本文中为我们推荐了十余个值得一试的 React 组件库，以提高应用开发的效率。作者在文中讨论的组件库包括了 React Material UI、React-Bootstrap 、 React toolbox、React Belle 、 React Grommet、React Components by Khan Academy 、 Material Components Web、Ant Design React 、 Semantic UI React、Onsen UI 、 React Virtualized 等；更多 React 相关资料参考这里。
• 基于 Rust 编写高效安全的 Node.js 原生模块: RisingStack 一直致力于提升 Node.js 的运行效率；不过去年面临了一个窘境：已然达到 Node.js 本身的瓶颈。为了突破天花板，RisingStack 决定将关键计算模块以原生方式实现；而经过技术选型比较之后，他们决定使用 Rust，而不是 C++ 来编写原生模块。本文首先分析了 Node.js 服务端速度的瓶颈，然后展示了如何用 Rust FFI 与 Rust Neon 实现简单的 URL 分析模块，最后对比了这二者以及 Node.js 实现方案之间的性能；更多 Node.js 学习参考深入浅出 Node.js 全栈架构。
• 使用 Angular 与 Vue.js 实现相同的功能并比较: Angular 与 Vue.js 都是优秀的 Web 组件框架，二者在某些语法风格上也有异曲同工之妙，本系列即是通过利用这两个框架编写相同的，简单而易扩展的应用，来仔细地对比二者。本系列包括了四篇博文，首先从项目文件结构的角度对比了二者；然后细致地对于学习资料、组件语法中相似的代码等内容进行了分析，最后还讨论了如何使用 TypeScript 开发 Vue.js 应用。更多 AngularJS 与 Vue.js 学习资料可以参考这里。

工程实践

立足实践，提示实际水平

• 如何显著提升 React 应用的性能: 应用性能优化是老生常谈的问题，随着我们应用业务需求不断地变化，性能问题也是绵延不绝；本文是又一篇优秀的讨论 React 应用性能优化的文章。本文依次讨论了不恰当的 shouldComponentUpdate 以及对于 PureComponent 的误用反而会造成逆优化、如何快速修改 DOM 元素、如何避免过于频繁地事件触发与回调执行。更多 React 资料可以阅读 React 与前端工程化实践。
• Helmet 与 Express 应用安全: Express 是流行的 Node.js 服务端框架，本文即是介绍如何使用 Helmet 以及其他的框架来增强 Express 应用的安全性。本文详细介绍了 HTTP 响应头中的 X-DNS-Prefetch-Control、X-Frame-Options 、 Strict-Transport-Security、X-Download-Options 、 X-Content-Type-Options、X-XSS-Protection 等域的含义与作用；更多 Node.js 学习参考深入浅出 Node.js 全栈架构。
• 或许类属性中的箭头函数并不如你所料: Arrow Function 箭头函数是 ES6 的重要语法特性之一，其能优化我们代码的可读性，还能自动绑定当前的 this 对象。不过本文作者表示，当我们在类属性中使用箭头函数时，却往往会不符合直觉的判断；类属性式的箭头函数会被转换为构造函数中创建，因此并不能被子类继承，并且这种模式的性能表现也差于绑定函数模式。更多 JS 学习可以参阅现代 JS 语法基础与工程实践。

深度阅读

深度思考，升华开发智慧

• 我是如何 7 分钟之内黑进 40 个网站的: 本文作者详细介绍了对于某个包含漏洞的网站渗透提权的过程，是一篇不错的安全实践教程。作者依次使用了 Nmap 进行嗅探踩点，使用 gobuster 进行路径枚举，构造虚拟邮箱地址并且上传 WebShell；然后从 cgi-admin/pages 获取明文数据库密码并且成功地获取全部数据库权限。 更多 Web 安全相关知识可以阅读现代 Web 开发工程化实践。
• Atom 中的远程代码执行: 本文作者针对 Atom 1.21.1 版本中，因为 Markdown 解析漏洞导致的远程代码执行（RCE ），进行了深度分析，也是不错的了解常见的 Web 安全问题对桌面应用的影响的文章。本文首先介绍了 Atom 如何通过 CSP 来限制 XSS，然后分析了 Atom 是如何解析 Markdown 文件，如何针对这种解析机制构造 local DOM XSS Payload，以及如何执行本地任意代码并且加载执行远程代码；更多 Web 安全相关知识可以阅读现代 Web 开发工程化实践。
• 使用 Node.js 与 OpenCV 实现人脸识别: 近年来人工智能与深度学习的概念火热，相关的理论技术也在工程项目中得到了广泛的应用，每周清单之前也推荐过如何用 JavaScript 来实现机器学习算法；本文则是循序渐进地介绍如何使用 Node.js 来构建简单的人脸识别应用。本文从数据集准备开始入手，然后讨论了如何训练识别器、如何进行模型检验等内容；更多 Node.js 学习参考深入浅出 Node.js 全栈架构。

开源项目

乐于分享，共推前端发展

• node-prune : node-prune 是简单的用来移除 ./node_modules 中不必要文件的工具，譬如 MarkDown、TypeScript 源代码文件等；从而尽可能地减少 node_modules 中文件的体积，以加快应用部署的速度。
• react-i18next : react-i18next 是便捷易用的 React 国际化辅助库，其能帮助我们快速实现应用地国际化改造。
• bundle-buddy-webpack-plugin : Bundle Buddy 是著名的能够发现多个 JavaScript Chunks/Splits 中重复冗余源代码的工具，从而方便我们选取合适的代码分割参数，来最终提升页面加载的性能。bundle-buddy-webpack-plugin 则是基于 Bundle Buddy 封装的 Webpack Plugin，方便我们集成到现有的开发流程中。
• aws-amplify : AWS Amplify 是面向 Web 前端与移动端开发者的，用于构建云端应用的工具库；其由 AWS 开源，目前仅支持 Amazon Web Services，但是其设计的初衷是提供插件化的、能够适用于多种云端或者自定义服务端的工具。Amplify 提供了声明式的接口，能够帮助开发者迅速添加使用情况收集、权限校验等功能。

巅峰人生

• 那个逃离北京的程序员说：我想工作到 70 岁: 本文是二叉树出品的《众生相》十集人物纪录片的第三集，讲述了绰号老神仙的 Linux 内核开发者 , 吴峰光博士 “ 逃离北京 ” 之旅；这个带有梦幻色彩的词是如此代价高昂，以至于对不少人而言成为一种奢侈的选择。而踏上这条 “ 逃离 ” 之路的实践者们，是否真的收获了他们想要的东西？本文并未谈及具体的技术，而是从生存、生活等等角度谈谈技术人员的道路选择。

前端之巅

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