前端清单第 27 期：React Patent License 回复，Shopify WebVR 购物，原生 JS MVC 设计

前端每周清单第 27 期：React Patent License 回复，Shopify WebVR 购物，原生 JS MVC 设计，Flow 优化 React 支持

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

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

新闻热点

国内国外，前端最新动态

• React 就开源许可证风波进行回复：数周前，Apache 基金会决定禁止旗下项目使用 React，因为其在标准的 BSD 许可证之外添加了专利声明；此举引发了社区的广泛讨论，希望 React 能够更新其开源许可证。经过数周的讨论，近日 Facebook 正式做出了回复，不过令人遗憾的是最终还是拒绝更新许可证，以避免未来可能遇到的专利冲突；Facebook 在开源许可证中声明，使用 React 进行开发的商业项目，不可以专利反诉 Facebook ，也可以查看此篇文章或者社区的讨论了解更多信息。
• Bootstrap 4 Beta 发布：经过两年的开发，Bootstrap 4 Beta 版本终于发布；该版本中值得注意的变化包括，从 Less 迁移到了 Sass、布局系统几乎全部迁移到了 Flexbox、优化了卡片的使用体验、自定义了 Normalize.css、放弃了对于 IE8 与 IE9 的支持、复写了几乎所有的 JavaScript 插件、提升了 Tooltip 等使用体验等。
• Node.js 8.4.0 发布：本周 Node.js 8.4.0 版本发布，其重要的特性变化包括，引入内建的 http2 实验支持、允许在 inspector 控制台中查看 require()、更新了 N-API、修复了 Stream 中存在的部分错误、util.format 提供了新的占位符等。
• ESLint 4.5.0 发布：近日发布的 ESLint 4.5.0 版本是对于 ESLint 的小版本更新，引入了部分新的特征支持与错误修复。新版本完善了对于 indent 规则、new.target 表达式以及 NaN 的支持，并且修复了 junit 结果以及 verifyAndFix 参数的错误。

开发教程

步步为营，掌握基础技能

• Preact：轻巧快速的 React 替代：Preact 是提供了兼容 React ES6 API 的轻量级前端库，Preact 本身选择了非常精巧的实现模式，避免了 React 中因为过度工程化带来的部分缺陷。本文着眼于介绍 Preact 的基础用法，从 Preact 与 React 以及常见的替代库的对比、Preact 与 React 在使用上的区别、如何使用 preact-compat 来无缝替换 React 到使用 preact-cli 快速开发项目等相关知识；更多 React 相关资料参考这里。
• React 基础概念纵览：本文并不会介绍 React 是什么或者为什么要学习 React，而是希望能够在单篇文章内，对实用的 React 相关概念进行介绍；让那些对 DOM API 有所了解的开发者快速上手开发 React。本文依次介绍了 React 组件化的设计理念、JSX 到底是啥以及在 JSX 中如何使用 JavaScript、如何利用 JavaScript 类来编写 React 组件、如何处理用户响应事件、如何为组件编写 Story、如何设置私有状态等内容；更多 React 相关资料参考这里。
• Chrome DevTools 进阶指南：Chrome DevTools 是非常强大的开发工具，而本文则是以数十张动图的方式细致生动地介绍了如何使用 Chrome DevTools 进行常见的开发调试。本文涉及的内容包括了如何进行 CSS 覆盖率分析、如何进行 CPU 使用率分析、如何不使用扩展而进行浏览器截屏、如何进行 Profiling、如何进行时间轴回溯等内容；更多 Web 调试相关资料参考这里
• Flow 0.53.0 引入更完善的 React 支持：在早期的 Flow 版本中，其主要还是针对 React.createClass() 进行代码检测；在近日发布的 0.52.0 版本中，Flow 引入了更加完善的 React 支持，其最大的区别在于 Flow 开始完全支持基于 React.Component 类继承的组件定义方式。此外，本文还介绍了如何为 React Children、HoC 等实践模式添加静态类型检测；更多 Flow 相关资料参考这里。
• 将现有的 Angular 应用转化为 PWA：本教程将会介绍如何将现有的 Angular 应用逐步地转化为 Progressive Web App，该教程适用于任何基于 @angular/cli 命令行工具创建的项目。本文首先介绍了 Service Worker 的作用、如何在项目中集成 Service Worker、如何创建自定义的 App Manifest；然后讨论了如何管理离线特征，最后说明了如何利用 Google LightHouse 进行应用的性能、可用性与最佳实践的测试，以及如何提升应用的性能。

工程实践

立足实践，提示实际水平

• React Native 中可共享的元素变换：本文着眼于讨论如何构建能够同时运行在 Android 与 iOS 应用中的 React Naive 动画；以常见的列表详情页动画切换为例，首先介绍了动画过程中帧的设计，然后介绍了 Animated 库及基础的语法，并且讨论了潜在的性能瓶颈以及如何使用 useNativeDriver；最后介绍了如何在变换过程中隐藏源与目标图像，以及如何实现返回按钮的功能。更多 React Native 相关资料参考 这里。
• 探索 ReactJS 中的 CSS 架构：本文着眼于讨论 React 开发中常用的 CSS 架构，从 BEM 命名开始谈起，介绍其对于 CSS 模块分割的意义以及实际场景下增强型的 BEM 用法；然后介绍了 React 中 BEM 的实践。接下来本文讨论了 CSS Modules，如何配置与使用 CSS Modules，以及如何进行组件分层的解决方案。该结构背后的理念是通过以一种可伸缩的方式保持 CSS 架构创建更好的 ReactJS 项目，可以支持成千上万的组件和开发人员协同工作；然而本文的真正关键点在于打开你的思维，去适应新事物。更多 React 相关资料参考这里。
• Windows Edge 引入独立渲染来保证顺滑的 Web 体验：独立渲染能够允许浏览器选择性地将部分图像渲染的工作分配给其他的 CPU 线程处理，从而保证用户界面线程只需要分配最短的时间片来进行渲染操作。本文即是 Windows Edge 团队分享它们利用独立渲染来提高 Edge 浏览器性能体验的经验分享，首先以图片形象地比较了 EdgeHTML 15 与 EdgeHTML 16 在渲染流程上的异同，然后分析了图片、SVG、Canvas 等界面元素在新的渲染机制下的表现。更多 Web 开发相关资料参考这里。
• 构建混合渲染的 PWA：PWA Directory 最初是采用了纯粹服务端渲染的 PWA 应用，它对于搜索引擎地支持比较好。不过这种应用并无法很好地进行客户端路由跳转，反而会带来一些额外的性能损耗；本文则依次介绍了如何使用 JavaScript 来托管路由跳转、如何利用 Service Worker 来进行数据缓存或者后台操作等内容。更多 PWA 相关资料参考这里。
• 构建基于 Web Speech API 与 Node.js 的简单 AI 聊天机器人：语音控制正在变得越来越流行，越来越多的智能手机使用者习惯使用 Siri 或者 Cortana 这样的指南辅助工具来进行方便地命令操作。同时，Web 平台也在变得不断完善，我们也可以用 Web Speech API 来创建最小可视化的交互友好的应用。本文首先介绍了如何在浏览器中使用 Web Speech API，然后介绍了如何使用 Socket.io 以及 WebSocket 来进行实时通信与数据传输，最后介绍了如何在 Node.js 中集成来自 api.ai 的语音解析功能来将客户端传来的语音转化为文本。更多 Node.js 相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• FreeWheel 前后端分离改造实践：在现代前端应用的工程实践中，前后端分离的架构会为两端带来更多的灵活性，已成为主流趋势。与之相对的，传统的单体 Web 应用（Monolithic Web Application）则将前后端代码放在一起，虽然耦合性较强，但在产品研发的特定阶段仍具有较强的优势，早期的 ASP.NET、Java Spring MVC，以及 Ruby On Rails 都是单体应用的代表性框架。 本文将以 FreeWheel 从单体应用改造为前后端分离的实践为例，着重介绍其间前端所遇到的挑战和解决方案。
• 原生 JavaScript 中的 MVC 设计模式：近些年各种前端框架争妍斗艳，百花齐放，每个前端框架都有其自身的设计理念与模式，并且使得开发者更多的关注于上层应用开发；本文则返璞归真，讨论了如何基于原生的 JavaScript 去实现 MVC 模式。本文首先介绍了 MVC 模式的概念，然后讨论了展示一只企鹅需要分成几步：构建用于连接视图与模型的 Controller、构建用于处理数据的 Model 以及构建用于将数据渲染到界面上的 View 层。更多 JavaScript 相关参考这里。
• 构建 Web VR 虚拟购物体验的实践：本文是来自 Shopify 的工程师，分享的如何使用 WebVR 提供交互式虚拟购物体验的实践。本文首先分析了目前 VR 技术的发展现状以及主流的 VR 设备，然后介绍了如何将现有的产品转化为 3D 形式，接下来分享了目前 WebVR 的开发体验，以及对于 A-frame、Clara.io 以及 PlayCanvas 等常见的 VR 开发框架工具的技术选型考量。最后，本文还讨论了 3D/AR/VR 等技术发展的未来；更多 WebVR 相关资料参考这里。
• 为什么我们选择了 GraphQL：本文是来自 Universe 的工程师分享的其内部进行服务端应用程序开发的技术选型考量，主要是对于选择 GraphQL 之后的实践优劣分析。本文依次讨论了对于强客户端协议产生的问题与解决方案、如何进行领域层抽象、类型化的请求与响应接口、如何使用 Apollo Optics 进行请求划分优化、如何合理地构建接口文档等内容；更多 GraphQL 相关资料参考这里。
• 理解 V8 字节码：V8 是由 Google 开源的 JavaScript 引擎，目前在 Chrome、Node.js 等许多的应用程序中得到广泛应用，本文着眼于介绍 V8 中使用的字节码格式。本文首先介绍了字节码的基本概念与 V8 的执行流程，然后介绍了典型的 V8 字节码的组成：LdaSmi、Star r0、LdaNamedProperty、Add r0 等常见的指令语句；更多 V8 相关资料参考这里。

开源项目

乐于分享，共推前端发展

• Spikenail：Spikenail 是面向 Node.js 的支持 GraphQL API 语法的框架，它允许开发者便捷地构建 GraphQL 接口；Spikenail 内置了对于 ES7 语法特性以及 GraphQL 的支持，允许通过实体类的方式快速描述嵌套关系、隔离域、自定义角色等访问控制。
• esprint：esprint 借鉴了 flow 的设计理念，允许以多线程方式运行 linting 引擎而提升 eslint 的效率。esprint 会启动服务端进程来缓存每个文件的 lint 结果，使用 watcher 来监控文件的变更情况，以保证只对发生变化的文件进行检测；更加详细的介绍也可以参考这篇博客。
• Backpack：Backpack 是受到 create-react-app、Next.js、Nodemon 启发的，面向 Node.js 项目的最小化构建工具。Backpack 允许我们创建零配置的 Node.js 项目，并为其添加文件监控、热加载、编译以及打包等常见的功能；Backpack 还允许我们方便地添加自定义的 Babel 等配置。
• Puppeteer：Puppeteer 是 Google Chrome 团队开源的面向 Node.js 的，基于 DevTools 协议的远程 Headless Chrome 控制库，它可以生成网页截图、PDF、抓取单页应用与网页内容、进行自动化表单提交、界面测试与模拟键盘输入等功能。

巅峰人生

• 要怎样努力，才能修炼成一个架构师？：本文是七牛云高级副总裁、首席架构师李道兵在大咖说的分享，讲述了自身对于架构师养成之路与自我修养的认知。本文讨论了未来的编程学习、自身从化学专业到软件行业切换的感想、年轻程序员应该如何成长、如何在团队中脱颖而出、如何做好架构等内容。

前端之巅

「前端之巅」是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到[e-mail]，注明“前端之巅投稿”；或者可以阅读往期文章：

• Web 前端入门与工程实践的前端每周清单列表。
• 前端每周清单第 24 期：React 16 中异常处理与 Fiber 实战、Vue 图表与 jQuery 插件、V8 Turbofan 性能优化
• 前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防