前端每周清单第 32 期：React 开源协议更新、JS 完整编年史、Vue 组件通讯

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

新闻热点

国内国外，前端最新动态

• Facebook 宣布重置 React，Jest，Flow 与 Immutable.js 的开源证书：自宣布保留 React 等开源项目附带专利要求的开源协议以后，社区反馈了极大的不满与怀疑，包括 WordPress 在内的许多开源项目也宣布即将切换技术栈；鉴于此，Facebook 宣布将在下周统一地重置 React，Jest，Flow，Immutable.js 为 MIT 开源协议。亡羊补牢，为时未晚，但愿 React 整个社区可以继续蓬勃发展。

• CoffeeScript 2 发布：新版本的 CoffeeScript 可以直接编译为现代 JavaScript 语法，从而弥合了与 JavaScript 之间的隔阂；新版本中会将 => 输出为 =>，将 class 关键字也是直接输出为 class。此外，CoffeeScript 2 还添加了对于 async 函数的支持，将来一样会加入对象解耦与 JSX 等特性；而在带来许多新特性的同时，CoffeeScript 2 一样尽量地保证了后向兼容性，以保证现有项目地平滑升级。

• Chrome 将会默认为 .dev 域名预置 HSTS 以强制 HTTPS 链接：在 Chromium 的此次提交以后，Chrome 将会经过 HSTS 强制全部的域名启用 HTTPS。对于普通开发者而言，若是咱们在本地的域名映射中设置了 .dev 结尾的域名，那么须要将其修改成 .test 等其余域名，避免在 Chrome 中没法打开。

• Expo SDK 21.0.0 发布：近日 Expo SDK 发布了 21.0.0 版本，其基于 React Native 0.48，提供了更加丰富的功能与更优秀的性能表现；新版本中优化了 AppLoading 的使用与容错机制，引入了新的 Splash 使用方式，提高了地理位置编码、Camera、SecureStore 等接口的性能与使用。

开发教程

步步为营，掌握基础技能

• 从零构建 Angular 项目：本文旨在不使用 Angular CLI 等辅助工具，从零开始构建全特性的 Angular 项目；初学者通过这样的过程可以了解到完整的 Angular 应用组成，包括如何引入须要的 Angular 发布包，搭建 TypeScript，配置自定义的模块加载器，启动应用的主入口模块等。更多 Angular 相关资料参考这里。

• 现代 JavaScript 语法清单：本文涉及到了现代项目开发中经常使用的 JavaScript 语法使用以及示例代码的清单 ；本指南并不打算从零介绍 JavaScript，而是对于那些有必定基础知识的开发者提供便捷的工具手册。本文依次介绍了变量声明与使用、箭头函数、默认参数、对象解耦、数组使用、扩展操做符、对象属性、Promise、字符串、模块、类、异步编程等内容；更多 JavaScript 相关资料参考这里。

• 编写无障碍网页的 CSS：本文是做者在多年提升网页的无障碍性方面的实践分享，侧重于如何编写合适的 CSS 以提升网页的无障碍性与可用性。本文依次介绍了从清晰的文本到高可读性文本、慎用伪元素内容、屏幕并不是惟一的媒介、属性值兼容、多种内容隐藏方式等内容；更多 JavaScript 相关资料参考这里。

• Vue.js 组件通讯：Vue.js 开发学习中常见的问题之一就是如何进行组件间通讯，本系列文章则依次介绍了单组件、父子组件、跨级组件之间的通讯技巧。第一篇文章着眼于单组件中的通讯技巧，包括了事件中的参数传递、指令中的数据传递等内容；第二篇则介绍了父子组件间的通讯，首先讨论了常见的反模式，而后介绍了 Props、Refs、Events、v-model 等数据传递的方式。更多 Vue.js 相关资料参考这里。

工程实践

立足实践，提示实际水平

• 如何优雅的编写 JavaScript 代码：对于工程师而言，提升自身的编码能力和编写易于阅读和维护的代码，是提升开发效率和职业生涯中必作的事情；另外一方面，制定良好的编码规范并落到实地，是保障产品质量的基石，每一个人都应该有本身的或者团队的编码规范。本文便是做者根据自身的经验总结分享的 JavaScript 编程规范。更多 JavaScript 相关资料参考这里。

• 基于 Webpack 的自动化关键 CSS 提取：Google 性能指南中重要的一条建议就是，尽量减小会阻塞渲染的 JavaScript 与 CSS 代码；咱们网页优化中重要的手段也是进行首屏加载须要的关键 CSS 代码提取。本文则着眼于介绍如何利用 Webpack 进行自动化的关键 CSS 提取，依次探讨了阻塞渲染的含义以及 Critical CSS 的定义，而后讨论了如何经过代码编程来识别 Critical CSS，最后介绍了如何将抽取这一步集成到 Webpack 的工做流中。更多 Webpack 相关资料参考这里。

• 一次先后端分离的实践: 先后端分离的问题，不只仅是技术上的选型问题，还涉及到整个团队在认知、职责、流程上面从新定义的问题，这也是为何先后端分离概念看起来简单易懂，但真正团队在落地的时候，一不当心，每每鸡飞狗跳，甚至最终放弃"治疗"。本文是做者基于本身以前的对一个团队先后端分离改造的实践经历，介绍一下如何打造一个先后端分离的技术团队。更多 Web 项目架构相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• JavaScript 完整编年史：JavaScript 在近几年取得了长足的发展，其语法特性与实践技巧都在不断地迭代更新；本文则是对于自面世以来的 JavaScript 发展历史进行了盘点 ，对于每一个时代面临的问题、创新与发展以及主流的浏览器技术进行了介绍。本文将 JavaScript 的发展历史分为了解决基础 DOM 操做与用户交互的原始时代、解决跨浏览器支持度的 jQuery 时代、SPA 时代与现代这几个区间；更多 JavaScript 相关资料参考这里。

• 类型与否：量化 JavaScript 中可检测的错误：在团队的技术选型时咱们经常会考虑是否须要引入静态类型检测，是否应该使用 Flow 或者 TypeScript 这样的工具，是否可以有效地辅助发现问题。本文则是以问答的形式给出了做者的答案，本文首先讨论了静态类型与动态类型各自的优劣，给出了常见的 JavaScript 动态类型致使的问题示例，而后经过自身所在团队的实践分享了引入静态类型以后捕获的错误数量。 更多 JavaScript 类型系统相关资料参考这里。

• 构建简单的类 React 框架：本文中做者会按部就班地介绍如何本身构建简单的类 React 框架。做者首先讨论了 React 与 Angular 各自设计思想理念的对比，而后介绍了 DOM 树的表示以及 JSX 解析函数的实现，接下来讨论了组件类的实现与 Props、State 属性的支持，最后还简述了 React Stack 与 Fiber 调和算法。更多 React 相关资料参考这里。

• freeCodeCamp 编程指南：著名的免费在线编程教学与练习网站 freeCodeCamp 近日发布了 freeCodeCamp Guide，涵盖了从编程语言基础、Web 编程、数据结构与算法、机器学习等多领域的经验知识分享。freeCodeCamp Guide 提供了便捷的搜索功能，但愿可以为那些繁忙的开发者提供最快速的知识检索与问题解决服务。

开源项目

乐于分享，共推前端发展

• Franchise：提供了相似于 Notebook 操做界面的 SQL 工具，其内置集成了 js-xlsx、sql.js，支持链接 PostgreSQL、MySQL、BigQuery 等多种类型的数据库。使用者克隆项目后直接使用 yarn start 便可以启动开发服务器。

• Flutter: Flutter 是新一代的移动应用开发 SDK，其可以帮助开发者快速构建 iOS 与 Android 应用。Flutter 提供了热加载等开发特性，加速开发调试的效率、内置了众多 Material Design 与 Cupertino 风格的控件、容许开发者使用函数响应式框架来进行状态管理、容许调用原生接口或者集成第三方 SDK。

• luma.gl: luma.gl 是 Uber 开源的高性能 WebGL2 组件，其可以利用 GPU 进行数据可视化呈现与计算操做。luma.gl 可以充分利用 GPU 的即时渲染、变换反馈等特性，同时可以模块化地渲染着色，相较于传统的框架性能有着极大提高。

• ngraph.path：ngraph.path 是面向任意图结构的任意两点之间最快路径搜索算法与实现， 与传统的贪婪算法、Dijkstra 等算法相比，ngraph.path 可以在准确率与性能之间达成较好的平衡。做者使用了面向于路径查找的专用堆优先队列，而且重构了双向搜搜算法，以提升算法的性能。

前端之巅

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

前端之巅微信底图－5.jpg