前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防

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

新闻热点

国内国外，前端最新动态

• Firefox 55 引入 WebVR 支持：近日发布的 Windows 平台上的 Firefox 55 版本，成为首个支持新 WebVR 标准的桌面浏览器；Mozilla 希望能够以此推动 WebVR 的进一步发展。除此之外，Firefox 55 还支持包括 async generators 在内的众多 ES2017/2018 特性，并且进一步提升了浏览器的性能表现以及安全保障；详细的特性说明请查看原文。

• Google 开源 JavaScript 机器学习库 DeepLearn.js ：作为 Google 开源的可实现硬件加速的机器学习 JavaScript 库，DeepLearn.js 提供高效的机器学习构建模块，使我们能够在浏览器中训练神经网络或在推断模式中运行预训练模型。它提供构建可微数据流图的 API，以及一系列可直接使用的数学函数。

• Next.js 3.0 发布：Next.js 是用于快速创建 React 应用的零配置、单命令工具链，其内建支持了服务端渲染、代码分割等特性。在 3.0 版本中，Next.js 引入了静态导出功能，可以将 Next.js 应用导出为静态界面；同时添加了动态导入的支持，允许动态导入外部依赖，动态导入 React 组件等操作。

• Node.js 8.3.0 发布，引入 Ignition 与 TurboFan 执行流：Ignition 与 TurboFan 是 V8 5.9 版本中提供的新的解释器与编译器，它们替换了自 2010 年以来的 Full-codegen 与 Crankshaft，可以阅读这篇文章了解新的执行流带来的巨大性能优化。新版本为 Node.js 带来了极大的性能提升，除此之外新版本还修复了 8.x 系列中存在的部分错误，详细的特性与更新列表可以查看原文。

• Angular 5 与 Progressive Web Apps ：即将于九月份发布的 Angular 5 版本将会是首个由 Google 驱动的 Progressive Web Apps 框架，Angular 5 中提供的特性包括：内建的 Progressive Web Apps 支持、能够移除冗余代码、压缩应用体积的构建优化器、服务端渲染中集成 Material Design 组件等。本文还介绍了对于 Angular 6 的开发计划的简述以及依赖注入、HTML 模板引擎等一系列 Angular 优势的分析。

开发教程

步步为营，掌握基础技能

• 三周时间打造全栈 JavaScript Web 应用：本文记录了某个编程初学者如何用三周时间，循序渐进地从零构建出，基于 JavaScript 的全栈电子商务应用。本文从最初的产品设计与原型图构建开始，然后介绍了如何选择合适的数据结构与数据库。接下来介绍了如何创建 Github 仓库并且使用敏捷开发流程，最后介绍了如何利用 Express 与 Firebase 搭建服务端、使用 React 以及 Victory.js 构建前端应用等内容；更多 JavaScript 相关学习参考现代 JavaScript 开发：语法基础与实践技巧。

• 利用 GraphQL 创建同构 Vue.js 应用：GraphQL 是由 Facebook 开源的面向接口的查询语言，能够弥补 REST API 中的不足；本文即介绍如何协同使用 Vue.js 与 GraphQL 来开发同构应用。本文首先介绍了如何搭建基本的 GraphQL 服务器，然后讨论了如何在 Vue.js 项目中引入 vue-apollo、ApolloClient 等依赖项并且创建简单的 GraphQL 客户端实例，最后介绍了在 Vue.js 组件中使用 graphql-tag 提供的便捷指令来快速实现前后台的数据查询；更多 GraphQL 相关资料参考这里。

• 利用 Node.js 构建 API Gateway ：随着现代业务复杂度的增加，微服务的理念正在得到更多的落地实践；作为微服务架构的重要组成部分，API Gateway 能够为所有的后端服务提供统一的权限校验与客户端协议兼容的抽象层。本文首先介绍了微服务的基础架构与 API Gateway 的概念，然后介绍了面向前端团队的 Node.js API Gateway 组成；接下来详细的分析了 API Gateway 的基础功能需求：路由与版本、迭代式设计、权限校验、数据聚合、数据序列化与反序列化、限流与缓存等等，最后讨论了基于 Express 的 API Gateway 的实现。更多 Node.js 相关资料参考这里。

• 利用 VasSonic 构建高性能 H5 首屏渲染：VasSonic 是由腾讯 VAS 团队开发的轻量级高性能混合框架，它能够有效地提升 Android 与 iOS 平台上网站的首屏加载速度；VasSonic 不仅能够优化服务端渲染地静态或者动态网站，还能够对于 Web 缓存资源进行有效优化。VasSonic 使用了自定义的 URL 连接来替代原本的网络连接来请求 index 界面，因此它能够提前或者并发地请求资源，从而避免了用户额外的等待时间；更多使用信息与特性请参考原本。

工程实践

立足实践，提示实际水平

• 利用 std/esm 在 Node.js 开发中使用 ES Modules ：随着主流浏览器逐步开始支持 ES Modules 标准，越来越多的目光投注于 Node.js 对于 ESM 的支持实现上；Node.js 拟计划在 2020 年发布的 9.x 版本中引入内置的 ESM 支持。而近日正式发布的 @std/esm 为我们提供了高性能的 Node.js 中 CommonJS 与 ES Modules 模块间调用，其能够作用于 Node.js 4.x 以上版本；它能够顺滑地集成到现有的 Webpack、Babel 环境中，并且支持不同模块使用不同的依赖版本。不同于目前的解决方案需要是发布编译之后的 CommonJS 格式的文件，@std/esm 能够以最小的代价的、按需转化的、动态缓存的方式来进行源代码转化。更多 Node.js 相关资料参考这里。

• 使用 Angular 组件的四个技巧：从.5 版本的 AngularJS 开始，组件就成为 Angular 的一部分，它为代码的组织和回收提供了一种便捷的方式。Angular（Angular2 的简称）与其说是 Angular 1.x 的升级，不如说是“续集”，它在移动支持和其他功能的基础上进行了完全地重写。这里，1.x 中使用的控制器完全被组件取代。无论是否曾经使用或想继续坚持 1.x，无论是从零学起还是在跨越阶段，为了确保代码尽可能地优雅且不会过时，你都需要开始使用组件。无论属于以上哪一类，都可以在这里找到很多帮助简化流程的方法。

• 基于 Shadow DOM 的样式封装：Shadow DOM 是 Web Components 标准的重要组成部分，它能够将 DOM 树进行隔离封装，而本文则是介绍如何利用 Shadow DOM 实现对于样式类的隔离封装。由于 CSS 并没有提供内置的模块化或者作用域机制，而在大型项目中不同组件间的样式又极易引发冲突，因此我们需要选择合适的 CSS 样式隔离方案。目前常用的隔离方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盘点了这些方案的优势与不足；然后介绍了 Shadow DOM 的基本原理以及如何应用到样式封装上。更多 CSS/SCSS 相关资料参考这里。

• Headless Chrome 爬虫攻防：Headless Chrome 为我们提供了便捷的自动化浏览器操作方式，也方便我们构建面向动态网页的爬虫；前几日在 Hacker News 上的一篇如何检测 Headless Chrome 的文章，详细列举了可用的辨别是否为 Headless Chrome 的方法，而本文即是讨论了如何反制这些检测方案。方案包括对于 User Agent 检测可以在启动时自定义 User Agent、对于语言与插件的检测可以插入脚本动态修改 language 与 plugins 属性、对于 WebGL Vendor 与 Renderer 可以 Hook 参数调用、对于 Broken Image 可以修改文件描述符等。

• WebAssembly 在 PSPDFKIT 的实践：随着今年三月份 WebAssembly Community Group 就标准达成一致，越来越多的主流浏览器开始支持 WebAssembly，本文即是 PDF 工具开发者 PSPDFKIT 介绍它们利用 WebAssembly 开发浏览器端渲染的 PDS 预览工具的实践经验。本文首先介绍了 asm.js 的工作原理与编译机制，然后阐述了 WebAssembly 的概念与组成，最后介绍了 WebAssembly 在 PSPDFKit 的实践经验以及他们在将原本大型 C++ 代码库转化为 WebAssembly 格式时的体验；更多 WebAssembly 相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• React 全家桶：石墨文档大前端技术选型分享：技术选型是个很大的话题。对于创业公司而言，为了适应业务节奏，「灵活」与「高开发效率」是技术选型最看重的两点。而这两点也是这些年前端技术井喷时期新出现的技术最注重解决的两个问题。然而石墨文档作为一款拥有众多企业用户的富前端应用，复杂的表格、文档以及离线同步逻辑使得我们对于前端技术栈的工程化和稳定性有很高的要求，考虑到过于新的技术往往生态尚不完善以及相关的「最佳实践」缺乏验证，我们对于这些技术的选择相对谨慎。石墨文档前端团队的所有技术选型也都是围绕如上两点考虑的；更多 React 相关资料参考这里。

• 基于 Vue.js 的原生应用开发：Weex 与 NativeScript 对比：Vue.js 相较于 React 与 Angular 有着更为平滑的学习曲线，不过目前 Vue.js 还没有内建的类似于 React Native 这样的原生应用开发方案。但是 Weex 与 NativeScript 都能够弥补 Vue.js 的这个暂时性不足，每周清单在前几期中也推荐过 NativeScript 与 Vue.js 协同开发的相关文章，本文即是对比 Weex 与 NativeScript 应用在原生开发中的各自优势与不足；更多 Vue.js 相关资料参考这里。

• 你看到的 Node.js 权限校验指南可能都存在着错误：权限校验几乎是每个服务端应用程序的标配，本文作者在搜索学习 Node.js / Express.js 相关的权限校验教程时发现大部分都或多或少地存在着问题，因此编撰了这篇文章以提醒其他开发者。常见的误区可能包括凭证的存储方式、密码的重置策略、API Tokens 的生成与校验、限流等多个方面；更多 Node.js 相关资料参考这里。

• 高性能 Web 动画与交互：到达 60 PFS ：为用户提供顺滑的交互与动画体验是大部分 Web 应用的挑战之一，很多开发者着眼于减少首屏加载时间，却忘了去优化接下来的用户交互。本文是来自 Algolia 的工程师介绍他们在构建高性能 Web 动画与交互时的经验技巧，本文首先介绍了常用的性能评测标准以及浏览器的渲染流程，布局、绘制、组合等等。接下来本文介绍了如何充分利用 opacity 与 transform 属性来减少动画消耗、如何强制提升、如何优化动画相关的代码等内容；

开源项目

乐于分享，共推前端发展

• Nano ID : Nano ID 是轻量级的、支持 URL 的 JavaScript 唯一 ID 生成器，它使用了强力密码加密的随机 API，能够保证生成符号分布的平均性。

• Resonance ：Resonance 是数据驱动的高性能 React 动画库，它使用了 d3-timer 来管理成百上千地状态变化；Resonance 允许开发者以简单而亲切地语法实现高性能的状态更新动画。

• react-beautiful-dnd ：react-beautiful-dnd 是 Atlassian 出品的漂亮易用的 React 列表拖拽功能增强库。目前最流行的 React 拖拽库 react-dnd 提供了相对底层的拖拽 API 支持，而 react-beautiful-dnd 则提供了面向垂直列表的高阶封装；react-beautiful-dnd 仍然处于不断地迭代开发中，很期待它未来提供更多的优秀特性。

• notifme-sdk ：notifme-sdk 是用于简化通知发送流程的 Node.js 库，它允许我们灵活地集成邮件、短信、推送、WebPush 等不同的渠道来发送通知；notifme-sdk 还允许我们自由注册服务提供商，内建的 Fallback 与轮询机制也能进行简单的容错，同时 notifme-sdk 还提供了简单的 UI 控制台以方便我们仅界面化监控。

巅峰人生

• 如何成为一个合格的技术 Leader？：在即将到来的 10 月份上海 QCon 大会上，百度外卖研发中心总监张灿将带来演讲《向前一步——年轻技术管理者的涅槃重生》，InfoQ 在此之前，对张灿老师进行了一次独家专访，让张灿老师聊聊作为女性技术人的成长感悟与对技术人转向管理者的思考。本文即由采访内容整理而成。

前端之巅

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

感谢徐川对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。